Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Saving Data In Your React Native Mobile Application

DZone's Guide to

Saving Data In Your React Native Mobile Application

Bring your apps to the critical point where you can save and load information

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

So you’ve been fiddling with React Native for a bit now like I have.  If you’re like me then you’re at a point where you’re ready to look at saving and loading data in your mobile application.

Now I’ve previously demonstrated saving data with Ionic Framework, so the goals I’m about to share are going to be very similar.  We’re going to focus on React Native’s AsyncStorage class to accomplish what we need.


A little disclaimer here.  At the time of writing, React Native works pretty much only for iOS, so you’re going to need a Mac in order to proceed with what is in this article.

With that out of the way, go ahead and open your Terminal and execute the following command to start a new React Native project:

react-native init ReactProject


We won’t be using any external components in this tutorial, so as of now we’re ready to start coding.

Per the React Native documentation, the recommended way to persist data is through the AsyncStorage class.  If you’re familiar with HTML5 local storage, then you’ll recognize that the two are very similar in how they function.

AsyncStorage uses key-value pairs so to save data you might do something like this:

AsyncStorage.setItem("myKey", "My value here");


If you want to obtain the data that you’ve saved, you can do a lookup based on the key value.  It is an asynchronous operation that looks like the following:

AsyncStorage.getItem("myKey").then((value) => {
    this.setState({"myKey": value});
}).done();


The getItem method returns a promise because it is of course asynchronous.

With all this in mind, open your project’s index.ios.js file and include the following code:

"use strict";
 
var React = require("react-native");
 
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    AsyncStorage,
} = React;
 
var ReactProject = React.createClass({
 
    componentDidMount: function() {
        AsyncStorage.getItem("myKey").then((value) => {
            this.setState({"myKey": value});
        }).done();
    },
 
    getInitialState: function() {
        return { };
    },
 
    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.saved}>
                    {this.state.myKey}
                </Text>
                <View>
                    <TextInput
                        style={styles.formInput}
                        onChangeText={(text) => this.saveData(text)}
                        value="" />
                </View>
                <Text style={styles.instructions}>
                    Type something into the text box.  It will be saved to
                    device storage.  Next time you open the application, the saved data
                    will still exist.
                </Text>
            </View>
        );
    },
 
    saveData: function(value) {
        AsyncStorage.setItem("myKey", value);
        this.setState({"myKey": value});
    }
 
});
 
var styles = StyleSheet.create({
    container: {
        padding: 30,
        flex: 1,
        justifyContent: "center",
        alignItems: "stretch",
        backgroundColor: "#F5FCFF",
    },
    formInput: {
        flex: 1,
        height: 26,
        fontSize: 13,
        borderWidth: 1,
        borderColor: "#555555",
    },
    saved: {
        fontSize: 20,
        textAlign: "center",
        margin: 10,
    },
    instructions: {
        textAlign: "center",
        color: "#333333",
        marginBottom: 5,
        marginTop: 5,
    },
});
 
AppRegistry.registerComponent('ReactProject', () => ReactProject);


Let’s break down what the above code is doing.

componentDidMount: function() {
    AsyncStorage.getItem("myKey").then((value) => {
        this.setState({"myKey": value});
    }).done();
}


When the application loads, the componentDidMount function will be called.  We are going to load whatever data was saved and set the state when it is complete.

<Text style={styles.saved}>
    {this.state.myKey}
</Text>
<View>
    <TextInput
        style={styles.formInput}
        onChangeText={(text) => this.saveData(text)}
        value="" />
</View>


The above rendered items are for displaying what was saved and for saving new user inputted data.  When the user enters text, the saveData function is called saving everything the user gives us.

Finally we have the saveData function:

saveData: function(value) {
    AsyncStorage.setItem("myKey", value);
    this.setState({"myKey": value});
}


The above function will save the input to storage and then immediately set the state so it can be displayed on the screen.  I won’t go over the styling code that was included because it doesn’t advance the purpose of this article.

Go ahead and try it out.  Save some data, quit the application, then re-open it.  Is your data still there?

Conclusion

Although you could use HTML5 local storage, Facebook has created a more optimized method of storing data in React Native through the AsyncStorage class.

A video version of this article can be seen below.



Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:
react

Published at DZone with permission of Nic Raboy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}