feat(ui): add smooth circular animation for theme switching

Author: ajaysehwal

package.json

@@ -145,6 +145,7 @@
     "react-native-svg-transformer": "1.5.3",
     "react-native-system-navigation-bar": "2.8.0",
     "react-native-tcp-socket": "6.2.0",
+    "react-native-theme-switch-animation": "0.8.0",
     "react-native-tor": "https://github.com/ZeusLN/react-native-tor.git#v0.1.9-zeus",
     "react-native-udp": "4.1.7",
     "react-native-v8": "0.61.5-patch.4",

stores/SettingsStore.ts

@@ -1556,6 +1556,18 @@ export default class SettingsStore {
     // Favorite currencies
     @observable public favoriteCurrencies: string[] = [];
 
+    /**
+     * Synchronously applies a new theme value in-memory so the UI re-renders
+     * before the async storage write completes. This lets animation libraries
+     * capture a before/after screenshot pair in the same JS frame.
+     */
+    @action public setThemeImmediate = (theme: string) => {
+        this.settings = {
+            ...this.settings,
+            display: { ...this.settings.display, theme }
+        };
+    };
+
     @action
     public loadFavoriteCurrencies = async () => {
         try {

views/Settings/Display.tsx

@@ -4,6 +4,8 @@ import { inject, observer } from 'mobx-react';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import SystemNavigationBar from 'react-native-system-navigation-bar';
 
+import switchTheme from 'react-native-theme-switch-animation';
+
 import SettingsStore, {
     DEFAULT_VIEW_KEYS,
     THEME_KEYS
@@ -122,23 +124,35 @@ export default class Display extends React.Component<
                         title={localeString('views.Settings.Theme.title')}
                         selectedValue={theme}
                         disabled={SettingsStore.settingsUpdateInProgress}
-                        onValueChange={async (value: string) => {
-                            this.setState({
-                                theme: value
+                        onValueChange={(value: string) => {
+                            this.setState({ theme: value });
+                            switchTheme({
+                                switchThemeFunction: () => {
+                                    SettingsStore.setThemeImmediate(value);
+                                },
+                                animationConfig: {
+                                    type: 'circular',
+                                    duration: 600,
+                                    startingPoint: {
+                                        cxRatio: 0.5,
+                                        cyRatio: 0.5
+                                    }
+                                }
                             });
-                            await updateSettings({
+                            updateSettings({
                                 display: {
                                     ...settings.display,
                                     theme: value
                                 }
+                            }).then(() => {
+                                SystemNavigationBar.setNavigationColor(
+                                    themeColor('background'),
+                                    isLightTheme() ? 'dark' : 'light'
+                                );
+                                SystemNavigationBar.setNavigationBarDividerColor(
+                                    themeColor('secondary')
+                                );
                             });
-                            SystemNavigationBar.setNavigationColor(
-                                themeColor('background'),
-                                isLightTheme() ? 'dark' : 'light'
-                            );
-                            SystemNavigationBar.setNavigationBarDividerColor(
-                                themeColor('secondary')
-                            );
                         }}
                         values={THEME_KEYS}
                     />

yarn.lock

@@ -8709,6 +8709,11 @@ react-native-tcp-socket@6.2.0:
     buffer "^5.4.3"
     eventemitter3 "^4.0.7"
 
+react-native-theme-switch-animation@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/react-native-theme-switch-animation/-/react-native-theme-switch-animation-0.8.0.tgz#d9f69d5e41a00697d368897216d318d9430aff0d"
+  integrity sha512-z4f3QGSuUP4tagycls2mekng/7uxAbr75Gn0GGm7JRkrviyao++V2CtJ8VUDx+hSOsgfjEhD9D5JubsGbbHB5w==
+
 "react-native-tor@https://github.com/ZeusLN/react-native-tor.git#v0.1.9-zeus":
   version "0.1.9-zeus"
   resolved "https://github.com/ZeusLN/react-native-tor.git#4279f398c0834a3792d317cb8b75d81f36f0ca81"