Navigate back to the homepage

How to disable button after one click in react native?

Infinitbility
React Native
January 3rd, 2022 · 1 min read
How to disable button after one click in react native?

Hello Friends 👋,

Welcome to Infinitbility.

When we are calling servers and any third-party API’s then we have to make sure users will not press multiple times’ buttons and that’s some people show loader and some disabled-buttons.

Today, we will see how we can disable a button when anyone presses a button.

Basically, we are going to create a state and we will disable it when clicking on a button plus we also condition a button if the state isDisabled is true we will disable a button.

To possible this feature, the react-native button provides disabled option when we will pass true button should go automatically in disabled mode and when we change to false then button comes to enable mode.

Let’s try the real-life example.

1import React, { useState } from 'react';
2import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
3
4const App = () => {
5 const [isDisabled, setIsDisabled] = useState(false);
6
7 const doYourTask = () => {
8 setIsDisabled(true);
9 }
10
11 return (
12 <View style={styles.container}>
13 <Button
14 title="Press me"
15 disabled={isDisabled}
16 onPress={() => doYourTask()}
17 />
18 </View>)
19};
20
21const styles = StyleSheet.create({
22 container: {
23 right: 10,
24 left: 10,
25 position: 'absolute',
26 bottom: 10,
27 }
28});
29
30export default App;
  • Try it yourself

In the above example, we have called a function doYourTask() and disabled button with help of the state, and when you want to enable it after your task call setIsDisabled(false).

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to set current date in datepicker in react native?

How to set current date in datepicker in react native?

React Native, Set current date in react-native-datepicker example.

January 2nd, 2022 · 1 min read
How to set button bottom of the screen in react native?

How to set button bottom of the screen in react native?

React Native, Set Button on bottom example.

January 1st, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]