A simple Jotai atom with storage using react-native-mmkv backend

atomWithMmkvStorage.ts

// `storage` is just a MMKV instance from `react-native-mmkv`
import { storage } from "@/app/storage";
import { atomWithStorage } from "jotai/utils";

const defaultOpts = { getOnInit: true };

export const atomWithMmkvBooleanStorage = (
  key: string,
  initialValue: boolean
) =>
  atomWithStorage(
    key,
    initialValue,
    {
      getItem(key, initialValue: boolean) {
        return storage.getBoolean(key) ?? initialValue;
      },
      setItem: (key, newValue) => {
        storage.set(key, newValue);
      },
      removeItem: (key) => {
        storage.delete(key);
      },
    },
    defaultOpts
  );

export const atomWithMmkvStringStorage = (key: string, initialValue: string) =>
  atomWithStorage(
    key,
    initialValue,
    {
      getItem(key, initialValue: string) {
        return storage.getString(key) ?? initialValue;
      },
      setItem: (key, newValue) => {
        storage.set(key, newValue);
      },
      removeItem: (key) => {
        storage.delete(key);
      },
    },
    defaultOpts
  );

atomWithToggleAndStorage.ts

import { atomWithMmkvBooleanStorage } from "./atomWithMmkStorage";
import { atom } from "jotai";

export function atomWithToggleAndStorage(key: string, initialValue: boolean) {
  const anAtom = atomWithMmkvBooleanStorage(key, initialValue);

  const derivedAtom = atom(
    (get) => get(anAtom),
    (get, set, nextValue?: boolean) => {
      const update = nextValue ?? !get(anAtom);
      set(anAtom, update);
    }
  );

  return derivedAtom;
}