💾 react-native-recoil-persist

Module inspired by recoil-persist used to persist asynchronous Recoil state in react-native. The main difference from recoil-persist is that this package includes a ReactNativeRecoilPersistGate blocking the rest of the App from rendering until the store has been loaded from AsyncStorage and parsed.

Depends on @react-native-async-storage/async-storage

Install

npm install react-native-recoil-persist

or

yarn add react-native-recoil-persist

Usage

Usage in app root

Add the ReactNativeRecoilPersistGate as the first component inside of the RecoilRoot, wrapping the rest of your app.

1import React from "react";
2import ReactNativeRecoilPersist, {
3  ReactNativeRecoilPersistGate,
4} from "react-native-recoil-persist";
5import { RecoilRoot } from "recoil";
6
7export const AppRoot = () => {
8  return (
9    <RecoilRoot>
10      <ReactNativeRecoilPersistGate store={ReactNativeRecoilPersist}>
11        <RestOfYourApp />
12      </ReactNativeRecoilPersistGate>
13    </RecoilRoot>
14  );
15};

Usage in Atoms

1import ReactNativeRecoilPersist from "react-native-recoil-persist";
2import { atom } from "recoil";
3
4const testAtom = atom({
5  default: "I am a test",
6  key: "test",
7  // Add this effect to the atom to persist it
8  effects_UNSTABLE: [ReactNativeRecoilPersist.persistAtom],
9});

Functionality

import ReactNativeRecoilPersist from 'react-native-recoil-persist' A singleton of ReactNativeRecoilPersist that you can start using with the default configuration.

import { ReactNativeRecoilPersist } from 'react-native-recoil-persist' Exports the raw ReactNativeRecoilPersist class, which you can configure as a singleton yourself.

import { ReactNativeRecoilPersistGate } from 'react-native-recoil-persist' The Persist Gate component that you need to render after the RecoilRoot in the tree.

import { defaultLocalStorageKey } from 'react-native-recoil-persist' An export of the default local storage key used.

import { defaultStorageInterface } from 'react-native-recoil-persist' An export of the default storage functions used. Look at this if you want to configure your own singleton and use something other than AsyncStorage.

Run example app

1git clone git@github.com:ghostops/react-native-recoil-persist.git
2
3cd react-native-recoil-persist
4yarn install
5
6cd example
7yarn install
8
9yarn ios
10# or
11yarn android