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

Summary:
This adds the `readOnly` prop to  TextInput as requested on https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/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
This commit is contained in:
Gabriel Donadel Dall'Agnol
2022-08-23 18:50:51 -07:00
committed by Facebook GitHub Bot
parent 32af9e6e8d
commit de75a7a22e
3 changed files with 75 additions and 0 deletions
@@ -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',