Persisted Preference

import { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { ThemeTransitionProvider } from '@/lib/theme';

export default function RootLayout() {
  const [initial, setInitial] = useState<'light' | 'dark' | 'system' | null>(null);

  useEffect(() => {
    AsyncStorage.getItem('theme-preference').then((v) => {
      setInitial((v as 'light' | 'dark' | 'system') ?? 'system');
    });
  }, []);

  if (!initial) return null; // or splash screen

  return (
    <ThemeTransitionProvider initialTheme={initial}>
      <App />
    </ThemeTransitionProvider>
  );
}

import { Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useTheme } from '@/lib/theme';

function ThemeSettings() {
  const { setTheme } = useTheme();

  const handleSelect = async (pref: 'light' | 'dark' | 'system') => {
    setTheme(pref);
    await AsyncStorage.setItem('theme-preference', pref);
  };

  return (
    <>
      <Button title="Light"  onPress={() => handleSelect('light')} />
      <Button title="Dark"   onPress={() => handleSelect('dark')} />
      <Button title="System" onPress={() => handleSelect('system')} />
    </>
  );
}

<ThemeTransitionProvider initialTheme={storedPreference}>

import { useEffect, useRef } from 'react';
import { useTheme } from '@/lib/theme';

function ThemeBridge() {
  const stored = useStoredPreference();
  const { setTheme } = useTheme();
  const isFirst = useRef(true);

  useEffect(() => {
    setTheme(stored, { animated: !isFirst.current });
    isFirst.current = false;
  }, [stored, setTheme]);

  return null;
}