How to save/store data in react native application

Introduction

So you are also a React Native dweller like me. All React-Native dwellers like JavaScript as I liked it lot. As a JavaScriptian I know how to persist data in Web apps, I can use localStorage. But in case of React-Native we have something called AsyncStorage

AsyncStorage

From official documentation: AsyncStorage is a simple, un-encrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

AsyncStorage have same methods as we have in localStorage for save/retrieve/remove data operations.

Saving/Retrieving Data

As AsyncStorage name suggests its an asynchronous storage which returns Promise object.

Persisting data

For persisting data in react app there is AsyncStorage.setItem method as we have localStorage.setItem in localStorage. setItem takes two parameters as key-value pair. e.g. -

try {
  await AsyncStorage.setItem('@MySuperStore:key', 'hi there');
} catch (error) {
  // Error saving data
  console.log(error);
}

Retrieving data

For getting saved data back there is AsyncStorage.getItem method which takes one parameter(key-name). e.g. -

try {
  const value = await AsyncStorage.getItem('@MySuperStore:key');
  console.log(value); // hi there
} catch (error) {
  console.log(error);
}

Remove saved key

For removing Item for a key there is AsyncStorage.removeItem method which takes one parameter(key-name). e.g. -

try {
  await AsyncStorage.removeItem('@MySuperStore:key');
} catch (error) {
  console.log(error);
}

Working Demo

Lets setup a working app demo which will feature different operations of AsyncStorage.

Create new react-native app

# install react-native
$ npm install -g react-native-cli

# create new react-native app
$ react-native init AsyncStorageExample

Create a form for performing different AsyncStorage operations.
Open AsyncStorageExample project into some code editor or IDE
Open index.android.js in editor and add TextInput and Button in return section of render method.

<TextInput
  placeholder="Enter key you want to save!"
  value={this.state.myKey}
  onChangeText={(value) => this.saveKey(value)}
  />

As you can see we have saveKey method on text change, we will going to call AsyncStorage.setItem to save entered text to AsyncStorage.
Get and reset key

  <Button
    onPress={this.getKey.bind(this)}
    title="Get Key"
    color="#2196f3"
    accessibilityLabel="Get Key"
  />

  <Button
    onPress={this.resetKey.bind(this)}
    title="Reset"
    color="#f44336"
    accessibilityLabel="Reset"
  />

getKey and resetKey method will going to call AsyncStorage.getItem and AsyncStorage.removeItem respectively.
Now your render() will look something like below:

render() {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Welcome to Demo AsyncStorage!
      </Text>

      <TextInput
        style={styles.formInput}
        placeholder="Enter key you want to save!"
        value={this.state.myKey}
        onChangeText={(value) => this.saveKey(value)}
        />

      <Button
        style={styles.formButton}
        onPress={this.getKey.bind(this)}
        title="Get Key"
        color="#2196f3"
        accessibilityLabel="Get Key"
      />

      <Button
        style={styles.formButton}
        onPress={this.resetKey.bind(this)}
        title="Reset"
        color="#f44336"
        accessibilityLabel="Reset"
      />

      <Text style={styles.instructions}>
        Stored key is = {this.state.myKey}
      </Text>


    </View>
  );
}

Lets combine all section together and your index.android.js file will look something like

Run application

run ios app

$ react-native run-ios

run android app

$ react-native run-android

Output

react-native-asyncstorage

Source Code

React Native AsyncStorage Example