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 :
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.
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.
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.
Step-6 : Implement render method and place below layout design inside the render block.
Step-7 : Apply the below style sheet design.
Screenshot :
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.
Code Snippet To Disable TextInput Component In React Native :
<TextInput placeholder="Enter Your Userame" underlineColorAndroid='transparent' editable={this.state.TextInputDisableHolder} />
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 :
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.
does this still work?
ReplyDeleteYes it is working fine...
ReplyDelete