CODEWITHSUNDEEP
javascriptreact-native
Jack23
Jack23

Reputation: 1396

Show Loader when a button is clicked

I'm trying to obtain a loader when a button is clicked (for a signup) without create another page (only to show the loader). How can I do??

This is my code and what I tried (but it doesn't appears)

class Signup extends Component {
  constructor(props) {
    super(props);
    this.state = {
     //code about signup
      isLoading: false
    };
  }

  showLoader = () =>{
    this.setState({ isLoading: true})
    this.registrazione()
  }
  registrazione() {
    //code about signup

  }

  render() {
    return (
      <View style={style.container}>
        //code about signup
          <View style={style.footer}>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.showLoader()}
            >
              <Text style={[style.buttonTesto]}>Signup</Text>
            </TouchableOpacity>
            <ActivityIndicator animating={this.state.isLoading} size="large" color="#56cbbe" />
          </View>
        </KeyboardAwareScrollView>
      </View>
      </View>
    );
  }
}

Upvotes: 1

Views: 92

Answers (1)

crodev
crodev

Reputation: 1491

First of all you have one closing View tag that is not needed. Assuming that's just mistake in question, you could do it with JS ternary operator. Like this:

<View style={style.container}>
        //code about signup
          <View style={style.footer}>
            {(!this.state.isLoading) ? <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.showLoader()}
            >
              <Text style={[style.buttonTesto]}>Signup</Text>
            </TouchableOpacity> : <ActivityIndicator animating={this.state.isLoading} size="large" color="#56cbbe" />}
          </View>
        </KeyboardAwareScrollView>
</View>

You can learn more about ternary operators here

This should replace your button with loading animation.

Don't hesitate to ask any more questions if you have any! I'm glad to help!

Upvotes: 1

Related Questions