How disable options on React Native TextInput?

Sometimes, we want to disable options on React Native TextInput.

In this article, we’ll look at how to disable options on React Native TextInput.

How disable options on React Native TextInput?

To disable options on React Native TextInput, we can set the editable and selectTextOnFocus props to false.

For instance, we write:

import * as React from 'react';
import { View, TextInput } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View>
      <TextInput
        editable={false}
        selectTextOnFocus={false}
        style={{ padding: 30 }}
        placeholder="Name"
      />
    </View>
  );
}

to set them both to false.

Then we won’t see any popup options displayed when we focus on the text input.

editable set to false disables typing in the input.

selectTextOnFocus set to false means text won’t be selected when we focus on it.

Conclusion

To disable options on React Native TextInput, we can set the editable and selectTextOnFocus props to false.