Last Updated on December 10, 2020.
Sometimes, you might need TextInput which can’t be edited by the user. In that case, TextInput should be made not editable with editable prop. Let’s check how to make TextInput noneditable in react native.
Go through the code below where I made TextInput not editable.
Class based component
import React, {Component} from 'react';
import {TextInput, StyleSheet, View} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {text: 'Useless Placeholder'};
}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
editable={false}
placeholderTextColor={'black'}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
},
});
Function based component
import React, {useState} from 'react';
import {TextInput, StyleSheet, View} from 'react-native';
const App = () => {
const [input, setInput] = useState('Useless Placeholder');
return (
<View style={styles.container}>
<TextInput
style={styles.input}
editable={false}
placeholderTextColor={'black'}
onChangeText={(text) => setInput(text)}
value={input}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
},
});
export default App;
As you noticed, here I used editable={false} to make the TextInput not editable in React Native.
Following is the output of this react native example.

I hope you will find this tutorial helpful.