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,