A Plug & Play Animations for Switching (Dark/Light) themes. π
- β Supports multiple animation types.
- β Blazing fast - [60/120]fps
- β Plug and Play, doesn't matter what you use for switching themes
- β Can be used for different theme colors, not necessarily for dark/light
- β Supports turbo modules for new architecture
npm install react-native-theme-switch-animationOR
yarn add react-native-theme-switch-animation(if you are using expo managed project, do a prebuild - npx expo prebuild)
npx pod-install
import switchTheme from 'react-native-theme-switch-animation';
export default function Example() {
const [theme, setTheme] = React.useState('light');
return (
<Button
title="Switch Theme"
onPress={() => {
switchTheme({
switchThemeFunction: () => {
setTheme(theme === 'light' ? 'dark' : 'light'); // your switch theme function
},
animationConfig: {
type: 'fade',
duration: 900,
},
});
}}
/>
);
}Circular Example
switchTheme({
switchThemeFunction: () => {
setTheme(theme === 'light' ? 'dark' : 'light'); // your switch theme function
},
animationConfig: {
type: 'circular',
duration: 900,
startingPoint: {
cxRatio: 0.5,
cyRatio: 0.5
}
},
});| Name | Type | Description |
|---|---|---|
switchThemeFunction |
() => void |
Adds the function you use in your app to switch themes, doesn't matter if you use redux/context/zustand/mobx or any other way |
animationConfig |
AnimationConfig |
Configuration for the animation -> type, duration, starting point (default is 'fade' with 500ms duration) |
| Name | Type | Description |
|---|---|---|
type |
fade circular inverted-circular |
Specifies animation type |
duration |
number |
Specifies duration in milliseconds |
startingPoint |
StartingPointConfig |
Configuration for the circular animation, where does the animation start in the screen |
| Name | Type | Description |
|---|---|---|
cx |
number |
Specifies starting x point for circular and inverted-circular animation (should not exceed your screen width) |
cy |
number |
Specifies starting y point for circular and inverted-circular animation (should not exceed your screen height) |
cxRatio |
number |
Specifies starting percentage of x point for circular and inverted-circular animation (should be number between -1 and 1) |
cyRatio |
number |
Specifies starting percentage of y point for circular and inverted-circular animation (should be number between -1 and 1) |
If you would like the circular animation to start from/to a button/view on your ui automatically, you can do the following
import switchTheme from 'react-native-theme-switch-animation';
<TouchableOpacity
onPress={(e) => {
e.currentTarget.measure((x1, y1, width, height, px, py) => {
switchTheme({
switchThemeFunction: () => {
setTheme(theme === 'light' ? 'dark' : 'light');
},
animationConfig: {
type: 'circular',
duration: 900,
startingPoint: {
cy: py + height / 2,
cx: px + width / 2,
}
},
});
});
}}
/>Screen.Recording.2023-11-18.at.8.10.52.PM.mov
this can be solved by adding a borderRadius of any value more than 1.2 for the component
<View
style={{
borderWidth: 1,
borderColor: theme === 'light' ? 'black' : 'white',
borderRadius: 1.2, // -> Add This
padding: 20,
marginBottom: 20,
}}
>
<Text
style={{
color: theme === 'light' ? 'black' : 'white',
}}
>
test
</Text>
</View>MIT