Categories
React Native Answers

How to overlay ActivityIndicator in React Native?

Spread the love

Sometimes, we want to overlay ActivityIndicator in React Native.

In this article, we’ll look at how to overlay ActivityIndicator in React Native.

How to overlay ActivityIndicator in React Native?

To overlay ActivityIndicator in React Native, we can put it in a modal.

For instance, we write

<Modal
  transparent={true}
  animationType={"none"}
  visible={loading}
  onRequestClose={() => {
    console.log("close modal");
  }}
>
  <View style={styles.modalBackground}>
    <View style={styles.activityIndicatorWrapper}>
      <ActivityIndicator animating={loading} />
    </View>
  </View>
</Modal>

to put the ActivityIndicator in a Modal.

We have transparent set to true to make the modal transparent so we can see the contents underneath it.

And we set the animating to the loading state to make it animate only when loading is true.

Also, we set visible to loading to show the modal only when loading is true.

Conclusion

To overlay ActivityIndicator in React Native, we can put it in a modal.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.