Join egghead, unlock knowledge.

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
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Add a Loading Indicator While Loading Items with React Native ActivityIndicator

    react-nativeReact Native
    0.35 - 0.37

    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    We'll starting by importing ActvityIndicator from React native. We'll then add a loading flag to our state, and set it to true.

    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.

    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.

    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.

    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.

    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.