React Native Enable and Disable TextInput Programmatically
Tags: android, mobileapplicationd, reactnative
Published: 2019-01-20 09:19:41

---
title: React Native Enable and Disable TextInput Programmatically
published: true
tags: android,Mobile Application D,React Native
canonical_url: 
---
-----------
Source : <a href="https://www.skptricks.com/2019/01/react-native-enable-and-disable-textinput-field.html" > React Native Enable and Disable TextInput Programmatically</a>
------------


This tutorial explains how to enable and disable TextInput component programatically in react native application. TextInput comes with prop **editable={Boolean Value}** , this prop can Enable Disable TextInput input value dynamically. If the value of **editable={false}** then it will disable the complete TextInput component and restricts the application user to enter or type any value inside it. If the value of **editable={true}** then it will Enable the TextInput and user can now enter value inside it.  
  
**Code Snippet To Disable TextInput Component In React Native :**  

```
 <TextInput  
placeholder="Enter Your Userame"  
underlineColorAndroid='transparent'  
editable={this.state.TextInputDisableHolder}  
/> 
```
  

[![React Native Enable and Disable TextInput Programmatically](https://1.bp.blogspot.com/-wL3HIb4iqaE/XD1T6fkur7I/AAAAAAAACVI/bu0kxTo-6eMcSzaZBVZSB42IbNYTFBubQCLcBGAs/s640/textinput.png "React Native Enable and Disable TextInput Programmatically")](https://1.bp.blogspot.com/-wL3HIb4iqaE/XD1T6fkur7I/AAAAAAAACVI/bu0kxTo-6eMcSzaZBVZSB42IbNYTFBubQCLcBGAs/s1600/textinput.png)
  
  

## **Enable and Disable TextInput Component In React Native :**
In this example, we are going to create simple TextInput Component, in which whenever user enter any text and click on update button, then it will not allow the user to enter text again.  
  
**Step-1: ** Create a new react native project, if you don’t know [how to create a new project in react native just follow this tutorial](https://www.skptricks.com/2018/06/how-to-create-your-first-react-native-application.html).  
  
**Step-2:**  Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.  
  
**Step-3: ** Through react , react-native  packages import all required components.  

```
import React, { Component } from "react";  
import { Platform, StyleSheet, View, Button, TextInput, } from "react-native";
```
  
**Step-4: ** Inside the App class create a constructor and define the state object as  **TextInputDisableStatus**. This State object helps to enable and disable TextInput field.  

```
constructor() {  
super();  
this.state = { TextInputDisableStatus: true }  
}
```
  
**Step-5: ** inside the  **App ** class create function named as  **onPressButton**. This function will disable the text input field, when user clicks on "update username" button.  

```
onPressButton = () => {  
this.setState({ TextInputDisableStatus: false })  
}
```
  
**Step-6 : **  Implement render method and place below layout design inside the render block.  

```
render() {  
return (  
<View style={styles.container}>  
  
<TextInput  
          placeholder="Enter Your Userame"  
          underlineColorAndroid='transparent'  
          style={[styles.TextInputStyle, { backgroundColor: this.state.TextInputDisableStatus ? '#FFF' : '#C0C0C0' }]}  
          editable={this.state.TextInputDisableHolder}  
/>  
  
<Button  
          onPress={this.onPressButton}  
          title="Update Username"  
          color="#841584"  
          accessibilityLabel="Update Username"  
/>  
  
</View>  
);  
}
```
  
**Step-7 : ** Apply the below style sheet design.  

```
const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    justifyContent: 'center',  
},  
  headerText: {  
    fontSize: 20,  
    textAlign: "center",  
    margin: 10,  
    fontWeight: "bold"  
},  
TextInputStyle: {  
    textAlign: 'center',  
    height: 40,  
    borderRadius: 10,  
    borderWidth: 2,  
    borderColor: '#009688',  
    marginBottom: 10  
}  
});
```
  

## Complete Source Code for App.js 
Lets see the complete source code that helps to enable and disable the TextInput Component, when user clicks on "update username" button in react native application.  

```
/\*\*  
 \* Sample React Native App  
 \* https://github.com/facebook/react-native  
 \* @flow  
 \*/  
  
import React, { Component } from "react";  
import { Platform, StyleSheet, View, Button, TextInput, } from "react-native";  
  
export default class App extends Component {  
  
  constructor() {  
super();  
this.state = { TextInputDisableStatus: true }  
}  
  
  
  onPressButton = () => {  
this.setState({ TextInputDisableStatus: false })  
}  
  
  render() {  
return (  
<View style={styles.container}>  
  
<TextInput  
          placeholder="Enter Your Userame"  
          underlineColorAndroid='transparent'  
          style={[styles.TextInputStyle, { backgroundColor: this.state.TextInputDisableStatus ? '#FFF' : '#C0C0C0' }]}  
          editable={this.state.TextInputDisableHolder}  
/>  
  
<Button  
          onPress={this.onPressButton}  
          title="Update Username"  
          color="#841584"  
          accessibilityLabel="Update Username"  
/>  
  
</View>  
);  
}  
}  
  
const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    justifyContent: 'center',  
},  
  headerText: {  
    fontSize: 20,  
    textAlign: "center",  
    margin: 10,  
    fontWeight: "bold"  
},  
TextInputStyle: {  
    textAlign: 'center',  
    height: 40,  
    borderRadius: 10,  
    borderWidth: 2,  
    borderColor: '#009688',  
    marginBottom: 10  
}  
});
```
  
**Screenshot :**  

[![React Native Enable and Disable TextInput Programmatically](https://2.bp.blogspot.com/-MzYCmDOqYyM/XD1SW6nv-9I/AAAAAAAACUw/3jgijR_-xvEX8GYcHePi6E7pVzhUCqqrwCLcBGAs/s400/Screenshot_1547522588.png "React Native Enable and Disable TextInput Programmatically")](https://2.bp.blogspot.com/-MzYCmDOqYyM/XD1SW6nv-9I/AAAAAAAACUw/3jgijR_-xvEX8GYcHePi6E7pVzhUCqqrwCLcBGAs/s1600/Screenshot_1547522588.png)

  

[![React Native Enable and Disable TextInput Programmatically](https://1.bp.blogspot.com/-OWRwXqTUsSc/XD1SZIBp4wI/AAAAAAAACU0/sMdcpqmjy3AiJ5yKhVhkxSXqONBVfY3fQCLcBGAs/s400/Screenshot_1547522624.png "React Native Enable and Disable TextInput Programmatically")](https://1.bp.blogspot.com/-OWRwXqTUsSc/XD1SZIBp4wI/AAAAAAAACU0/sMdcpqmjy3AiJ5yKhVhkxSXqONBVfY3fQCLcBGAs/s1600/Screenshot_1547522624.png)

  

[![React Native Enable and Disable TextInput Programmatically](https://3.bp.blogspot.com/-pVgrK43C2t0/XD1SaJJIOkI/AAAAAAAACU4/1An9yI4gNooHFJkHZ-H5UR7AUNVvOO7agCLcBGAs/s400/Screenshot_1547522629.png "React Native Enable and Disable TextInput Programmatically")](https://3.bp.blogspot.com/-pVgrK43C2t0/XD1SaJJIOkI/AAAAAAAACU4/1An9yI4gNooHFJkHZ-H5UR7AUNVvOO7agCLcBGAs/s1600/Screenshot_1547522629.png)

  

  

**Download Link :**  
[https://github.com/skptricks/React-Native/tree/master/React%20Native%20Enable%20and%20Disable%20TextInput%20Programmatically](https://github.com/skptricks/React-Native/tree/master/React%20Native%20Enable%20and%20Disable%20TextInput%20Programmatically)  
  
This is all about **enable and disable TextInput component in react native application**. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.