React Native Enable Disable TextInput Programmatically Android iOS

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.

What we are doing in this tutorial(Must Read) :

We are creating 2 TextInput component in our project and by default disable the 2nd TextInput using editable={false}. We would use the State to set the True and False value. Now when user starts typing value in 1st TextInput then it will call a runtime prop event onChangeText={} in first TextInput which will store its value in a variable and along with it will a function. Inside the function we would check the Text length and if the length is more then zero(0) then it will enable the 2nd TextInput using State. We would also change the border color or 2nd TextInput so it look like it will highlight.

Contents in this project Enable Disable TextInput Programmatically in Android iOS React Native app:

1. Import View, TextInput and StyleSheet component in your project.

2. Create a State named as TextInputDisableHolder as Boolean type and store False inside it.

3. Create a function named as DisableTextInput() with Value argument. Inside this function we would first check the entered text length in 1st TextInput and if the length is !=(Not Equals) to 0 then it will set True in TextInputDisableHolder State.

4. Create a Root View in render’s return block. This is our main container view.

5. Create 2 TextInput component in Root View. We would set the editable={ } prop in 2nd Text Input.

6. Create Style for TextInput and View.

7. Complete source code for App.js File :

Screenshots in Android device :

Enable Disable TextInput Programmatically

Screenshots in iOS device :

Leave a Reply

Your email address will not be published.