Add a Loading Indicator While Loading Items with React Native ActivityIndicator
We'll use the cross platform ActivityIndicator to add a loading spinner while the items load from AsyncStorage. We'll show off the importance of rendering order, absolute positioning, and how to center items with alignItems and justifyContent set to center.
[00:02] We'll starting by importing ActvityIndicator from React native. We'll then add a loading flag to our state, and set it to true.
[00:09] Then, go down to the bottom of our application, and we'll render a view style={styles.loading}, and inside of there, we'll render our activity indicator. We'll give it the property of animating, and the size of large. Now, we'll go add our loading style, we'll create a loading style in our style sheet.
[00:34] We'll then say position: "absolute" and we'll say left: 0top: 0right:0and bottom: 0which will tell our view to cover everything. We'll then say alignItems: "center," as well as justifyContent: "center" to center everything in the middle of the screen.
[01:01] We'll then say backgroundColor: "rgba(0002)" with an opacity of .2. If we refresh our emulator, you can see that we have a background with an activity indicator.
[01:15] Now, we'll go up to our componentWillMount function, and once we have everything loaded, we'll say loading of false, or if there is an error, we'll say this.setState loading: false.
[01:31] Now, we'll scroll down to where our loading indicator is rendered, and say this.state.loading and wrap that in another curly brace. This will allow us to conditionally render our loading indicator, now when we refresh, the loading indicator will disappear once all of our items are loaded.