react-native-unistyles 3.0.0-nightly-20250329 → 3.0.0-rc.1

package/lib/typescript/src/web/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,sBAAsB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-nightly-20250329",
+  "version": "3.0.0-rc.1",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",

package/src/components/native/Image.native.tsx

@@ -0,0 +1,4 @@
+import { Image as NativeImage } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const Image = createUnistylesElement(NativeImage)

package/src/components/native/Image.tsx

@@ -1,4 +1,36 @@
-import { Image as NativeImage } from 'react-native'
-import { createUnistylesElement } from '../../core'
+import React, { type ComponentProps, forwardRef } from 'react'
+import { type ImageStyle, Image as NativeImage, type StyleProp, type ViewStyle } from 'react-native'
+import { getClassName } from '../../core'
+import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
+import type { UnistylesValues } from '../../types'
+import { copyComponentProperties } from '../../utils'
+import { createUnistylesRef, keyInObject } from '../../web/utils'
 
-export const Image = createUnistylesElement(NativeImage)
+type Props = ComponentProps<typeof NativeImage> & {
+    style?: UnistylesValues
+    imageStyle?: UnistylesValues
+}
+
+const UnistylesImage = forwardRef<unknown, Props>((props, forwardedRef) => {
+    const classNames = getClassName(props.style)
+    const ref = createUnistylesRef(classNames, forwardedRef)
+    const hasWidthStyle = typeof props.style === 'object' && keyInObject(props.style, 'width')
+    const hasHeightStyle = typeof props.style === 'object' && keyInObject(props.style, 'height')
+
+    maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, 'Image')
+
+    return (
+        <NativeImage
+            {...props}
+            style={[
+                classNames,
+                // Clear inline width and height extracted from source
+                hasWidthStyle && { width: '' },
+                hasHeightStyle && { height: '' }
+            ] as StyleProp<ImageStyle>}
+            ref={ref}
+        />
+    )
+})
+
+export const Image = copyComponentProperties(NativeImage, UnistylesImage)

package/src/components/native/ImageBackground.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { forwardRef } from 'react'
 import { type ImageStyle, ImageBackground as NativeImageBackground, type StyleProp, type ViewStyle } from 'react-native'
 import { getClassName } from '../../core'
+import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
 import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
-import { UnistylesShadowRegistry } from '../../web'
-import { isServer } from '../../web/utils'
+import { createUnistylesRef, keyInObject } from '../../web/utils'
 
 type Props = {
     style?: UnistylesValues
@@ -13,44 +13,28 @@ type Props = {
 }
 
 const UnistylesImageBackground = 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)
+    const ref = createUnistylesRef(styleClassNames, forwardedRef)
+    const imageRef = createUnistylesRef(imageClassNames)
+    const hasWidthStyle = typeof props.imageStyle === 'object' && keyInObject(props.imageStyle, 'width')
+    const hasHeightStyle = typeof props.imageStyle === 'object' && keyInObject(props.imageStyle, 'height')
+
+    maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, 'ImageBackground')
+    maybeWarnAboutMultipleUnistyles(props.imageStyle as ViewStyle, 'ImageBackground')
 
     return (
         <NativeImageBackground
             {...props}
             style={styleClassNames as StyleProp<ViewStyle>}
-            imageStyle={imageClassNames as StyleProp<ImageStyle>}
-            ref={isServer() ? undefined : ref => {
-                if (!ref) {
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedRef, styleClassNames?.hash)
-                }
-
-                storedRef = ref
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, styleClassNames?.hash)
-
-                if (typeof forwardedRef === 'function') {
-                    return forwardedRef(ref)
-                }
-
-                if (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)
-            }}
+            imageStyle={[
+                imageClassNames,
+                // Clear inline width and height extracted from source
+                hasWidthStyle && { width: '' },
+                hasHeightStyle && { height: '' }
+            ] as StyleProp<ImageStyle>}
+            ref={ref}
+            imageRef={imageRef}
         />
     )
 })

package/src/components/native/Pressable.native.tsx

@@ -50,10 +50,18 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                     storedRef.current = ref
                 }
 
-                // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.add(ref, unistyles)
-
-                return passForwardedRef(props, ref, forwardedRef)
+                return passForwardedRef(
+                    ref,
+                    forwardedRef,
+                    () => {
+                        // @ts-expect-error - this is hidden from TS
+                        UnistylesShadowRegistry.add(ref, unistyles)
+                    },
+                    () => {
+                        // @ts-expect-error - this is hidden from TS
+                        UnistylesShadowRegistry.remove(ref)
+                    }
+                )
             }}
             style={state => {
                 const isPropStyleAFunction = typeof style === 'function'

package/src/core/createUnistylesElement.native.tsx

@@ -38,15 +38,21 @@ export const createUnistylesElement = (Component: any) => {
                         storedRef.current = getNativeRef(Component, ref)
                     }
 
-                    passForwardedRef(props, ref, forwardedRef)
-
                     // @ts-ignore we don't know the type of the component
                     maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
 
-                    return () => {
-                        // @ts-ignore
-                        UnistylesShadowRegistry.remove(ref)
-                    }
+                    return passForwardedRef(
+                        ref,
+                        forwardedRef,
+                        () => {
+                            // @ts-ignore this is hidden from TS
+                            UnistylesShadowRegistry.add(ref, props.style)
+                        },
+                        () => {
+                            // @ts-ignore this is hidden from TS
+                            UnistylesShadowRegistry.remove(ref)
+                        }
+                    )
                 }}
             />
         )

