Add an example

Author: zoontek

packages/rn-tester/js/examples/Border/BorderExample.js

@@ -124,6 +124,23 @@ const styles = StyleSheet.create({
     borderRightWidth: 5,
     borderStyle: 'dashed',
   },
+  borderLogical: {
+    marginRight: 10,
+    borderBlockStartWidth: 10,
+    borderBlockStartColor: 'red',
+    borderBlockEndWidth: 20,
+    borderBlockEndColor: 'green',
+    borderInlineStartWidth: 30,
+    borderInlineStartColor: 'blue',
+    borderInlineEndWidth: 40,
+    borderInlineEndColor: 'yellow',
+  },
+  borderLogicalShorthands: {
+    borderBlockWidth: 10,
+    borderBlockColor: 'red',
+    borderInlineWidth: 20,
+    borderInlineColor: 'blue',
+  },
   border9: {
     borderWidth: 10,
     borderTopLeftRadius: 10,
@@ -387,6 +404,22 @@ export default {
         );
       },
     },
+    {
+      title: 'Logical Borders',
+      name: 'logical-borders',
+      description: 'borderBlock* & borderInline*',
+      render: function (): React.Node {
+        return (
+          <View testID="border-test-logical-borders" style={styles.wrapper}>
+            <View style={[styles.box, styles.borderLogical]} />
+            <View
+              style={[styles.box, styles.borderLogical, {direction: 'rtl'}]}
+            />
+            <View style={[styles.box, styles.borderLogicalShorthands]} />
+          </View>
+        );
+      },
+    },
     {
       title: 'Corner Radii',
       name: 'corner-radii',