react-native-theme-transition

Smooth, animated theme transitions for React Native. Captures a screenshot, overlays it, switches colors underneath, and fades out — all in JS via Reanimated. Expo Go compatible. No native code required.

Installation

Expo (SDK 54+): npx expo install react-native-theme-transition react-native-worklets

Add react-native-worklets/plugin as the last plugin in babel.config.js. On SDK 55+, do NOT add react-native-reanimated/plugin — babel-preset-expo already includes it.

Key rules

1. All themes must share identical token keys — use Record<keyof typeof light, string>.
2. 'system' is reserved — cannot be a theme key.
3. Provider wraps everything — content outside won't be in the screenshot.
4. initialTheme is read once — use a bridge component for external stores.
5. setTheme during a transition returns false — use isTransitioning to disable buttons.
6. onThemeChange is the only guaranteed callback — onTransitionEnd skips on capture failure.
7. Don't change styles based on isTransitioning — the screenshot captures current visuals.
8. No native <Switch> — use a custom toggle with useTheme({}) and plain React styles.
9. No style={({ pressed }) => (...)} — use static style={{...}}.
10. Selection tracking: any component whose visual state changes on theme switch must use useTheme({}) or useTheme({ initialSelection }).

Reference guides