From 234aa4dc59966f0be5ee26606f54b81a211e1ff3 Mon Sep 17 00:00:00 2001
From: Jacek Pudysz <jacekpudysz@gmail.com>
Date: Thu, 12 Dec 2024 13:48:20 +0100
Subject: [PATCH] feat: dynamic function with rt withunsityles

---
 example/App.tsx                               | 35 +++++++++++++++++--
 .../withUnistyles/withUnistyles.native.tsx    |  8 ++---
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/example/App.tsx b/example/App.tsx
index 401f60a6..3d187871 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -1,5 +1,14 @@
 import React, { useRef } from 'react'
-import { Button, Pressable, PressableStateCallbackType, ScrollView, Text, TextInput, View } from 'react-native'
+import {
+    Button,
+    ImageBackground,
+    Pressable,
+    PressableStateCallbackType,
+    ScrollView,
+    Text,
+    TextInput,
+    View
+} from 'react-native'
 import { Blurhash } from 'react-native-blurhash'
 import {
     StyleSheet,
@@ -69,7 +78,14 @@ export const App = () => {
                     </View>
                 ))}
             </UniScrollView>
-            <UniBlurhash blurhash="LGFFaXYk^6#M@-5c,1J5@[or[Q6." style={styles.blurhash}  />
+            <View style={styles.row}>
+                <UniBlurhash blurhash="LGFFaXYk^6#M@-5c,1J5@[or[Q6." style={styles.blurhash}  />
+                <UniBlurhash blurhash="LGFFaXYk^6#M@-5c,1J5@[or[Q6." style={styles.blurhashWithColor({ light: '#A1CEDC', dark: '#1D3D47' })}  />
+            </View>
+            <ImageBackground
+                source={{ uri: 'https://images.unsplash.com/photo-1674448417387-345997fcd888?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY0NjY2ODk0NQ&ixlib=rb-1.2.1&q=80&w=1080' }}
+                style={styles.imageBackground({ light: 'black', dark: 'white' })}
+            />
             <UniButton
                 title="Force re-render"
                 onPress={() => setCount(prevState =>  prevState + 1)}
@@ -144,10 +160,25 @@ const styles = StyleSheet.create((theme, rt) => ({
         borderWidth: 5,
         borderColor: theme.colors.test
     },
+    blurhashWithColor: (color: Record<string, string>) => ({
+        height: 100,
+        width: 100,
+        borderWidth: 5,
+        borderColor: rt.colorScheme === 'dark' ? color.dark : color.light
+    }),
+    imageBackground: (color: Record<string, string>) => ({
+        height: 100,
+        width: 100,
+        borderWidth: 5,
+        borderColor: rt.colorScheme === 'dark' ? color.dark : color.light
+    }),
     scrollView: {
         width: '100%',
         backgroundColor: theme.colors.accent
     },
+    row: {
+        flexDirection: 'row',
+    },
     contentContainerStyle: {
         transform: [{
             translateX: rt.colorScheme === 'dark' ? 100 : 200
diff --git a/src/core/withUnistyles/withUnistyles.native.tsx b/src/core/withUnistyles/withUnistyles.native.tsx
index d6336040..bc02ff47 100644
--- a/src/core/withUnistyles/withUnistyles.native.tsx
+++ b/src/core/withUnistyles/withUnistyles.native.tsx
@@ -48,6 +48,10 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
             // @ts-expect-error - this is hidden from TS
             const dispose = StyleSheet.addChangeListener(changedDependencies => {
                 if (listensToTheme && changedDependencies.includes(UnistyleDependency.Theme)) {
+                    updateTheme()
+                }
+
+                if (changedDependencies.some((dependency: UnistyleDependency) => dependencies.includes(dependency))) {
                     SUPPORTED_STYLE_PROPS.forEach(propName => {
                         if (narrowedProps?.[propName]) {
                             stylesRef.current = {
@@ -60,10 +64,6 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
                         }
                     })
 
-                    updateTheme()
-                }
-
-                if (changedDependencies.some((dependency: UnistyleDependency) => dependencies.includes(dependency))) {
                     updateRuntime()
                 }
             })