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.
