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!
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.).
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.
Well, the simplest logic could be:
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.onPress
event, set the value loginInProcess = true
For example:
onPress = {() => {
if (!loginInProcess) {
loginInProcess = true;
this.login(this.state.email, this.state.password)
} else {
/*Login in process, do something else*/
}}}>
loginInProcess = false
to be able to try and "login" again.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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With