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);