https://github.com/marioprieta/react-native-theme-transition
Smooth, animated theme transitions for React Native. Expo Go compatible, powered by Reanimated.
https://github.com/marioprieta/react-native-theme-transition
animation dark-mode expo expo-go react react-native reanimated theme-manager theming typescript
Last synced: about 2 months ago
JSON representation
Smooth, animated theme transitions for React Native. Expo Go compatible, powered by Reanimated.
- Host: GitHub
- URL: https://github.com/marioprieta/react-native-theme-transition
- Owner: marioprieta
- License: mit
- Created: 2026-03-05T22:43:34.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-03-10T22:50:11.000Z (3 months ago)
- Last Synced: 2026-03-11T03:52:02.297Z (3 months ago)
- Topics: animation, dark-mode, expo, expo-go, react, react-native, reanimated, theme-manager, theming, typescript
- Language: TypeScript
- Homepage: https://react-native-theme-transition.vercel.app
- Size: 61.6 MB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
React Native Theme Transition
Smooth, animated theme transitions for React Native. Expo Go compatible, powered by Reanimated.
iOS
Android
## Features
- **Smooth cross-fade transitions** — powered by Reanimated on the native UI thread (60-120 FPS)
- **Expo Go compatible** — no native code, no prebuilds required
- **Multi-theme support** — define as many themes as you need with full TypeScript inference
- **System theme sync** — follows OS appearance automatically with zero-flash startup
- **Native UI sync** — alerts, keyboards, and date pickers automatically match your active theme
- **Transition safe** — blocks concurrent transitions and exposes `isTransitioning`
- **React Compiler ready** — all hooks follow the [Rules of React](https://react.dev/reference/rules)
- **Lightweight** — ~2.7 kB gzipped, zero runtime dependencies
## Documentation
For full docs, API reference, examples, and recipes, visit **[react-native-theme-transition.vercel.app](https://react-native-theme-transition.vercel.app)**.
## Installation
```bash
# Expo (SDK 54+ already has reanimated and view-shot)
npx expo install react-native-theme-transition react-native-worklets
# React Native CLI
npm install react-native-theme-transition react-native-reanimated react-native-view-shot react-native-worklets
```
Add `react-native-worklets/plugin` as the **last plugin** in your `babel.config.js`.
## Quick start
```ts
// theme.ts
import { createThemeTransition } from 'react-native-theme-transition';
export const { ThemeTransitionProvider, useTheme } = createThemeTransition({
themes: {
light: { background: '#ffffff', text: '#000000', primary: '#007AFF' },
dark: { background: '#000000', text: '#ffffff', primary: '#0A84FF' },
},
});
```
```tsx
// App.tsx
import { ThemeTransitionProvider } from './theme';
export default function App() {
return (
);
}
```
```tsx
// MyScreen.tsx
import { useTheme } from './theme';
function MyScreen() {
const { colors, name, setTheme, isTransitioning } = useTheme();
return (
Current: {name}
setTheme(name === 'light' ? 'dark' : 'light')}
disabled={isTransitioning}
>
Toggle theme
);
}
```
## Contributing
Contributions are welcome! Please read the [contributing guide](./CONTRIBUTING.md) and open an issue first to discuss what you'd like to change.
## License
MIT