How to disable Textinput in React Native

In this article, we learn about How to disable Textinput in React Native. As a developer we need to disable React native TextInput view  for this, you have to add editable={false} and selectTextOnFocus={false} to disable TextInput in react-native, let’s look at the code

1. Create a new project

react-native init TestProject

2. Imports the following component

import React, {Component} from 'react';
import { StyleSheet,View,TextInput} from 'react-native';

3. Disable Textinput

Add editable={false} and selectTextOnFocus={false}

Add the TextInput component in return method as follows

    <View style={styles.container}>

          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
             placeholder="Username"
             value="This is enabled TextInput"
             underlineColorAndroid='transparent'/>
          </View>

          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
             placeholder="Username"
             value="This is disabled TextInput"
             underlineColorAndroid='transparent'
             editable={false}
             selectTextOnFocus={false}/>
          </View>
      </View>

I have added two TextInput one for Enable and another for disable TextInput, make sure each TextInput should be inside view, and assign a style to its view because borderRadius is not worked in iOS if you directly assign to TextInput, let’s look at the following App.js code

4. App.js

import React, {Component} from 'react';
import { StyleSheet,View,TextInput} from 'react-native';
import ClassB from './components/ClassB';

export default class App extends Component{

   constructor(props) {
    super(props);
 
  }

  render() {
    return (
      <View style={styles.container}>

          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
             placeholder="Username"
             value="This is enabled TextInput"
             underlineColorAndroid='transparent'/>
          </View>

          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
             placeholder="Username"
             value="This is disabled TextInput"
             underlineColorAndroid='transparent'
             editable={false}
             selectTextOnFocus={false}/>
          </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  welcome: {
    fontSize: 40,
    textAlign: 'center',
    margin: 10,
    color: '#f96161',
    fontWeight: 'bold',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  inputs:{
      padding:10
  },
    inputContainer: {
      borderColor:'#000000',
      borderWidth:0.5, 
      borderRadius:20,  
      backgroundColor:'#FFFFFF',
      height:45,
      width:'80%',
      marginVertical:10
  },
});

5. Output

Here is the final output

Thank you… 🙂