react-native-mmkv

npx expo install react-native-mmkv

// src/storage/mmkv.ts
import { MMKV } from "react-native-mmkv";
 
export const storage = new MMKV({ id: "app-storage" });
export const cacheStorage = new MMKV({ id: "hot-cache" });
 
export function getJson<T>(key: string, fallback: T, instance = storage): T {
  const raw = instance.getString(key);
  if (!raw) return fallback;
  try {
    return JSON.parse(raw) as T;
  } catch {
    return fallback;
  }
}
 
export function setJson(key: string, value: unknown, instance = storage) {
  instance.set(key, JSON.stringify(value));
}

// src/stores/draftStore.ts - Zustand persist adapter
import { create } from "zustand";
import { createJSONStorage, persist, type StateStorage } from "zustand/middleware";
import { storage } from "@/storage/mmkv";
 
const mmkvStorage: StateStorage = {
  getItem: (name) => storage.getString(name) ?? null,
  setItem: (name, value) => { storage.set(name, value); },
  removeItem: (name) => { storage.delete(name); },
};
 
type DraftStore = { text: string; setText: (text: string) => void };
 
export const useDraftStore = create<DraftStore>()(
  persist(
    (set) => ({
      text: "",
      setText: (text) => set({ text }),
    }),
    { name: "composer-draft", storage: createJSONStorage(() => mmkvStorage) }
  )
);

npx expo install react-native-mmkv expo-secure-store

// src/storage/flags.ts
import { getJson, setJson, storage } from "./mmkv";
 
export type FeatureFlags = {
  offlineChecklist: boolean;
  newComposer: boolean;
};
 
const FLAGS_KEY = "flags:v1";
const DEFAULTS: FeatureFlags = { offlineChecklist: true, newComposer: false };
 
export function readFlags(): FeatureFlags {
  return getJson(FLAGS_KEY, DEFAULTS);
}
 
export function writeFlags(flags: FeatureFlags) {
  setJson(FLAGS_KEY, flags);
}
 
// Synchronous read in render - no await, no flash
export function isNewComposerEnabled(): boolean {
  return readFlags().newComposer;
}

// src/components/Composer.tsx
import { TextInput } from "react-native";
import { useDraftStore } from "@/stores/draftStore";
 
export function Composer() {
  const text = useDraftStore((s) => s.text);
  const setText = useDraftStore((s) => s.setText);
 
  return (
    <TextInput
      value={text}
      onChangeText={setText}
      placeholder="Draft saves instantly"
      multiline
    />
  );
}

// src/storage/migrations.ts - MMKV has no PRAGMA; use explicit version keys
import { storage } from "./mmkv";
 
const VERSION_KEY = "meta:schemaVersion";
const CURRENT_VERSION = 2;
 
export function runMmkvMigrations() {
  const version = storage.getNumber(VERSION_KEY) ?? 0;
 
  if (version < 1) {
    const legacy = storage.getString("flags");
    if (legacy) {
      storage.set("flags:v1", legacy);
      storage.delete("flags");
    }
    storage.set(VERSION_KEY, 1);
  }
 
  if (version < 2) {
    const raw = storage.getString("flags:v1");
    if (raw) {
      const parsed = JSON.parse(raw);
      storage.set("flags:v1", JSON.stringify({ ...parsed, newComposer: false }));
    }
    storage.set(VERSION_KEY, 2);
  }
}

// app/_layout.tsx (excerpt) - run migrations before UI reads flags
import { useEffect } from "react";
import { runMmkvMigrations } from "@/storage/migrations";
 
export default function RootLayout() {
  useEffect(() => {
    runMmkvMigrations();
  }, []);
 
  return /* routes */;
}

import * as SecureStore from "expo-secure-store";
import { MMKV } from "react-native-mmkv";
 
const KEY_ID = "mmkv-encryption-key";
 
export async function createSecureStorage(): Promise<MMKV> {
  let key = await SecureStore.getItemAsync(KEY_ID);
  if (!key) {
    key = crypto.randomUUID();
    await SecureStore.setItemAsync(KEY_ID, key);
  }
  return new MMKV({ id: "user-secure", encryptionKey: key });
}

import { storage, cacheStorage } from "@/storage/mmkv";
 
export function clearUserMmkv() {
  storage.clearAll();
  cacheStorage.clearAll();
  // Also: queryClient.clear(), SecureStore.deleteItemAsync for tokens
}