922d5dc876
Hermes wirft "property is not writable" + "Cannot read 'default' of undefined"
wenn beim Module-Load eines Stores native APIs aufgerufen werden bevor
die Bridge bereit ist. Die initialen Werte:
- theme: colorScheme war resolveColorScheme('system') → ruft Appearance.getColorScheme()
zur Module-Load-Zeit. Jetzt: 'light' als default; korrekter Wert kommt
asynchron via init().
- language: language war (i18n.language === 'de' ? 'de' : 'en') → liest
i18n.language zur Module-Load-Zeit (Risiko falls i18n noch nicht init).
Jetzt: 'en' default; korrekter Wert kommt via init() das i18n.changeLanguage
callt.
Init-Calls passieren in _layout.tsx useEffect — nach Bridge-bereit, nach
Hermes-Eval-Phase. Sicher.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { create } from 'zustand';
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import { Appearance } from 'react-native';
|
|
|
|
export type ThemeMode = 'system' | 'light' | 'dark';
|
|
|
|
const STORAGE_KEY = '@rebreak/theme';
|
|
|
|
function resolveColorScheme(mode: ThemeMode): 'light' | 'dark' {
|
|
if (mode === 'system') {
|
|
return Appearance.getColorScheme() === 'dark' ? 'dark' : 'light';
|
|
}
|
|
return mode;
|
|
}
|
|
|
|
type ThemeState = {
|
|
mode: ThemeMode;
|
|
colorScheme: 'light' | 'dark';
|
|
setMode: (mode: ThemeMode) => Promise<void>;
|
|
init: () => Promise<void>;
|
|
};
|
|
|
|
export const useThemeStore = create<ThemeState>((set) => ({
|
|
mode: 'system',
|
|
colorScheme: 'light',
|
|
|
|
init: async () => {
|
|
const stored = await AsyncStorage.getItem(STORAGE_KEY);
|
|
const mode: ThemeMode =
|
|
stored === 'light' || stored === 'dark' || stored === 'system' ? stored : 'system';
|
|
set({ mode, colorScheme: resolveColorScheme(mode) });
|
|
},
|
|
|
|
setMode: async (mode) => {
|
|
await AsyncStorage.setItem(STORAGE_KEY, mode);
|
|
set({ mode, colorScheme: resolveColorScheme(mode) });
|
|
},
|
|
}));
|