From a1277d0dc3a321e9fa35e837a44374ddd7fbe238 Mon Sep 17 00:00:00 2001
From: Gabriel Donadel Dall'Agnol <donadeldev@gmail.com>
Date: Thu, 18 Aug 2022 01:29:12 -0300
Subject: [PATCH 1/3] feat: Add readOnly prop to TextInput

---
 Libraries/Components/TextInput/TextInput.js   |  9 +++++
 .../__snapshots__/TextInput-test.js.snap      |  2 ++
 .../TextInput/TextInputExample.android.js     | 36 +++++++++++++++++++
 .../TextInput/TextInputExample.ios.js         | 29 +++++++++++++++
 4 files changed, 76 insertions(+)

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
index 8e3296f5d2cf20..c0fa000f771140 100644
--- a/Libraries/Components/TextInput/TextInput.js
+++ b/Libraries/Components/TextInput/TextInput.js
@@ -532,6 +532,13 @@ export type Props = $ReadOnly<{|
    */
   editable?: ?boolean,
 
+  /** `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,
+
   forwardedRef?: ?ReactRefSetter<
     React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
   >,
@@ -1381,6 +1388,7 @@ const ExportedForwardRef: React.AbstractComponent<
     allowFontScaling = true,
     rejectResponderTermination = true,
     underlineColorAndroid = 'transparent',
+    readOnly = false,
     ...restProps
   },
   forwardedRef: ReactRefSetter<
@@ -1392,6 +1400,7 @@ const ExportedForwardRef: React.AbstractComponent<
       allowFontScaling={allowFontScaling}
       rejectResponderTermination={rejectResponderTermination}
       underlineColorAndroid={underlineColorAndroid}
+      editable={!readOnly}
       {...restProps}
       forwardedRef={forwardedRef}
     />
diff --git a/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap b/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
index d83ac32fe9bf88..e76e99888fd7d5 100644
--- a/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
+++ b/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
@@ -4,6 +4,7 @@ exports[`TextInput tests should render as expected: should deep render when mock
 <RCTSinglelineTextInputView
   accessible={true}
   allowFontScaling={true}
+  editable={true}
   focusable={true}
   forwardedRef={null}
   mostRecentEventCount={0}
@@ -33,6 +34,7 @@ exports[`TextInput tests should render as expected: should deep render when not
 <RCTSinglelineTextInputView
   accessible={true}
   allowFontScaling={true}
+  editable={true}
   focusable={true}
   forwardedRef={null}
   mostRecentEventCount={0}
diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js
index bf41299b8d3016..f372bbb77c58dc 100644
--- 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
index ba2be2aaf8e29f..b3940a1f8332d5 100644
--- 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 {

From f29a5339ee2a3832254e5c34005f526b4aa16215 Mon Sep 17 00:00:00 2001
From: Gabriel Donadel Dall'Agnol <donadeldev@gmail.com>
Date: Thu, 18 Aug 2022 19:07:36 -0300
Subject: [PATCH 2/3] feat: Update TextInput logic to readOnly take priority
 over editable

---
 Libraries/Components/TextInput/TextInput.js                  | 5 +++--
 .../TextInput/__tests__/__snapshots__/TextInput-test.js.snap | 2 --
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
index c0fa000f771140..81cee719d725ec 100644
--- a/Libraries/Components/TextInput/TextInput.js
+++ b/Libraries/Components/TextInput/TextInput.js
@@ -1388,7 +1388,8 @@ const ExportedForwardRef: React.AbstractComponent<
     allowFontScaling = true,
     rejectResponderTermination = true,
     underlineColorAndroid = 'transparent',
-    readOnly = false,
+    readOnly,
+    editable,
     ...restProps
   },
   forwardedRef: ReactRefSetter<
@@ -1400,7 +1401,7 @@ const ExportedForwardRef: React.AbstractComponent<
       allowFontScaling={allowFontScaling}
       rejectResponderTermination={rejectResponderTermination}
       underlineColorAndroid={underlineColorAndroid}
-      editable={!readOnly}
+      editable={readOnly !== undefined ? !readOnly : editable}
       {...restProps}
       forwardedRef={forwardedRef}
     />
diff --git a/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap b/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
index e76e99888fd7d5..d83ac32fe9bf88 100644
--- a/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
+++ b/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
@@ -4,7 +4,6 @@ exports[`TextInput tests should render as expected: should deep render when mock
 <RCTSinglelineTextInputView
   accessible={true}
   allowFontScaling={true}
-  editable={true}
   focusable={true}
   forwardedRef={null}
   mostRecentEventCount={0}
@@ -34,7 +33,6 @@ exports[`TextInput tests should render as expected: should deep render when not
 <RCTSinglelineTextInputView
   accessible={true}
   allowFontScaling={true}
-  editable={true}
   focusable={true}
   forwardedRef={null}
   mostRecentEventCount={0}

From 21aec015744d3c38c8b3f1c74c4a6f6e204392ff Mon Sep 17 00:00:00 2001
From: Gabriel Donadel Dall'Agnol <donadeldev@gmail.com>
Date: Thu, 18 Aug 2022 20:01:36 -0300
Subject: [PATCH 3/3] chore: Update TextInput prop types to be alpha sorted

---
 Libraries/Components/TextInput/TextInput.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
index 81cee719d725ec..3f9f196db5dec2 100644
--- a/Libraries/Components/TextInput/TextInput.js
+++ b/Libraries/Components/TextInput/TextInput.js
@@ -532,13 +532,6 @@ export type Props = $ReadOnly<{|
    */
   editable?: ?boolean,
 
-  /** `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,
-
   forwardedRef?: ?ReactRefSetter<
     React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
   >,
@@ -716,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`.