diff --git a/packages/rn-tester/js/examples/InvalidProps/InvalidPropsExample.js b/packages/rn-tester/js/examples/InvalidProps/InvalidPropsExample.js new file mode 100644 index 00000000000..507268c03fc --- /dev/null +++ b/packages/rn-tester/js/examples/InvalidProps/InvalidPropsExample.js @@ -0,0 +1,161 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow + */ + +'use strict'; + +import * as React from 'react'; + +import {Text, View} from 'react-native'; + +export const title = 'Invalid Props'; +export const category = 'Other'; +export const description = + 'Examples of passing invalid prop values and how they fall back to expected defaults.'; + +export const examples = [ + { + title: 'View flex', + render(): React.Node { + return ( + + {flex => ( + + + + + )} + + ); + }, + }, + { + title: 'View flexDirection', + render(): React.Node { + return ( + + {flexDirection => ( + + ⬇️ + ⬇️ + + )} + + ); + }, + }, + { + title: 'Text fontVariant', + render(): React.Node { + return ( + + {fontVariant => ( + + The quick brown fox jumps over the lazy dog. + + )} + + ); + }, + }, + { + title: 'View width', + render(): React.Node { + return ( + + {width => ( + + + + )} + + ); + }, + }, + { + title: 'View background color', + render(): React.Node { + return ( + + {backgroundColor => ( + + + + )} + + ); + }, + }, + { + title: 'Malformed platform color', + render(): React.Node { + return ( + )}} + expected={undefined}> + {backgroundColor => ( + + + + )} + + ); + }, + }, +]; + +function Comparison({ + children, + actual, + expected, +}: { + children: (value: ExpectedT | ActualT) => React.Node, + actual: ActualT, + expected: ExpectedT, +}): React.Node { + return ( + <> + Actual + {children(actual)} + Expected + {children(expected)} + + ); +} diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js index 3e590bb405f..c76ba8c5db3 100644 --- a/packages/rn-tester/js/utils/RNTesterList.android.js +++ b/packages/rn-tester/js/utils/RNTesterList.android.js @@ -188,6 +188,10 @@ const APIs: Array = [ category: 'UI', module: require('../examples/Dimensions/DimensionsExample'), }, + { + key: 'InvalidPropsExample', + module: require('../examples/InvalidProps/InvalidPropsExample'), + }, { key: 'Keyboard', category: 'Basic', diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js index 651d939faa7..7676a8831f4 100644 --- a/packages/rn-tester/js/utils/RNTesterList.ios.js +++ b/packages/rn-tester/js/utils/RNTesterList.ios.js @@ -194,6 +194,10 @@ const APIs: Array = [ key: 'Dimensions', module: require('../examples/Dimensions/DimensionsExample'), }, + { + key: 'InvalidPropsExample', + module: require('../examples/InvalidProps/InvalidPropsExample'), + }, { key: 'Keyboard', module: require('../examples/Keyboard/KeyboardExample').default,