feat: imageBackground web

Author: Brentlok

src/components/native/ImageBackground.tsx

@@ -13,6 +13,7 @@ type Props = {
 
 export const ImageBackground = forwardRef<unknown, Props>((props, forwardedRef) => {
     let storedRef: NativeImageBackground | null = null
+    let storedImageRef: NativeImageBackground | null = null
     const styleClassNames = getClassName(props.style)
     const imageClassNames = getClassName(props.imageStyle)
 
@@ -26,15 +27,11 @@ export const ImageBackground = forwardRef<unknown, Props>((props, forwardedRef)
                 if (!ref) {
                     // @ts-expect-error hidden from TS
                     UnistylesShadowRegistry.remove(storedRef, styleClassNames?.hash)
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedRef, imageClassNames?.hash)
                 }
 
                 storedRef = ref
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.add(ref, styleClassNames?.hash)
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(ref, styleClassNames?.hash)
 
                 if (typeof forwardedRef === 'function') {
                     return forwardedRef(ref)
@@ -44,6 +41,16 @@ export const ImageBackground = forwardRef<unknown, Props>((props, forwardedRef)
                     forwardedRef.current = ref
                 }
             }}
+            imageRef={isServer() ? undefined : ref => {
+                if (!ref) {
+                    // @ts-expect-error hidden from TS
+                    UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash)
+                }
+
+                storedImageRef = ref
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
+            }}
         />
     )
 })

src/core/createUnistylesImageBackground.native.tsx

@@ -1,59 +1,24 @@
 import React from 'react'
-import { getClassName } from './getClassname'
-import type { UnistylesValues } from '../types'
-import { isServer } from '../web/utils'
-
-type ComponentProps = {
-    style?: UnistylesValues | Array<UnistylesValues>
-}
-
-export const createUnistylesImageBackground = (Component: any) => React.forwardRef<HTMLElement, ComponentProps>((props, forwardedRef) => {
-    let storedRef: HTMLElement | null = null
-    let storedImageRef: HTMLElement | null = null
-    const classNames = getClassName(props.style)
-    const imageClassNames = getClassName(props.style)
-
-    return (
-        <Component
-            {...props}
-            style={classNames}
-            imageStyle={imageClassNames}
-            imageRef={isServer() ? undefined : (ref: HTMLElement | null) => {
-                if (!ref) {
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash)
-                }
-
-                storedImageRef = ref
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
-
-                if (typeof forwardedRef === 'function') {
-                    return forwardedRef(ref)
-                }
-
-                if (forwardedRef) {
-                    forwardedRef.current = ref
-                }
-            }}
-            ref={isServer() ? undefined : (ref: HTMLElement | null) => {
-                if (!ref) {
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
-                }
-
-                storedRef = ref
+import type { ImageBackground, ImageBackgroundProps } from 'react-native'
+import { UnistylesShadowRegistry } from '../specs'
+import { passForwardedRef } from './passForwardRef'
+
+export const createUnistylesImageBackground = (Component: typeof ImageBackground) => React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => (
+    <Component
+        {...props}
+        ref={ref => passForwardedRef(props, ref, forwardedRef)}
+        imageRef={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)
+
+            return () => {
                 // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, classNames?.hash)
-
-                if (typeof forwardedRef === 'function') {
-                    return forwardedRef(ref)
-                }
-
-                if (forwardedRef) {
-                    forwardedRef.current = ref
-                }
-            }}
-        />
-    )
-})
+                UnistylesShadowRegistry.remove(ref)
+            }
+        }}
+    />
+))