How to Make TextInput not Editable in React Native

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.