6

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!

2
  • Why not use the Button component, which comes with a disabled prop? Mar 16, 2018 at 10:06
  • Because it doesn't take the styles as a prop, and the color prop renders different views for both android and ios.Kindly check the docs here Mar 16, 2018 at 10:17

2 Answers 2

4

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.
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.