diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
index 8e3296f5d2cf..3f9f196db5de 100644
--- 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
index bf41299b8d30..f372bbb77c58 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 (
+
+
+
+
+
+
+ );
+ },
+ },
{
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 ba2be2aaf8e2..b3940a1f8332 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 (
+
+
+
+
+
+
+ );
+ },
+ },
{
title: 'TextInput Intrinsic Size',
render: function (): React.Node {