React-Native: save user preferences

Question

Native developers,

I really searched a lot but couldn't find anything that fits my needs.

I am new to react native and have a question. I wonder how I can save user preferences of my app.

For example, I am displaying a dismissible badge on my screen -> user dismisses it -> how do I save this decision so the badge won't appear on every start again?

I thought about writing a .json file where all preferences are defined and read it on every start.

Is this a common way to realize it or is there any other solution.

Thank you very much

Tayyebeb

You can use AsyncStorage – Lawannalawbreaker

facebook.github.io/react-native/docs/asyncstorage.html – Fagaceous

but be warned, AsyncStorage on recent version of React Native, when remote debugging turned on (android), it will make the app hang. Read this issue github.com/facebook/react-native/issues/15476 – Hemline

Answer 1

Updated Answer at February 2022

React native, officially deprecated the usage of its built-in AsyncStorage. The latest solution is to install the community package of it.

# Install via NPM
npm install --save @react-native-async-storage/async-storage

# ...or install via YARN
yarn add @react-native-async-storage/async-storage

# ...or install via EXPO
expo install @react-native-async-storage/async-storage

And the implementation is like this

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeKey = '@storage_Key'
const storeData = async (value) => {
  try {
    await AsyncStorage.setItem(storeKey, value)
  } catch (e) {
    // saving error
  }
}


const getData = async () => {
  try {
    const value = await AsyncStorage.getItem(storeKey)
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

• deprecated doc: https://reactnative.dev/docs/asyncstorage
• async storage doc: https://react-native-async-storage.github.io/async-storage/docs/install/
• Consider another options: https://reactnative.directory/?search=storage

Old Answer

There are so many options out there, but the most common you can use is the React Native built-in AsyncStorage.

Sample Code

import { AsyncStorage } from "react-native";
const storeKey = 'myPreference';
storeData = async () => {
  try {
    await AsyncStorage.setItem(storeKey, 'I like to save it.');
  } catch (error) {
    // Error saving data
  }
}

retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem(storeKey);
    if (value !== null) {
      // We have data!!
      console.log(value);
    }
   } catch (error) {
     // Error retrieving data
   }
}

read more at https://facebook.github.io/react-native/docs/asyncstorage.html

Or you could reconsider 3rd party library like:

https://github.com/kevinresol/react-native-default-preference

https://github.com/mCodex/react-native-sensitive-info

Hemline

Where does the key "TASKS" come from? It seems unrelated to '@MySuperStore:key'. Though I'm not familiar with the '@MySuperStore:key' syntax. – Purtenance

ah my bad, it should be same key. i updated the answer for better consistency. Thanks for point it out! – Hemline

React Native's built in AsyncStorage is now deprecated according to the official docs but the community fork of it @react-native-async-storage/async-storage is well supported – Tilly