How to Make TextInput not Editable in React Native

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.

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.