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

Level Up!

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

Autoplay

    Save and Retrieve Data on the Device in a React Native App with AsyncStorage

    Chris AchardChris Achard
    react-nativeReact Native
    javascriptJavaScript
    androidAndroid
    iosiOS

    We’ll use AsyncStorage to save and load simple text data on the device. AsyncStorage is built into React Native (so it’s easy to get working), but it’s text only, it’s global to your app, and it isn’t built to handle large or complex data. However - it’s perfect for saving and loading small bits of data like settings and configuration values.

    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
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: On the add review form, we can import AsyncStorage from React Native. Then, when a reviewer submits a form, we can save their name so that we can auto-fill the name in for the next time.

    We'll start with AsyncStorage.setItem, which takes a key and a value. We can name the key whatever we'd like. Just know that it's global for the entire application. We'll set reviewer name to this.state.name.

    One important point here, the values must be strings. They cannot be objects or even numbers. The value you set cannot be null or undefined, or you'll get an error. We're OK here because the name and state defaults to an empty string, but you'll want protect against null being set in AsyncStorage.

    Then, once we've set a value, we can retrieve it with AsyncStorage.getItem. If we add a componentDidMount lifecycle method, we could get the reviewer name from AsyncStorage and set it to our local state.

    Although you can't set null values to AsyncStorage, if the reviewer name isn't set here, then the name variable will come back as null. Since we don't want null values on our form, we just won't set the state at all, although you may want to handle that differently in your application.

    If we run the app now, we can submit the form with our name. The next time the app runs, when we go to submit a review, our name is being pulled from AsyncStorage and populates the text input.

    We can't set null values to AsyncStorage. If we did decide at some point that we wanted to blank out the storage for a reviewer name, instead of setting the value, we could call removeItem, which would remove that key value pair from storage.

    Once that happens, the next time we try to load it, it would come back with a null value for reviewer name since the key doesn't exist in the store anymore. Because AsyncStorage is global to your app and because the values must be strings, it's only recommended for light use, like setting and getting simple user preferences.