Add border clipping examples (#44711)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44711

This adds just the border clipping examples and tests from D57668976

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D57941945

fbshipit-source-id: 2234927cb944710c9d929d1d77087d3d2ecdbca6

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

@@ -12,9 +12,11 @@
 
 import type {RNTesterModule} from '../../types/RNTesterTypes';
 
+import hotdog from '../../assets/hotdog.jpg';
 import * as React from 'react';
 import {
   DynamicColorIOS,
+  Image,
   Platform,
   PlatformColor,
   StyleSheet,
@@ -214,6 +216,23 @@ const styles = StyleSheet.create({
         ? DynamicColorIOS({light: 'magenta', dark: 'cyan'})
         : 'black',
   },
+  borderWithoutClipping: {
+    borderWidth: 10,
+    overflow: 'visible',
+  },
+  borderWithClipping: {
+    borderWidth: 10,
+    overflow: 'hidden',
+  },
+  borderWithClippingAndRadius: {
+    borderWidth: 10,
+    borderRadius: 30,
+    overflow: 'hidden',
+  },
+  hotdog: {
+    width: 100,
+    height: 100,
+  },
 });
 
 export default ({
@@ -477,5 +496,50 @@ export default ({
         );
       },
     },
+    {
+      title: 'Child without clipping',
+      name: 'child-no-clipping',
+      description:
+        '"overflow: visible" will cause child content to show above borders',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="border-test-child-no-clipping"
+            style={[styles.box, styles.borderWithoutClipping]}>
+            <Image source={hotdog} style={styles.hotdog} />
+          </View>
+        );
+      },
+    },
+    {
+      title: 'Child clipping',
+      name: 'child-clipping',
+      description:
+        '"overflow: hidden" will cause child content to be clipped to borders',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="border-test-child-clipping"
+            style={[styles.box, styles.borderWithClipping]}>
+            <Image source={hotdog} style={styles.hotdog} />
+          </View>
+        );
+      },
+    },
+    {
+      title: 'Child clipping with radius',
+      name: 'child-clipping-radius',
+      description:
+        '"overflow: hidden" will cause child content to be clipped to rounded corners',
+      render: function (): React.Node {
+        return (
+          <View
+            testID="border-test-child-clipping-radius"
+            style={[styles.box, styles.borderWithClippingAndRadius]}>
+            <Image source={hotdog} style={styles.hotdog} />
+          </View>
+        );
+      },
+    },
   ],
 }: RNTesterModule);