React Native Create Disabled Button State Using TouchableOpacity

TouchableOpacity has its Prop named as disabled={}, which is used to Enable and Disable the TouchableOpacity Button State. disabled={} prop support value in Boolean format . If we would set disabled={true} then it will automatically Disable the TouchableOpacity Button state and the button will no longer in work. If we would set the disabled={false} then it will Enable the TouchableOpacity button. So in this tutorial we would Create Disabled Button State and Fade In button color on Disable situation and Highlight button on button activation.

Contents in this project Create Disabled Button State Using TouchableOpacity :

1. Import StyleSheet, View, Button, Text, TouchableOpacity and Alert component in your project.

2. Create constructor() in your class. Now make 2 States in constructor(). First is ButtonStateHolder which is used to set TouchableOpacity Button State. It accepts value in Boolean form. Second is ButtonTitle which is used to Set TouchableOpacity inside Text component Text.

3. Create function named as DisableButtonFunction() . Inside this function we would change the Both ButtonStateHolder state and ButtonTitle value.

4. Create another function named as SampleButtonFunction() . We would call this function on TouchableOpacity onPress event.

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

6. Create a button using TouchableOpacity component in Root View. As you can see in below code we are using the disabled={} prop with ButtonStateHolder State. If the ButtonStateHolder value is True then it will disable the button and if the ButtonStateHolder value is False then it will Enable the button. We would also setting up TouchableOpacity Button color using State with the combination of Ternary operator. So if ButtonStateHolder value is true then it will load Fade background color and if the ButtonStateHolder value is False then it will load the real color.

7. Add Disable Above Button Button component and call the DisableButtonFunction() on button onPress event.

8. Create Style Classes :

9. Complete source code for App.js File :

Screenshot shot in Android mobile application :

Create Disabled ButtonScreenshot in iOS mobile application :

2 Comments

  1. Gianfranco Palumbo

    How would you animate with a fade in-out transition when the button becomes disabled or enabled?

    Thanks

    • Gianfranco you can easily animate button all you have to do is apply the Fade in and out animation on button and start the animation on State value changed event.

Leave a Reply

Your email address will not be published. Required fields are marked *