wadhahessam / react-native-theme-switch-animation

A Plug & Play Animations for Switching (Dark/Light) Themes. 🌖

react-native-theme-switch-animation

A Plug & Play Animations for Switching (Dark/Light) themes. 🌗

🦄 Features

• ✅ 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

Installation

npm install react-native-theme-switch-animation

OR

yarn add react-native-theme-switch-animation

Link

(if you are using expo managed project, do a prebuild - npx expo prebuild)

npx pod-install

For React Native Versions 0.67 and Below

• follow those instructions

Usage

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
    }
  },
});

switchTheme Function Props

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)

animationConfig options

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

startingPoint options

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)

Start Circular Animation from/to specific Button

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,
          }
        },
      });
    });
  }}
/>

Trouble shooting

[iOS] Artifact for some components with border

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>

License

MIT

react-native-theme-switch-animation's Issues

Add reverse circle

Hi there,
thanks for this handy library.
i think it would be cool if we can do reverse circle so for example for light to dark we have regular circle, and for dark to light reverse circle would be nice.

expo go support?

I'm traveling and looking forward to testing it and would like to know if it works with expo go?

Error: The package 'react-native-theme-switch-animation' doesn't seem to be linked

Anyone having this problem when trying to add the package to a project?

node: v16.
React Native: 0.63.4 (I think this is probably the problem)

Error: The package 'react-native-theme-switch-animation' doesn't seem to be linked. Make sure:

• You rebuilt the app after installing the package
• You are not using Expo Go

ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

[IOS] Theme Switch Animation + Drawer Navigator

Hello,

Thank you for this excellent library!

I have noticed an inconsistency across platforms when using it with DrawerNavigator from react-navigation. I have attached a screen recording that captures the issue.

I would greatly appreciate any help

Screen.Recording.2023-12-21.at.13.04.41.mov

wrong position on Android

Hi, It seem the animation start point is wrong for Android

Here is the code:

<TouchableOpacity onPress={(e) => {
                                e.currentTarget.measure((x1, y1, width, height, px, py) => {
                                    switchTheme({
                                        switchThemeFunction: () => {
                                            toggleTheme()
                                        },
                                        animationConfig: {
                                            type: theme.id === 'light' ? 'inverted-circular' : 'circular',
                                            duration: 700,
                                            startingPoint: {
                                                cy: py + height / 2,
                                                cx: px + width / 2,
                                            }
                                        },
                                    });
                                });
                            }}>
                                <MaterialCommunityIcons 
                                    name={theme.id === 'light' ? 'white-balance-sunny' : 'moon-waning-crescent'}
                                    size={28} 
                                    style={{
                                        transform: [
                                            {
                                                rotate: '-30deg'
                                            }
                                        ]
                                    }}
                                    color={theme.id === 'light' ? theme.mainOrangeColor : '#513788'}/>
                        </TouchableOpacity>

Issue with Package Compatibility in React Native when using BlurView in Components

I have encountered an issue . The problem arises when the view includes the BlurView component as part of its views. The App Crashes with an Error. Radius out of range (0<r<=25)

[iOS] UI issue. The borders flickering with the shadow during transition.

Hello. First of all thanks for such a cool library!

I've just installed and checked the animation and everything works fine, but I noticed weird behavior. When an element has a border style, it flickers with a strange shadow around it.

Steps to reproduce:

1. Add any view with a border style on the screen
2. Stay on this screen and try to switch theme with animation

Screen.Recording.2023-11-10.at.11.17.06.mov

Support for node 16?

I would love that the minimum requirements of this library was node v16

Feature request: expo config plugin

Hello! Thanks for the great library, it works really quite magically!

I was wondering if you have considered releasing an expo config plugin for it? It would make keeping apps in sync with expo versions much easier. Currently (if I am not mistaken), if you use expo prebuild on an app, it exposes the android and iOS folders, which this library then "modifies" by linking against. Once anything has "modified" the android or ios folders, upgrading to future expo versions is going to be a headache. A config plugin would in the end give the same results but allow users to not have "modified" android/ios folders, allowing a much easier upgrade path.