package/src/core/createUnistylesElement.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import type { ViewStyle } from 'react-native'
 import type { UnistylesValues } from '../types'
 import { copyComponentProperties } from '../utils'
-import { UnistylesShadowRegistry } from '../web'
-import { isServer } from '../web/utils'
+import { createUnistylesRef } from '../web/utils'
 import { getClassName } from './getClassname'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
@@ -12,34 +12,16 @@ type ComponentProps = {
 
 export const createUnistylesElement = (Component: any) => {
     const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
-        let storedRef: HTMLElement | null = null
         const classNames = getClassName(props.style)
+        const ref = createUnistylesRef(classNames, forwardedRef)
+
+        maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, Component.displayName)
 
         return (
             <Component
                 {...props}
                 style={classNames}
-                ref={isServer() ? undefined : (ref: HTMLElement | null) => {
-                    // @ts-ignore we don't know the type of the component
-                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
-
-                    if (!ref) {
-                        // @ts-expect-error hidden from TS
-                        UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
-                    }
-
-                    storedRef = ref
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.add(ref, classNames?.hash)
-
-                    if (typeof forwardedRef === 'function') {
-                        return forwardedRef(ref)
-                    }
-
-                    if (forwardedRef) {
-                        forwardedRef.current = ref
-                    }
-                }}
+                ref={ref}
             />
         )
     })

package/src/core/createUnistylesImageBackground.tsx

@@ -27,17 +27,23 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
             <Component
                 {...props}
                 ref={ref => {
-                    passForwardedRef(props, ref, forwardedRef)
-
-                    return () => {
-                        // @ts-ignore
-                        UnistylesShadowRegistry.remove(ref)
-
-                        if (storedImageRef.current) {
-                            // @ts-ignore
-                            UnistylesShadowRegistry.remove(storedImageRef.current)
+                    return passForwardedRef(
+                        ref,
+                        forwardedRef,
+                        () => {
+                            // @ts-expect-error - this is hidden from TS
+                            UnistylesShadowRegistry.add(ref, props.style)
+                        },
+                        () => {
+                            // @ts-expect-error - this is hidden from TS
+                            UnistylesShadowRegistry.remove(ref)
+
+                            if (storedImageRef.current) {
+                                // @ts-expect-error - this is hidden from TS
+                                UnistylesShadowRegistry.remove(storedImageRef.current)
+                            }
                         }
-                    }
+                    )
                 }}
                 imageRef={ref => {
                     if (ref) {

package/src/core/passForwardRef.ts

@@ -1,10 +1,10 @@
 import React from 'react'
-import { UnistylesShadowRegistry } from '../specs'
 
 export const passForwardedRef = <T>(
-    props: any,
     ref: T,
-    forwardedRef: React.ForwardedRef<T>
+    forwardedRef: React.ForwardedRef<T>,
+    onMount?: () => void,
+    onUnmount?: () => void
 ) => {
     const passForwardedRef = () => {
         if (typeof forwardedRef === 'function') {
@@ -19,10 +19,10 @@ export const passForwardedRef = <T>(
     }
     const forwardedRefReturnFn = passForwardedRef()
 
-    // @ts-expect-error hidden from TS
-    UnistylesShadowRegistry.add(ref, props.style)
+    onMount?.()
 
     return () => {
         forwardedRefReturnFn?.()
+        onUnmount?.()
     }
 }

package/src/server/serialize.ts

@@ -12,7 +12,7 @@ export const serialize = (value: any): string => {
             }
 
             return `{${Object.entries(value)
-                .map(([key, value]) => `${key}:${serialize(value)}`)
+                .map(([key, value]) => `'${key}':${serialize(value)}`)
                 .join(',')}}`
         default:
             return JSON.stringify(value)

package/src/specs/ShadowRegistry/index.ts

@@ -40,9 +40,8 @@ HybridShadowRegistry.add = (handle, styles) => {
         ? styles.flat()
         : [styles]
 
-    // filter Reanimated styles and styles that are undefined
+    // filter styles that are undefined or with no keys
     const filteredStyles = stylesArray
-        .filter(style => !style?.initial?.updater)
         .filter(style => style && Object.keys(style).length > 0)
         .flat()
         .filter(Boolean)

package/src/web/utils/createUnistylesRef.ts

@@ -0,0 +1,29 @@
+import type React from 'react'
+import type { Nullable } from '../../types'
+import { UnistylesWeb } from '../index'
+import { isServer } from './common'
+
+type ClassNames = {
+    hash: string
+}
+
+export const createUnistylesRef = <T>(classNames?: ClassNames, forwardedRef?: React.ForwardedRef<T>) => {
+    const storedRef = { current: null as Nullable<T> }
+
+    return isServer() ? undefined : (ref: Nullable<T>) => {
+        if (!ref) {
+            UnistylesWeb.shadowRegistry.remove(storedRef, classNames?.hash)
+        }
+
+        storedRef.current = ref
+        UnistylesWeb.shadowRegistry.add(ref, classNames?.hash)
+
+        if (typeof forwardedRef === 'function') {
+            return forwardedRef(ref)
+        }
+
+        if (forwardedRef) {
+            forwardedRef.current = ref
+        }
+    }
+}

package/src/web/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './common'
 export * from './unistyle'
+export * from './createUnistylesRef'