Tuesday, January 15, 2019

React Native Enable and Disable TextInput Programmatically

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


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.

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

React Native Enable and Disable TextInput Programmatically

React Native Enable and Disable TextInput Programmatically


Download Link :
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.

2 comments: