Merge pull request #501 from jpudysz/feat/update-native-pressable-ima…

…geBackground feat: update native pressable and imageBackground implementations
jpudysz · Jan 20, 2025 · 59ca583 · 59ca583
2 parents 817e994 + 262712e
commit 59ca583
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/src/components/native/Pressable.native.tsx b/src/components/native/Pressable.native.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
 import type { PressableProps as Props, View } from 'react-native'
 import { UnistylesShadowRegistry } from '../../specs'
@@ -11,39 +11,43 @@ type PressableProps = Props & {
 export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
     const storedRef = useRef<View | null>()
 
+    useEffect(() => {
+        return () => {
+            if (storedRef.current) {
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.remove(storedRef.current)
+            }
+        }
+    }, [])
+
     return (
         <NativePressableReactNative
             {...props}
             ref={ref => {
                 const unistyles = typeof style === 'function'
                     ? style({ pressed: false })
                     : style
-                const styles = Array.isArray(unistyles)
-                    ? unistyles
-                    : [unistyles]
 
                 // @ts-expect-error web types are not compatible with RN styles
-                UnistylesShadowRegistry.add(ref, styles)
-                storedRef.current = ref
+                UnistylesShadowRegistry.add(ref, unistyles)
+
+                if (ref) {
+                    storedRef.current = ref
+                }
 
                 return passForwardedRef(props, ref, forwardedRef)
             }}
             style={state => {
                 const unistyles = typeof style === 'function'
                     ? style(state)
                     : style
-                const styles = Array.isArray(unistyles)
-                    ? unistyles
-                    : [unistyles]
 
                 if (!storedRef.current) {
                     return unistyles
                 }
 
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.remove(storedRef.current)
                 // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.add(storedRef.current, styles)
+                UnistylesShadowRegistry.add(storedRef.current, unistyles)
 
                 return unistyles
             }}

diff --git a/src/core/createUnistylesImageBackground.tsx b/src/core/createUnistylesImageBackground.tsx
@@ -42,12 +42,8 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
                     storedImageRef.current = ref
                 }
 
-                const style = Array.isArray(props.imageStyle)
-                    ? props.imageStyle
-                    : [props.imageStyle]
-
                 // @ts-expect-error web types are not compatible with RN styles
-                UnistylesShadowRegistry.add(ref, style)
+                UnistylesShadowRegistry.add(ref, props.imageStyle)
             }}
         />
     )