Copyimport { useModeToggle } from '@/hooks/useModeToggle';

Copyexport function ThemeToggle() {
  const { isDark, mode, setMode, toggleMode } = useModeToggle();
 
  return (
    <View>
      <Text>Current mode: {mode}</Text>
      <Text>Is dark: {isDark ? 'Yes' : 'No'}</Text>
      <TouchableOpacity onPress={toggleMode}>
        <Text>Toggle Theme</Text>
      </TouchableOpacity>
    </View>
  );
}

Copytype Mode = 'light' | 'dark' | 'system';
 
interface UseModeToggleReturn {
  isDark: boolean;
  mode: Mode;
  setMode: (mode: Mode) => void;
  currentMode: ColorSchemeName;
  toggleMode: () => void;
}

Copyexport function ThemeSettings() {
  const { mode, setMode, isDark, currentMode } = useModeToggle();
 
  const options = [
    { key: 'light', label: 'Light', icon: '☀️' },
    { key: 'dark', label: 'Dark', icon: '🌙' },
    { key: 'system', label: 'System', icon: '⚙️' },
  ];
 
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 18, marginBottom: 16 }}>Theme</Text>
      {options.map((option) => (
        <TouchableOpacity
          key={option.key}
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            paddingVertical: 12,
            backgroundColor: mode === option.key ? '#007AFF20' : 'transparent',
            borderRadius: 8,
            paddingHorizontal: 12,
          }}
          onPress={() => setMode(option.key as Mode)}
        >
          <Text style={{ marginRight: 12 }}>{option.icon}</Text>
          <Text style={{ flex: 1 }}>{option.label}</Text>
          {mode === option.key && <Text>✓</Text>}
        </TouchableOpacity>
      ))}
      <Text style={{ marginTop: 16, opacity: 0.6 }}>
        Current: {currentMode} (Effective: {isDark ? 'dark' : 'light'})
      </Text>
    </View>
  );
}

Copyimport AsyncStorage from '@react-native-async-storage/async-storage';
import { useEffect } from 'react';
 
export function usePersistentModeToggle() {
  const { mode, setMode, ...rest } = useModeToggle();
 
  // Load saved preference on mount
  useEffect(() => {
    AsyncStorage.getItem('theme_mode').then((savedMode) => {
      if (savedMode && ['light', 'dark', 'system'].includes(savedMode)) {
        setMode(savedMode as Mode);
      }
    });
  }, []);
 
  // Save preference when mode changes
  useEffect(() => {
    AsyncStorage.setItem('theme_mode', mode);
  }, [mode]);
 
  return { mode, setMode, ...rest };
}

Copyimport { useEffect, useRef } from 'react';
import { Animated } from 'react-native';
 
export function AnimatedThemeToggle() {
  const { isDark, toggleMode } = useModeToggle();
  const animatedValue = useRef(new Animated.Value(isDark ? 1 : 0)).current;
 
  useEffect(() => {
    Animated.timing(animatedValue, {
      toValue: isDark ? 1 : 0,
      duration: 300,
      useNativeDriver: false,
    }).start();
  }, [isDark]);
 
  const backgroundColor = animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['#ffffff', '#000000'],
  });
 
  return (
    <Animated.View style={{ backgroundColor, flex: 1 }}>
      <TouchableOpacity onPress={toggleMode}>
        <Text>Toggle Theme</Text>
      </TouchableOpacity>
    </Animated.View>
  );
}

Copyexport function AppHeader() {
  const { mode, toggleMode } = useModeToggle();
 
  const getToggleIcon = () => {
    switch (mode) {
      case 'light':
        return '☀️';
      case 'dark':
        return '🌙';
      case 'system':
        return '⚙️';
    }
  };
 
  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 16,
      }}
    >
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>My App</Text>
      <TouchableOpacity onPress={toggleMode}>
        <Text style={{ fontSize: 20 }}>{getToggleIcon()}</Text>
      </TouchableOpacity>
    </View>
  );
}

Copyconst themeStyles = useMemo(
  () => ({
    container: {
      backgroundColor: isDark ? '#000' : '#fff',
      color: isDark ? '#fff' : '#000',
    },
  }),
  [isDark]
);

Copy// Good: Only get what you need
const { isDark, toggleMode } = useModeToggle();
 
// Less optimal: Getting all values when you only need some
const modeToggle = useModeToggle();

Copyexport function useValidatedModeToggle() {
  const modeToggle = useModeToggle();
 
  const setModeWithValidation = (mode: string) => {
    if (['light', 'dark', 'system'].includes(mode)) {
      modeToggle.setMode(mode as Mode);
    } else {
      console.warn(`Invalid mode: ${mode}`);
    }
  };
 
  return {
    ...modeToggle,
    setMode: setModeWithValidation,
  };
}

Copyimport { createContext, useContext, ReactNode } from 'react';
 
const ModeToggleContext = createContext<UseModeToggleReturn | null>(null);
 
export function ModeToggleProvider({ children }: { children: ReactNode }) {
  const modeToggle = useModeToggle();
 
  return (
    <ModeToggleContext.Provider value={modeToggle}>
      {children}
    </ModeToggleContext.Provider>
  );
}
 
export function useModeToggleContext() {
  const context = useContext(ModeToggleContext);
  if (!context) {
    throw new Error(
      'useModeToggleContext must be used within ModeToggleProvider'
    );
  }
  return context;
}