react-native-unistyles 3.0.0-alpha.38 → 3.0.0-alpha.39

package/nitrogen/generated/ios/swift/HybridNativePlatformSpecCxx.swift

@@ -219,17 +219,6 @@ public class HybridNativePlatformSpecCxx {
     }
   }
   
-  @inline(__always)
-  public func setNavigationBarBackgroundColor(color: Double) -> Void {
-    do {
-      try self.__implementation.setNavigationBarBackgroundColor(color: color)
-      return 
-    } catch {
-      let __message = "\(error.localizedDescription)"
-      fatalError("Swift errors can currently not be propagated to C++! See https://github.com/swiftlang/swift/issues/75290 (Error: \(__message))")
-    }
-  }
-  
   @inline(__always)
   public func setNavigationBarHidden(isHidden: Bool) -> Void {
     do {
@@ -252,17 +241,6 @@ public class HybridNativePlatformSpecCxx {
     }
   }
   
-  @inline(__always)
-  public func setStatusBarBackgroundColor(color: Double) -> Void {
-    do {
-      try self.__implementation.setStatusBarBackgroundColor(color: color)
-      return 
-    } catch {
-      let __message = "\(error.localizedDescription)"
-      fatalError("Swift errors can currently not be propagated to C++! See https://github.com/swiftlang/swift/issues/75290 (Error: \(__message))")
-    }
-  }
-  
   @inline(__always)
   public func setImmersiveMode(isEnabled: Bool) -> Void {
     do {
@@ -286,18 +264,18 @@ public class HybridNativePlatformSpecCxx {
   }
   
   @inline(__always)
-  public func registerPlatformListener(callback: bridge.Func_void_std__vector_UnistyleDependency_) -> Void {
+  public func registerPlatformListener(callback: bridge.Func_void_std__vector_UnistyleDependency__UnistylesNativeMiniRuntime) -> Void {
     do {
-      try self.__implementation.registerPlatformListener(callback: { () -> (([UnistyleDependency]) -> Void) in
-        let __sharedClosure = bridge.share_Func_void_std__vector_UnistyleDependency_(callback)
-        return { (__dependencies: [UnistyleDependency]) -> Void in
+      try self.__implementation.registerPlatformListener(callback: { () -> (([UnistyleDependency], UnistylesNativeMiniRuntime) -> Void) in
+        let __sharedClosure = bridge.share_Func_void_std__vector_UnistyleDependency__UnistylesNativeMiniRuntime(callback)
+        return { (__dependencies: [UnistyleDependency], __miniRuntime: UnistylesNativeMiniRuntime) -> Void in
           __sharedClosure.pointee.call({ () -> bridge.std__vector_UnistyleDependency_ in
           var __vector = bridge.create_std__vector_UnistyleDependency_(__dependencies.count)
           for __item in __dependencies {
             __vector.push_back(__item)
           }
           return __vector
-        }())
+        }(), __miniRuntime)
         }
       }())
       return 
@@ -308,12 +286,12 @@ public class HybridNativePlatformSpecCxx {
   }
   
   @inline(__always)
-  public func registerImeListener(callback: bridge.Func_void) -> Void {
+  public func registerImeListener(callback: bridge.Func_void_UnistylesNativeMiniRuntime) -> Void {
     do {
-      try self.__implementation.registerImeListener(callback: { () -> (() -> Void) in
-        let __sharedClosure = bridge.share_Func_void(callback)
-        return { () -> Void in
-          __sharedClosure.pointee.call()
+      try self.__implementation.registerImeListener(callback: { () -> ((UnistylesNativeMiniRuntime) -> Void) in
+        let __sharedClosure = bridge.share_Func_void_UnistylesNativeMiniRuntime(callback)
+        return { (__miniRuntime: UnistylesNativeMiniRuntime) -> Void in
+          __sharedClosure.pointee.call(__miniRuntime)
         }
       }())
       return 

package/nitrogen/generated/shared/c++/HybridNativePlatformSpec.cpp

@@ -25,10 +25,8 @@ namespace margelo::nitro::unistyles {
       prototype.registerHybridMethod("getNavigationBarDimensions", &HybridNativePlatformSpec::getNavigationBarDimensions);
       prototype.registerHybridMethod("getPrefersRtlDirection", &HybridNativePlatformSpec::getPrefersRtlDirection);
       prototype.registerHybridMethod("setRootViewBackgroundColor", &HybridNativePlatformSpec::setRootViewBackgroundColor);
-      prototype.registerHybridMethod("setNavigationBarBackgroundColor", &HybridNativePlatformSpec::setNavigationBarBackgroundColor);
       prototype.registerHybridMethod("setNavigationBarHidden", &HybridNativePlatformSpec::setNavigationBarHidden);
       prototype.registerHybridMethod("setStatusBarHidden", &HybridNativePlatformSpec::setStatusBarHidden);
-      prototype.registerHybridMethod("setStatusBarBackgroundColor", &HybridNativePlatformSpec::setStatusBarBackgroundColor);
       prototype.registerHybridMethod("setImmersiveMode", &HybridNativePlatformSpec::setImmersiveMode);
       prototype.registerHybridMethod("getMiniRuntime", &HybridNativePlatformSpec::getMiniRuntime);
       prototype.registerHybridMethod("registerPlatformListener", &HybridNativePlatformSpec::registerPlatformListener);

package/nitrogen/generated/shared/c++/HybridNativePlatformSpec.hpp

@@ -78,14 +78,12 @@ namespace margelo::nitro::unistyles {
       virtual Dimensions getNavigationBarDimensions() = 0;
       virtual bool getPrefersRtlDirection() = 0;
       virtual void setRootViewBackgroundColor(double color) = 0;
-      virtual void setNavigationBarBackgroundColor(double color) = 0;
       virtual void setNavigationBarHidden(bool isHidden) = 0;
       virtual void setStatusBarHidden(bool isHidden) = 0;
-      virtual void setStatusBarBackgroundColor(double color) = 0;
       virtual void setImmersiveMode(bool isEnabled) = 0;
       virtual UnistylesNativeMiniRuntime getMiniRuntime() = 0;
-      virtual void registerPlatformListener(const std::function<void(const std::vector<UnistyleDependency>& /* dependencies */)>& callback) = 0;
-      virtual void registerImeListener(const std::function<void()>& callback) = 0;
+      virtual void registerPlatformListener(const std::function<void(const std::vector<UnistyleDependency>& /* dependencies */, const UnistylesNativeMiniRuntime& /* miniRuntime */)>& callback) = 0;
+      virtual void registerImeListener(const std::function<void(const UnistylesNativeMiniRuntime& /* miniRuntime */)>& callback) = 0;
       virtual void unregisterPlatformListeners() = 0;
 
     protected:

package/nitrogen/generated/shared/c++/HybridUnistylesNavigationBarSpec.cpp

@@ -16,7 +16,6 @@ namespace margelo::nitro::unistyles {
     registerHybrids(this, [](Prototype& prototype) {
       prototype.registerHybridGetter("width", &HybridUnistylesNavigationBarSpec::getWidth);
       prototype.registerHybridGetter("height", &HybridUnistylesNavigationBarSpec::getHeight);
-      prototype.registerHybridMethod("setBackgroundColor", &HybridUnistylesNavigationBarSpec::setBackgroundColor);
       prototype.registerHybridMethod("setHidden", &HybridUnistylesNavigationBarSpec::setHidden);
     });
   }

package/nitrogen/generated/shared/c++/HybridUnistylesNavigationBarSpec.hpp

@@ -49,7 +49,6 @@ namespace margelo::nitro::unistyles {
 
     public:
       // Methods
-      virtual void setBackgroundColor(double color) = 0;
       virtual void setHidden(bool isHidden) = 0;
 
     protected:

package/nitrogen/generated/shared/c++/HybridUnistylesStatusBarSpec.cpp

@@ -16,7 +16,6 @@ namespace margelo::nitro::unistyles {
     registerHybrids(this, [](Prototype& prototype) {
       prototype.registerHybridGetter("width", &HybridUnistylesStatusBarSpec::getWidth);
       prototype.registerHybridGetter("height", &HybridUnistylesStatusBarSpec::getHeight);
-      prototype.registerHybridMethod("setBackgroundColor", &HybridUnistylesStatusBarSpec::setBackgroundColor);
       prototype.registerHybridMethod("setHidden", &HybridUnistylesStatusBarSpec::setHidden);
     });
   }

package/nitrogen/generated/shared/c++/HybridUnistylesStatusBarSpec.hpp

@@ -49,7 +49,6 @@ namespace margelo::nitro::unistyles {
 
     public:
       // Methods
-      virtual void setBackgroundColor(double color) = 0;
       virtual void setHidden(bool isHidden) = 0;
 
     protected:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-alpha.38",
+  "version": "3.0.0-alpha.39",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -86,7 +86,9 @@
   "peerDependencies": {
     "@react-native/normalize-colors": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": ">=0.76.0",
+    "react-native-edge-to-edge": "*",
+    "react-native-nitro-modules": "*"
   },
   "workspaces": [
     "example",

package/plugin/common.js

@@ -61,10 +61,18 @@ function getIdentifierNameFromExpression(t, memberExpression) {
             .flatMap(property => getIdentifierNameFromExpression(t, property.value))
     }
 
+    if (t.isUnaryExpression(memberExpression)) {
+        return getIdentifierNameFromExpression(t, memberExpression.argument.object)
+    }
+
     return []
 }
 
 function getSecondPropertyName(t, memberExpression) {
+    if (t.isUnaryExpression(memberExpression)) {
+        return getSecondPropertyName(t, memberExpression.argument.object)
+    }
+
     if (t.isConditionalExpression(memberExpression)) {
         return [
             getSecondPropertyName(t, memberExpression.test.left),
@@ -130,7 +138,10 @@ function getSecondPropertyName(t, memberExpression) {
     return []
 }
 
+const PRESSABLE_STATE_NAME = '__uni_pressable_state'
+
 module.exports = {
     getIdentifierNameFromExpression,
-    getSecondPropertyName
+    getSecondPropertyName,
+    PRESSABLE_STATE_NAME
 }

package/plugin/index.js

@@ -1,5 +1,5 @@
 const addShadowRegistryImport = require('./import')
-const { getStyleMetadata, getStyleAttribute, styleAttributeToArray } = require('./style')
+const { getStyleMetadata, getStyleAttribute, styleAttributeToArray, handlePressable } = require('./style')
 const { getRefProp, addRef, overrideRef, hasStringRef } = require('./ref')
 const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyle } = require('./stylesheet')
 const { isUsingVariants, extractVariants } = require('./variants')
@@ -128,22 +128,24 @@ module.exports = function ({ types: t }) {
                     return
                 }
 
+                if (openingElementName === 'Pressable') {
+                    handlePressable(t, path, styleAttr, metadata)
+                }
+
                 styleAttributeToArray(t, path)
 
                 // to add import
                 state.file.hasAnyUnistyle = true
 
-                metadata.forEach(meta => {
-                    const refProp = getRefProp(t, path)
+                const refProp = getRefProp(t, path)
 
-                    if (!refProp && hasStringRef(t, path)) {
-                        throw new Error("Detected string based ref which is not supported by Unistyles.")
-                    }
+                if (!refProp && hasStringRef(t, path)) {
+                    throw new Error("Detected string based ref which is not supported by Unistyles.")
+                }
 
-                    refProp
-                        ? overrideRef(t, path, refProp, meta, state)
-                        : addRef(t, path, meta, state)
-                })
+                refProp
+                    ? overrideRef(t, path, refProp, metadata, state)
+                    : addRef(t, path, metadata, state)
             },
             CallExpression(path, state) {
                 if (isUsingVariants(t, path)) {

package/plugin/ref.js

@@ -1,3 +1,5 @@
+const { PRESSABLE_STATE_NAME } = require('./common')
+
 function getRefProp(t, path) {
     return path.node.openingElement.attributes.find(attr =>
         t.isJSXAttribute(attr) &&
@@ -14,17 +16,80 @@ function hasStringRef(t, path) {
     )
 }
 
-function memberExpressionFromArray(t, identifiers) {
-    // possible for inline styles
-    if (identifiers.length === 0) {
-        return undefined
-    }
+function arrayExpressionFromMetadata(t, metadata) {
+    const memberExpressions = metadata
+        .map(meta => {
+            // possible for inline styles
+            if (meta.members.length === 0) {
+                return meta.inlineStyle || meta.conditionalExpression
+            }
 
-    const [base, ...members] = identifiers
+            const [base, ...members] = meta.members
 
-    return members.reduce((object, property) => t.memberExpression(object, t.identifier(property)), t.identifier(base))
+            return members.reduce((object, property) => t.memberExpression(object, t.identifier(property)), t.identifier(base))
+        })
+
+    return t.arrayExpression(memberExpressions)
 }
 
+function arrayFromDynamicFunctionArgs(t, metadata, path) {
+    const hasPressableDynamicFunction = path.node.openingElement.attributes
+        .find(attr => t.isJSXIdentifier(attr.name) && attr.name.name === "style" && t.isArrowFunctionExpression(attr.value.expression))
+
+    const memberExpressions = metadata
+        .map(meta => {
+            if (meta.dynamicFunction && meta.dynamicFunction.arguments) {
+                const args = meta.dynamicFunction.arguments.map(arg => {
+                    // special case for pressable
+                    if (t.isIdentifier(arg) && arg.name === PRESSABLE_STATE_NAME) {
+                        // replace with { pressed: false }
+                        return t.objectExpression([
+                            t.objectProperty(
+                                t.identifier("pressed"),
+                                t.booleanLiteral(false)
+                            )
+                        ])
+                    }
+
+                    if (t.isMemberExpression(arg) && arg.object.name === PRESSABLE_STATE_NAME) {
+                        return t.identifier('false')
+                    }
+
+                    return arg
+                })
+
+                return t.arrayExpression(args)
+            }
+
+            // typeof styles.pressable === "function" ? { pressed: false } : []
+            if (hasPressableDynamicFunction) {
+                return t.arrayExpression([
+                    t.conditionalExpression(
+                        t.binaryExpression(
+                            "===",
+                            t.unaryExpression(
+                                "typeof",
+                                t.identifier("styles.pressable")
+                            ),
+                            t.stringLiteral("function")
+                        ),
+                        t.objectExpression([
+                            t.objectProperty(
+                                t.identifier("pressed"),
+                                t.booleanLiteral(false)
+                            )
+                        ]),
+                        t.arrayExpression([])
+                    )
+                ])
+            }
+
+            return t.arrayExpression([])
+        })
+        .filter(Boolean)
+
+    return t.arrayExpression(memberExpressions)
+}
 function addRef(t, path, metadata, state) {
     const hasVariants = state.file.hasVariants
 
@@ -36,9 +101,9 @@ function addRef(t, path, metadata, state) {
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                     [
                         t.identifier('ref'),
-                        memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle || metadata.conditionalExpression,
+                        arrayExpressionFromMetadata(t, metadata),
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        arrayFromDynamicFunctionArgs(t, metadata, path)
                     ]
                 )
             ),
@@ -85,9 +150,9 @@ function overrideRef(t, path, refProp, metadata, state) {
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                         [
                             t.identifier(uniqueRefName),
-                            memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle || metadata.conditionalExpression,
+                            arrayExpressionFromMetadata(t, metadata),
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                            arrayFromDynamicFunctionArgs(t, metadata, path)
                         ]
                     )
                 ),
@@ -130,9 +195,9 @@ function overrideRef(t, path, refProp, metadata, state) {
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                         [
                             t.identifier(userRefName),
-                            memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle || metadata.conditionalExpression,
+                            arrayExpressionFromMetadata(t, metadata),
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                            metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                            arrayFromDynamicFunctionArgs(t, metadata, path)
                         ]
                     )
                 ),
@@ -192,9 +257,9 @@ function overrideRef(t, path, refProp, metadata, state) {
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                     [
                         t.identifier(uniqueRefName),
-                        memberExpressionFromArray(t, metadata.members) || metadata.inlineStyle || metadata.conditionalExpression,
+                        arrayExpressionFromMetadata(t, metadata),
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined'),
-                        metadata.dynamicFunction ? t.arrayExpression(metadata.dynamicFunction.arguments) : t.identifier('undefined')
+                        arrayFromDynamicFunctionArgs(t, metadata, path)
                     ]
                 )
             ),

package/plugin/style.js

@@ -1,3 +1,5 @@
+const { PRESSABLE_STATE_NAME } = require('./common')
+
 function getStyleMetadata(t, node, dynamicFunction = null) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
@@ -27,32 +29,22 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
 
     // {{ ...styles.container }}
     if (t.isObjectExpression(node)) {
-        const inlineStyles = []
-
-        const partialResult = node
+        return node
             .properties
             .flatMap(prop => {
                 // handle inline styles
                 if (t.isObjectProperty(prop)) {
-                    inlineStyles.push(prop)
-
-                    return null
+                    return [{
+                        members: [],
+                        inlineStyle: t.objectExpression([prop]),
+                        dynamicFunction: undefined,
+                        conditionalExpression: undefined
+                    }]
                 }
 
                 return getStyleMetadata(t, prop.argument)
             })
             .filter(Boolean)
-
-        if (inlineStyles.length > 0) {
-            return partialResult.concat([{
-                members: [],
-                inlineStyle: t.objectExpression(inlineStyles),
-                dynamicFunction: undefined,
-                conditionalExpression: undefined
-            }])
-        }
-
-        return partialResult
     }
 
     // {styles.container(arg1, arg2)}
@@ -78,6 +70,11 @@ function getStyleMetadata(t, node, dynamicFunction = null) {
         }]
     }
 
+    // pressable
+    if (t.isArrowFunctionExpression(node)) {
+        return getStyleMetadata(t, node.body, node)
+    }
+
     return []
 }
 
@@ -92,6 +89,12 @@ function getStyleAttribute(t, path) {
 function styleAttributeToArray(t, path) {
     const styleAttribute = getStyleAttribute(t, path)
 
+    // special case for pressable
+    // {state => styles.pressable(state)}
+    if (t.isArrowFunctionExpression(styleAttribute.value.expression)) {
+        return
+    }
+
     // {{...style.container, ...style.container}}
     if (t.isObjectExpression(styleAttribute.value.expression)) {
         const properties = styleAttribute.value.expression.properties
@@ -123,8 +126,100 @@ function styleAttributeToArray(t, path) {
     styleAttribute.value.expression = t.arrayExpression([styleAttribute.value.expression])
 }
 
+function handlePressable(t, path, styleAttr, metadata) {
+    const styleExpression = styleAttr.value.expression
+
+    // {style.pressable}
+    // the worst case, we don't know if user rely on state
+    if (t.isMemberExpression(styleExpression)) {
+        const members = metadata.at(0).members
+
+        if (members.length === 0) {
+            return
+        }
+
+        const stylePath = members.slice(1).reduce(
+            (acc, property) => t.memberExpression(acc, t.identifier(property)),
+            t.identifier(members[0])
+        )
+
+        // state => typeof style.pressable === 'function' ? style.pressable(state) : style.pressable
+        styleAttr.value.expression = t.arrowFunctionExpression(
+            [t.identifier("state")],
+            t.conditionalExpression(
+                t.binaryExpression(
+                    "===",
+                    t.unaryExpression(
+                        "typeof",
+                        stylePath
+                    ),
+                    t.stringLiteral("function")
+                ),
+                t.callExpression(
+                    stylePath,
+                    [t.identifier("state")]
+                ),
+                stylePath
+            )
+        )
+
+        return
+    }
+
+    // {style.pressable(1, 2)}
+    if (t.isCallExpression(styleExpression)) {
+        // user already called dynamic function
+        // there is no work to do
+        return
+    }
+
+    // {() => style.pressable(1, 2)}
+    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length === 0) {
+        // user doesn't care about the state
+        // we can safely unwrap the function
+        styleAttr.value.expression = styleExpression.body
+
+        return
+    }
+
+    // {state => style.pressable(state, 1, 2)}
+    if (t.isArrowFunctionExpression(styleExpression) && styleExpression.params.length > 0) {
+        // already a function, we need to set state to false
+        // and pass it to C++ as in background it will never be true
+        const args = metadata.at(0).dynamicFunction
+
+        if (!t.isCallExpression(args) || args.arguments.length === 0) {
+            return
+        }
+
+        // get state local name
+        const stateIdentifier = styleExpression.params[0]
+
+        if (!stateIdentifier || !t.isIdentifier(stateIdentifier)) {
+            return
+        }
+
+        // replace state name with matching identifier
+        args.arguments.map(arg => {
+            if (t.isIdentifier(arg) && arg.name === stateIdentifier.name) {
+                arg.name = PRESSABLE_STATE_NAME
+            }
+
+            if (t.isMemberExpression(arg) && arg.object.name === stateIdentifier.name) {
+                arg.object.name = PRESSABLE_STATE_NAME
+            }
+
+            return arg
+        })
+
+        // update arrow function arg name
+        styleExpression.params[0].name = PRESSABLE_STATE_NAME
+    }
+}
+
 module.exports = {
     getStyleMetadata,
     getStyleAttribute,
-    styleAttributeToArray
+    styleAttributeToArray,
+    handlePressable
 }

package/src/core/createUnistylesComponent.native.tsx

@@ -1,13 +1,15 @@
-import React, { type ComponentType, useEffect, useRef, useState } from 'react'
+import React, { type ComponentType, forwardRef, useEffect, useRef, useState } from 'react'
 import type { UnistylesTheme } from '../types'
 import { StyleSheet, UnistyleDependency, UnistylesRuntime, type UnistylesStyleSheet } from '../specs'
 import type { PartialBy } from '../types/common'
+import { deepMergeObjects } from '../utils'
 
 const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
 type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
 
-export const createUnistylesComponent =<TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
-    return (props: PartialBy<TProps, keyof TMappings | SupportedStyleProps>) => {
+export const createUnistylesComponent = <TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
+    return forwardRef<unknown, PartialBy<TProps, keyof TMappings | SupportedStyleProps>>((props, ref) => {
+        const narrowedProps = props as PartialBy<TProps, keyof TMappings | SupportedStyleProps>
         const [theme, setTheme] = useState<UnistylesTheme>(UnistylesRuntime.getTheme())
         const [, setRt] = useState(0)
         const stylesRef = useRef<Record<string, any>>({})
@@ -15,8 +17,8 @@ export const createUnistylesComponent =<TProps extends Record<string, any>, TMap
 
         if (!isForcedRef.current) {
             SUPPORTED_STYLE_PROPS.forEach(propName => {
-                if (props?.[propName]) {
-                    if (Array.isArray(props[propName])) {
+                if (narrowedProps?.[propName]) {
+                    if (Array.isArray(narrowedProps[propName])) {
                         console.error(`🦄 Unistyles: createUnistylesComponent requires ${propName} to be an object. Please check props for component: ${Component.displayName}`)
                     }
 
@@ -27,7 +29,7 @@ export const createUnistylesComponent =<TProps extends Record<string, any>, TMap
 
                     stylesRef.current = {
                         ...stylesRef.current,
-                        [propName]: props[propName]
+                        [propName]: narrowedProps[propName]
                     }
                 }
             })
@@ -35,14 +37,14 @@ export const createUnistylesComponent =<TProps extends Record<string, any>, TMap
 
         useEffect(() => {
             const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
-                const componentDependencies = (props.style?.__proto__.uni__dependencies || mappings?.(theme).style?.__proto__.uni__dependencies) as Array<UnistyleDependency>
+                const componentDependencies = (narrowedProps.style?.__proto__.uni__dependencies || mappings?.(theme).style?.__proto__.uni__dependencies) as Array<UnistyleDependency>
 
                 if (dependencies.includes(UnistyleDependency.Theme) && (!componentDependencies ||componentDependencies.includes(UnistyleDependency.Theme))) {
                     setTheme(UnistylesRuntime.getTheme())
 
                     // override with Unistyles styles
                     SUPPORTED_STYLE_PROPS.forEach(propName => {
-                        if (props?.[propName]) {
+                        if (narrowedProps?.[propName]) {
                             stylesRef.current = {
                                 ...stylesRef.current,
                                 // @ts-expect-error - this is hidden from TS
@@ -65,26 +67,17 @@ export const createUnistylesComponent =<TProps extends Record<string, any>, TMap
         }, [])
 
         const mergedProps = mappings?.(theme) as Record<string, any> ?? {}
-
-        Object.keys(props).forEach(key => {
-            if (key in mergedProps) {
-                mergedProps[key] = Object.assign(props[key as keyof typeof props], mergedProps[key])
-
-                return
-            }
-
-            mergedProps[key] = props[key as keyof typeof props]
-        })
+        const finalProps = deepMergeObjects(mergedProps, props)
 
         // override with Unistyles styles
         SUPPORTED_STYLE_PROPS.forEach(propName => {
-            if (mergedProps[propName]) {
-                mergedProps[propName] = stylesRef.current[propName]
+            if (finalProps[propName]) {
+                finalProps[propName] = stylesRef.current[propName]
             }
         })
 
         isForcedRef.current = false
 
-        return <Component {...mergedProps as TProps} />
-    }
+        return <Component {...finalProps as TProps} ref={ref} />
+    })
 }