From 21a0fb597a32f4829fe5545e478d78ea7862811c Mon Sep 17 00:00:00 2001
From: Moti Zilberman <moti@meta.com>
Date: Fri, 17 Feb 2023 05:43:24 -0800
Subject: [PATCH] Add invalid props example to RNTester (#36162)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36162

Changelog: [Internal]

Adds a dedicated screen to RNTester to help manually test the handling of various invalid prop values.

Reviewed By: huntie

Differential Revision: D43270626

fbshipit-source-id: 3fbf452955b2caace7a09fbb9c83960703fd974f
---
 .../InvalidProps/InvalidPropsExample.js       | 161 ++++++++++++++++++
 .../js/utils/RNTesterList.android.js          |   4 +
 .../rn-tester/js/utils/RNTesterList.ios.js    |   4 +
 3 files changed, 169 insertions(+)
 create mode 100644 packages/rn-tester/js/examples/InvalidProps/InvalidPropsExample.js

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 (
+        <Comparison actual={[1]} expected={undefined}>
+          {flex => (
+            <View style={{height: 50}}>
+              <View
+                style={
+                  // $FlowFixMe[incompatible-type]
+                  {
+                    flex,
+                    backgroundColor: 'red',
+                  }
+                }
+              />
+              <View style={{flex: 1, backgroundColor: 'lightgreen'}} />
+            </View>
+          )}
+        </Comparison>
+      );
+    },
+  },
+  {
+    title: 'View flexDirection',
+    render(): React.Node {
+      return (
+        <Comparison actual={'row.'} expected={undefined}>
+          {flexDirection => (
+            <View
+              // $FlowFixMe[incompatible-type]
+              style={{flexDirection}}>
+              <Text>⬇️</Text>
+              <Text>⬇️</Text>
+            </View>
+          )}
+        </Comparison>
+      );
+    },
+  },
+  {
+    title: 'Text fontVariant',
+    render(): React.Node {
+      return (
+        <Comparison
+          actual={['no-such-variant', 'small-caps-12345']}
+          expected={undefined}>
+          {fontVariant => (
+            <Text
+              style={
+                // $FlowFixMe[incompatible-type]
+                {fontVariant}
+              }>
+              The quick brown fox jumps over the lazy dog.
+            </Text>
+          )}
+        </Comparison>
+      );
+    },
+  },
+  {
+    title: 'View width',
+    render(): React.Node {
+      return (
+        <Comparison actual={['invalid']} expected={undefined}>
+          {width => (
+            <View style={{backgroundColor: 'red'}}>
+              <View
+                style={
+                  // $FlowFixMe[incompatible-type]
+                  {width, height: 50, backgroundColor: 'lightgreen'}
+                }
+              />
+            </View>
+          )}
+        </Comparison>
+      );
+    },
+  },
+  {
+    title: 'View background color',
+    render(): React.Node {
+      return (
+        <Comparison actual={['invalid']} expected={undefined}>
+          {backgroundColor => (
+            <View style={{backgroundColor: 'lightgreen'}}>
+              <View
+                style={
+                  // $FlowFixMe[incompatible-type]
+                  {backgroundColor, height: 50}
+                }
+              />
+            </View>
+          )}
+        </Comparison>
+      );
+    },
+  },
+  {
+    title: 'Malformed platform color',
+    render(): React.Node {
+      return (
+        <Comparison
+          actual={{resource_paths: ([]: Array<string>)}}
+          expected={undefined}>
+          {backgroundColor => (
+            <View style={{backgroundColor: 'lightgreen'}}>
+              <View
+                style={
+                  // $FlowFixMe[incompatible-type]
+                  {backgroundColor, height: 50}
+                }
+              />
+            </View>
+          )}
+        </Comparison>
+      );
+    },
+  },
+];
+
+function Comparison<ExpectedT, ActualT>({
+  children,
+  actual,
+  expected,
+}: {
+  children: (value: ExpectedT | ActualT) => React.Node,
+  actual: ActualT,
+  expected: ExpectedT,
+}): React.Node {
+  return (
+    <>
+      <Text style={{fontWeight: 'bold'}}>Actual</Text>
+      {children(actual)}
+      <Text style={{fontWeight: 'bold'}}>Expected</Text>
+      {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<RNTesterModuleInfo> = [
     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<RNTesterModuleInfo> = [
     key: 'Dimensions',
     module: require('../examples/Dimensions/DimensionsExample'),
   },
+  {
+    key: 'InvalidPropsExample',
+    module: require('../examples/InvalidProps/InvalidPropsExample'),
+  },
   {
     key: 'Keyboard',
     module: require('../examples/Keyboard/KeyboardExample').default,