Using custom storage engine on React Native

For some reason I cannot seem to be able to make my custom storage engine working on RN. What works in a clean CRA web project doesn’t in a clean CRNA project.

I have created a new project by running expo init and choosing the Bare workflow with minimal settings. I’ve installed the easy-peasy package (4.0.1) and modified the App.js as such:

import React from "react";
import { Button, StyleSheet, View } from "react-native";
import {
  action,
  createStore,
  persist,
  StoreProvider,
  useStoreActions
} from "easy-peasy";

const store = createStore(
  persist(
    {
      count: 1,
      add: action(state => {
        state.count += 1;
        console.log("STATE CHANGE", state.count);
      })
    },
    {
      storage: {
        getItem: key => {
          console.log("GET_ITEM", key);
        },
        setItem: (key, value) => {
          console.log("SET_ITEM", key, value);
        },
        removeItem: key => {
          console.log("REMOVE_ITEM", key);
        }
      },
      allow: ["count"]
    }
  )
);

const MyButton = () => {
  const add = useStoreActions(actions => actions.add);
  return <Button title="Press" onPress={() => add()} />;
};

export default function App() {
  return (
    <StoreProvider store={store}>
      <View style={styles.container}>
        <MyButton title="Press" />
      </View>
    </StoreProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});

As I launch the project in my iOS simulator, GET_ITEM [EasyPeasyStore][0] is logged. As I press the button, STATE CHANGE 2 is logged. However, SET_ITEM never gets logged.

As mentioned, the same code on a web project works fine and SET_ITEM... is logged.

Any ideas?

[duygiangdg]

This is caused by an issue of RN 0.62.2, so requestIdleCallback is never called on iOS.

Before it is fixed, you can add this line before your createStore(), so easy-peasy will use requestAnimationFrame instead of requestIdleCallback

window.requestIdleCallback = null;

[yixuan98]

Same issue after upgrading to v4.0.1, setItem() of custom storage isn’t called when changing persisted state on RN 0.63.3.