diff --git a/packages/rn-tester/js/examples/Border/BorderExample.js b/packages/rn-tester/js/examples/Border/BorderExample.js index b58c8e6a17e..653509fca70 100644 --- a/packages/rn-tester/js/examples/Border/BorderExample.js +++ b/packages/rn-tester/js/examples/Border/BorderExample.js @@ -124,6 +124,12 @@ const styles = StyleSheet.create({ borderBottomRightRadius: 20, borderColor: 'black', }, + border9Percentages: { + borderWidth: 10, + borderTopLeftRadius: '10%', + borderBottomRightRadius: '20%', + borderColor: 'black', + }, border10: { borderWidth: 10, backgroundColor: 'white', @@ -132,6 +138,14 @@ const styles = StyleSheet.create({ borderColor: 'black', elevation: 10, }, + border10Percentages: { + borderWidth: 10, + backgroundColor: 'white', + borderTopLeftRadius: '10%', + borderBottomRightRadius: '20%', + borderColor: 'black', + elevation: 10, + }, border11: { width: 0, height: 0, @@ -343,6 +357,19 @@ export default ({ ); }, }, + { + title: 'Corner Radii (Percentages)', + name: 'corner-radii', + description: 'borderTopLeftRadius & borderBottomRightRadius', + render: function (): React.Node { + return ( + + ); + }, + }, { title: 'Corner Radii / Elevation', name: 'corner-radii-elevation', @@ -357,6 +384,20 @@ export default ({ ); }, }, + { + title: 'Corner Radii / Elevation (Percentages)', + name: 'corner-radii-elevation', + description: 'borderTopLeftRadius & borderBottomRightRadius & elevation', + platform: 'android', + render: function (): React.Node { + return ( + + ); + }, + }, { title: 'CSS Trick - Triangle', name: 'css-trick-triangle',