Show loader when button is clicked in react native

Question

I'm trying to implement the loader animation in my react native app but it does't trigger the loader when the button is clicked, although the animating already change to true.

Check out my code below.

componentWillMount(){
    this.hideLoader();
}

showLoader = () => { this.setState({ showLoader:true }); };
hideLoader = () => { this.setState({ showLoader:false }); };

doSignup = () => {
    this.showLoader();
}

render() {
    console.log(this.state.showLoader);
    return (
        <View>
            <TouchableOpacity style={{ marginTop: 25 }} onPress={this.doSignup}>
              <View style={[ styles.button, { backgroundColor: '#5a0060' } ]}>
                <Text style={{ fontSize: 20, color: Colors.white }}>Sign Up Now</Text>
              </View>
            </TouchableOpacity>

            <View style={{ position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 }}>
              <ActivityIndicator animating={this.state.showLoader} size="small" color="#00ff00" />
            </View>
        </View>
    );
}

When the screen is loaded, I set the loader animation as false. When the button is clicked only set to true which should be able to animate the loader but it doesn't appear.

Answer 1

I've tried to simplify your code to its logical skeleton. I hope this will work and you can start adding styling and etc.

export default class LoginButton extends Component {
  state = {
    isLoading: false
  };

  doSignup = async () => {
    this.setState({ isLoading: true });
    await asyncSignupFunction();
    this.setState({ isLoading: false })
  };

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.doSignup}>
          <Text>Sign Up Now</Text>
        </TouchableOpacity>
        <ActivityIndicator animating={this.state.isLoading} />
      </View>
    );
  }
}