How to persist on Expo with AsyncStorage?

[adrianofoschi]

How to use this plugin with AsyncStorage in expo/react-native?

Because it is asynchronous it needs hydration also.

Thanks

[ai]

Sorry, I have not idea (I am not Expo user)

[timefordroids]

I had the same issue. Here's a not ideal but working solution I found.

Create an adapter that provides a synchronous interface for nanostores while handling async operations in the background:

import { PersistentListener, setPersistentEngine } from '@nanostores/persistent';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { atom, onMount } from 'nanostores';

// Create a synchronous in-memory storage
const memoryStorage: Record<string, string> = {};

// Create a storage proxy
const storage = new Proxy(memoryStorage, {
  get(target, key: string) {
    return target[key];
  },

  set(target, key: string, value: string) {
    target[key] = value;
    AsyncStorage.setItem(key, value).catch(error => {
      console.error('Error writing to AsyncStorage:', error);
    });
    return true;
  },

  deleteProperty(target, key: string) {
    delete target[key];
    AsyncStorage.removeItem(key).catch(error => {
      console.error('Error removing from AsyncStorage:', error);
    });
    return true;
  }
});

const events = {
  addEventListener(key: string, callback: PersistentListener, restore: () => void) {
    AsyncStorage.getItem(key).then(value => {
      if (value !== null) {
        memoryStorage[key] = value;
        restore();
      }
    }).catch(error => {
      console.error('Error reading from AsyncStorage:', error);
    });
  },

  removeEventListener() { },

  // Since we don't have cross-tab sync in React Native, this is always false
  perKey: false
};

const $init = atom(false);

onMount($init, () => {
  console.log('[AsyncStorage] Initializing storage...');

  AsyncStorage.getAllKeys()
    .then(keys => AsyncStorage.multiGet(keys))
    .then(values => {
      values.forEach(([key, value]) => {
        if (value !== null) {
          memoryStorage[key] = value;
        }
      });
      console.log('[AsyncStorage] Storage initialized with keys:', Object.keys(memoryStorage));
      $init.set(true);
    })
    .catch(error => {
      console.error('[AsyncStorage] Error initializing storage:', error);
    });

  return () => { };
});

setPersistentEngine(storage, events);

export { $init };

Use it in your store:

import { GoogleLocationDetailResult } from '@appandflow/react-native-google-autocomplete';
import { persistentMap } from '@nanostores/persistent';
import { $init } from './async-storage-adapter';

export type UserSettings = {
  searchArea?: GoogleLocationDetailResult | null
}

const initialState: UserSettings = {
  searchArea: null,
}

export const $userSettings = persistentMap<UserSettings>('userSettings:', initialState, {
  encode: JSON.stringify,
  decode: JSON.parse,
})

// Optional: Listen to initialization
$init.listen(() => { });

export const setSearchArea = (searchArea: GoogleLocationDetailResult) => {
  $userSettings.setKey('searchArea', searchArea)
}