Easy-peasy: Using custom storage engine on React Native

Created on 10 Nov 2020 · 3Comments · Source: ctrlplusb/easy-peasy

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?

Source