CODEWITHSUNDEEP
reactjsbuttonreact-nativenative
SrArkaitz
SrArkaitz

Reputation: 486

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!

Upvotes: 7

Views: 12238

Answers (2)

Rivak Shah
Rivak Shah

Reputation: 29

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

Upvotes: 2

Kasparas Anusauskas
Kasparas Anusauskas

Reputation: 1092

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.

Upvotes: 4

Related Questions