Disable everything and place an ActivityIndicator in front of it in React Native

1.4k views Asked by At

I have a button which calls a fetch, but I can still press the button while the fetch is running. I want to disable this button (and all inputs if possible) and place an ActivityIndicator in front of it.

Is there an option for this in the ActivityIndicator?
My current ActivityIndicator looks like this. It is only displayed, when I set this.state.animating to true.

<ActivityIndicator
    animating={this.state.animating}
    style={{marginTop: 80}}
    size="large"
/>

I've found this answere, but it seems like the button won't get disabled as well.

1

There are 1 answers

0
Dhruv Parmar On BEST ANSWER

<Button> component supports disabled flag. https://facebook.github.io/react-native/docs/button.html#disabled. You can use it like this in your case.

<Button disabled={this.state.animating}>