mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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:
committed by
Facebook GitHub Bot
parent
32af9e6e8d
commit
de75a7a22e
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user