Persist not working with AsyncStorage (React Native)

easy-peasy: v3.2.0 & v3.3.0 expo: v~36.0.0

When using AsyncStorage, the entire expo app crashes.

Only when passing AsyncStorage to the persist config, like so. Putting ‘localStorage’ does not error.

import { AsyncStorage } from 'react-native';
import { createStore, persist } from 'easy-peasy';

export default createStore(
  persist(store, {
    storage: AsyncStorage,
  }),
);

Maybe down to not stringifying the values: https://stackoverflow.com/questions/49491485/error-react-native-ios-exception-nsdictionarym-length-unrecognised-select

[macrozone]

solution is to slightly tweak the storage to serialize:

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

const storage = {
  async getItem(key) {
    return JSON.parse(await AsyncStorage.getItem(key))
  },
  setItem(key, data) {
    AsyncStorage.setItem(key, JSON.stringify(data))
  },
  removeItem(key) {
    AsyncStorage.removeItem(key)
  }
}

export default storage

[robertvorthman]

solution is to slightly tweak the storage to serialize:

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

const storage = {
  async getItem(key) {
    return JSON.parse(await AsyncStorage.getItem(key))
  },
  setItem(key, data) {
    AsyncStorage.setItem(key, JSON.stringify(data))
  },
  removeItem(key) {
    AsyncStorage.removeItem(key)
  }
}

export default storage

Thanks! I had to add async in front of setItem and removeItem or else I would get an error “Cannot read property ‘catch’ of undefined” from the writeStatedState function of createPersistoid.js in redux-persist.

This is what worked for me:

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

const storage = {
  async getItem(key) {
    return JSON.parse(await AsyncStorage.getItem(key))
  },
  async setItem(key, data) {
    AsyncStorage.setItem(key, JSON.stringify(data))
  },
  async removeItem(key) {
    AsyncStorage.removeItem(key)
  }
}

export default storage