Merge pull request #1178 from jpudysz/feature/use-animated-theme

fix: use animated theme with scoped themes

Author: jpudysz

packages/unistyles/src/reanimated/useAnimatedTheme.native.ts

@@ -1,22 +1,37 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { type SharedValue, useSharedValue } from 'react-native-reanimated'
 
 import type { UnistylesTheme } from '../types'
 
-import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
 
 export const useAnimatedTheme = () => {
-    const theme = useSharedValue(UnistylesRuntime.getTheme())
+    const [scopedTheme, setScopedTheme] = useState(
+        () => UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined,
+    )
+    const theme = useSharedValue(UnistylesRuntime.getTheme(scopedTheme))
+    const maybeNewScopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined
+
+    if (scopedTheme !== maybeNewScopedTheme) {
+        setScopedTheme(maybeNewScopedTheme)
+        theme.set(UnistylesRuntime.getTheme(maybeNewScopedTheme))
+    }
 
     useEffect(() => {
-        const dispose = StyleSheet.addChangeListener((changedDependencies) => {
-            if (changedDependencies.includes(UnistyleDependency.Theme)) {
-                theme.set(UnistylesRuntime.getTheme())
+        const dispose = StyleSheet.addChangeListener(changedDependencies => {
+            if (!changedDependencies.includes(UnistyleDependency.Theme)) {
+                return
+            }
+
+            if (scopedTheme) {
+                return
             }
+
+            theme.set(UnistylesRuntime.getTheme())
         })
 
         return () => dispose()
-    }, [])
+    }, [scopedTheme])
 
     return theme as SharedValue<UnistylesTheme>
 }

packages/unistyles/src/reanimated/useAnimatedTheme.ts

@@ -1,23 +1,36 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { type SharedValue, useSharedValue } from 'react-native-reanimated'
 
 import type { UnistylesTheme } from '../types'
 
-import { UnistyleDependency, UnistylesRuntime } from '../specs'
+import { UnistyleDependency, UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
 import { services } from '../web/services'
 
 export const useAnimatedTheme = () => {
-    const theme = useSharedValue(UnistylesRuntime.getTheme())
+    const [scopedTheme, setScopedTheme] = useState(
+        () => UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined,
+    )
+    const theme = useSharedValue(UnistylesRuntime.getTheme(scopedTheme))
+    const maybeNewScopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined
+
+    if (scopedTheme !== maybeNewScopedTheme) {
+        setScopedTheme(maybeNewScopedTheme)
+        theme.set(UnistylesRuntime.getTheme(maybeNewScopedTheme))
+    }
 
     useEffect(() => {
-        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () =>
-            theme.set(UnistylesRuntime.getTheme()),
-        )
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => {
+            if (scopedTheme) {
+                return
+            }
+
+            theme.set(UnistylesRuntime.getTheme())
+        })
 
         return () => {
             dispose()
         }
-    }, [])
+    }, [scopedTheme])
 
     return theme as SharedValue<UnistylesTheme>
 }