Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable a button in React Native after clicking it

I am doing a huge project and I am having some issues with it.

Every time I click the login button, it takes a while to make the database connection, and if this button is an alert and you click it multiple times, it will show the alert multiple times as well.

This is the button:

 <TouchableOpacity
              style={styles.submitButton}
              onPress={
                () => this.login(this.state.email, this.state.password)
              }>
              <Text style={styles.submitButtonText}>Login</Text>
 </TouchableOpacity>

I would like to disable the button after clicking it so the alert error only appears once.

This is where I want to put the code to deactivate the button:

if (respo == 'Wrong name or password.') {
          alert("Wrong Username and Password.");
        } else {
          if (respo.user.uid > 0) {
            if (Object.values(respo.user.roles).indexOf("student user") > -1) {
              AsyncStorage.setItem("u_uid", respo.user.uid);
              alert("Login Successfull.");
              Actions.home();
            } else {
              alert("Only Student user is allowed to login.");
            }
          }
        }

Thank you!

like image 318
SrArkaitz Avatar asked Mar 16 '18 09:03

SrArkaitz


People also ask

How do I make a button disabled?

The disabled attribute is a boolean attribute. When present, it specifies that the button should be disabled. A disabled button is unusable and un-clickable. The disabled attribute can be set to keep a user from clicking on the button until some other condition has been met (like selecting a checkbox, etc.).

How do you disable a button until another button is clicked?

You can just add "disabled" to your button, and then when the user locks in their answer, enable it again. Additionally, it's not best practice to split your JavaScript into a bunch of different script tags. Put them all in one place.


2 Answers

Well, the simplest logic could be:

  1. Set up a variable that will track whether the the login process is in process, like
    var loginInProcess = false. This should probably be set in the state of some parent component that tracks the state of your application, but let's keep it simple.
  2. In the onPress event, set the value loginInProcess = true
  3. Execute the login actions conditionally, only if login is not in process:

For example:

   onPress = {() => {

    if (!loginInProcess) {
        loginInProcess = true;
        this.login(this.state.email, this.state.password)
    } else {
        /*Login in process, do something else*/
    }}}>
  1. If login fails (your second block of code), reset the variable: loginInProcess = false to be able to try and "login" again.
like image 68
Kasparas Anusauskas Avatar answered Oct 30 '22 08:10

Kasparas Anusauskas


i have a good solution for this you can use this for disable the button

<View style={styles.MainContainer} >
     <TouchableOpacity
         activeOpacity = { .5 } 
         disabled={true}
         onPress={this.SampleButtonFunction} 
      > 
         <Text>Submit</Text>
     </TouchableOpacity>
</View>

this activeOpacity and disable is work for this

like image 27
Rivak Shah Avatar answered Oct 30 '22 07:10

Rivak Shah