I'm looking to implement a loader that appears when a button is clicked (for a signup process) without redirecting to another page. How can I achieve this?
Here is my code and what I have attempted so far (but the loader does not appear)
class Signup extends Component {
constructor(props) {
super(props);
this.state = {
//code related to signup
isLoading: false
};
}
showLoader = () =>{
this.setState({ isLoading: true})
this.signUp()
}
signUp() {
//code related to signup
}
render() {
return (
<View style={style.container}>
//code related to signup
<View style={style.footer}>
<TouchableOpacity
style={[style.button, style.buttonOK]}
onPress={() => this.showLoader()}
>
<Text style={[style.buttonText]}>Signup</Text>
</TouchableOpacity>
<ActivityIndicator animating={this.state.isLoading} size="large" color="#56cbbe" />
</View>
</KeyboardAwareScrollView>
</View>
</View>
);
}
}