diff --git a/packages/rn-tester/js/examples/Border/BorderExample.js b/packages/rn-tester/js/examples/Border/BorderExample.js
index 12e9a08c3e3..e8a7a7e87bd 100644
--- a/packages/rn-tester/js/examples/Border/BorderExample.js
+++ b/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 (
+
+
+
+ );
+ },
+ },
+ {
+ title: 'Child clipping',
+ name: 'child-clipping',
+ description:
+ '"overflow: hidden" will cause child content to be clipped to borders',
+ render: function (): React.Node {
+ return (
+
+
+
+ );
+ },
+ },
+ {
+ 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 (
+
+
+
+ );
+ },
+ },
],
}: RNTesterModule);