Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Add a Loading Indicator While Loading Items with React Native ActivityIndicator

    Jason BrownJason Brown

    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.

    react-nativeReact Native
    0.35 - 0.37
    reactReact
    ^15.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss