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 {