import React from 'react'
import { ScrollView, StyleSheet, View } from 'react-native'
import WebImage from 'react-native-web-image'

export default function TestBordersFlexible () {
  const uri = 'https://placeholdit.imgix.net/~text?txtsize=26&txt=100x80&w=100&h=80'
  const bs = {
    borderColor: 'red',
    borderWidth: 2,
    borderRadius: 10
  }
  return <ScrollView style={s.container}>
    <View style={[s.block, {width: 102 + 4, height: 82 + 4}]}><WebImage source={{uri}} style={[s.web, bs]} /></View>
    <View style={[s.block, {width: 120 + 4, height: 120 + 4}]}><WebImage source={{uri}} style={[s.web, bs]} /></View>
    <View style={[s.block, {width: 120 + 4, height: 90 + 4}]}><WebImage source={{uri}} style={[s.web, bs]} /></View>
    <View style={[s.block, {width: 90 + 4, height: 90 + 4}]}><WebImage source={{uri}} style={[s.web, bs]} /></View>
    <View style={[s.block, {width: 90 + 4, height: 50 + 4}]}><WebImage source={{uri}} style={[s.web, bs]} /></View>
  </ScrollView>
}

const s = StyleSheet.create({
  container: {
    flex: 1
  },
  block: {
    borderWidth: 1,
    borderColor: 'green'
  },
  web: {
    flex: 1
  }
})

@@ -426,14 +426,10 @@
 h: 1
+6
 0
-2 + 4
 , he
@@ -438,14 +438,11 @@
 ht: 
-82 + 4
+160
 %7D%5D%7D%3E
@@ -524,38 +524,34 @@
 block, %7Bwidth: 1
-20 + 4
+60
 , height: 120 + 
@@ -545,22 +545,18 @@
 eight: 1
-20 + 4
+60
 %7D%5D%7D%3E%3CWeb
@@ -597,357 +597,53 @@
 , bs
-%5D%7D /%3E%3C/View%3E%0A    %3CView style=%7B%5Bs.block, %7Bwidth: 120 + 4, height: 90 + 4%7D%5D%7D%3E%3CWebImage source=%7B%7Buri%7D%7D style=%7B%5Bs.web, bs%5D%7D /%3E%3C/View%3E%0A    %3CView style=%7B%5Bs.block, %7Bwidth: 90 + 4, height: 90 + 4%7D%5D%7D%3E%3CWebImage source=%7B%7Buri%7D%7D style=%7B%5Bs.web, bs%5D%7D /%3E%3C/View%3E%0A    %3CView style=%7B%5Bs.block, %7Bwidth: 90 + 4, height: 50 + 4%7D%5D%7D%3E%3CWebImage source=%7B%7Buri%7D%7D style=%7B%5Bs.web, bs
+, %7BborderLeftWidth: 30, borderRightWidth: 30%7D
 %5D%7D /

Improve border test