feat: Add readOnly prop to TextInput component (#34444)

Summary: This adds the `readOnly` prop to TextInput as requested on #34424 mapping the existing `editable` prop to `readOnly` so that `readOnly={false}` maps to `editable={true}` and `readOnly={true}` represents ` editable={false}`. This PR also updates the TextInputExample on the RNTest in order to facilitate the manual QA of this. ## Changelog [General] [Added] - Add readOnly prop to TextInput component Pull Request resolved: #34444 Test Plan: 1. Open the RNTester app and navigate to the TextInput page 2. Test the `TextInput` component through the `Editable and Read only` section https://user-images.githubusercontent.com/11707729/185295132-036443c8-1d5e-4567-a15e-5f1173cb0526.mov Reviewed By: lunaleaps Differential Revision: D38912786 Pulled By: necolas fbshipit-source-id: faeb59ed8695732be682ec55406a2de0cb7e619a
facebook · Aug 24, 2022 · de75a7a · de75a7a
1 parent 32af9e6
commit de75a7a
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 0 deletions.
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -709,6 +709,13 @@ export type Props = $ReadOnly<{|
    */
   placeholderTextColor?: ?ColorValue,
 
+  /** `readOnly` works like the `readonly` attribute in HTML.
+   *  If `true`, text is not editable. The default value is `false`.
+   *  See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
+   *  for more details.
+   */
+  readOnly?: ?boolean,
+
   /**
    * Determines how the return key should look. On Android you can also use
    * `returnKeyLabel`.
@@ -1381,6 +1388,8 @@ const ExportedForwardRef: React.AbstractComponent<
     allowFontScaling = true,
     rejectResponderTermination = true,
     underlineColorAndroid = 'transparent',
+    readOnly,
+    editable,
     ...restProps
   },
   forwardedRef: ReactRefSetter<
@@ -1392,6 +1401,7 @@ const ExportedForwardRef: React.AbstractComponent<
       allowFontScaling={allowFontScaling}
       rejectResponderTermination={rejectResponderTermination}
       underlineColorAndroid={underlineColorAndroid}
+      editable={readOnly !== undefined ? !readOnly : editable}
       {...restProps}
       forwardedRef={forwardedRef}
     />

diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js
@@ -148,6 +148,13 @@ const styles = StyleSheet.create({
   singleLineWithHeightTextInput: {
     height: 30,
   },
+  default: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#0f0f0f',
+    flex: 1,
+    fontSize: 13,
+    padding: 4,
+  },
 });
 
 exports.title = 'TextInput';
@@ -347,6 +354,35 @@ exports.examples = ([
       );
     },
   },
+  {
+    title: 'Editable and Read only',
+    render: function (): React.Node {
+      return (
+        <View>
+          <TextInput
+            placeholder="editable text input using editable prop"
+            style={styles.default}
+            editable
+          />
+          <TextInput
+            placeholder="uneditable text input using editable prop"
+            style={styles.default}
+            editable={false}
+          />
+          <TextInput
+            placeholder="editable text input using readOnly prop"
+            style={styles.default}
+            readOnly={false}
+          />
+          <TextInput
+            placeholder="uneditable text input using readOnly prop"
+            style={styles.default}
+            readOnly
+          />
+        </View>
+      );
+    },
+  },
   {
     title: 'Fixed number of lines',
     platform: 'android',

diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
@@ -621,6 +621,35 @@ exports.examples = ([
       );
     },
   },
+  {
+    title: 'Editable and Read only',
+    render: function (): React.Node {
+      return (
+        <View>
+          <TextInput
+            placeholder="editable text input using editable prop"
+            style={styles.default}
+            editable
+          />
+          <TextInput
+            placeholder="uneditable text input using editable prop"
+            style={styles.default}
+            editable={false}
+          />
+          <TextInput
+            placeholder="editable text input using readOnly prop"
+            style={styles.default}
+            readOnly={false}
+          />
+          <TextInput
+            placeholder="uneditable text input using readOnly prop"
+            style={styles.default}
+            readOnly
+          />
+        </View>
+      );
+    },
+  },
   {
     title: 'TextInput Intrinsic Size',
     render: function (): React.Node {