diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js index f95b48e8562854..2bb0ecff29d709 100644 --- a/packages/rn-tester/js/examples/View/ViewExample.js +++ b/packages/rn-tester/js/examples/View/ViewExample.js @@ -668,6 +668,37 @@ function OutlineExample(): React.Node { ); } +function BoxSizingExample(): React.Node { + const styles = StyleSheet.create({ + boxSizingBox: { + padding: 5, + backgroundColor: 'green', + borderWidth: 5, + margin: 10, + width: 50, + height: 25, + }, + boxSizingChild: { + backgroundColor: 'red', + width: '100%', + height: '100%', + }, + }); + + return ( + + Content box 50x25 + + + + Border box 50x25 + + + + + ); +} + export default ({ title: 'View', documentationURL: 'https://reactnative.dev/docs/view', @@ -1312,5 +1343,10 @@ export default ({ name: 'outline', render: OutlineExample, }, + { + title: 'Box Sizing', + name: 'box-sizing', + render: BoxSizingExample, + }, ], }: RNTesterModule);