react-native-unistyles 3.0.0-nightly-20250127 → 3.0.0-nightly-20250129

package/lib/typescript/src/components/native/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/Text.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI;;2CAAqC,CAAA"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/Text.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,KAAqC,CAAA"}

package/lib/typescript/src/components/native/TextInput.d.ts

@@ -1,4 +1,2 @@
-export declare const TextInput: import("react").ForwardRefExoticComponent<{
-    style?: import("../../types").UnistylesValues | Array<import("../../types").UnistylesValues>;
-} & import("react").RefAttributes<unknown>>;
+export declare const TextInput: any;
 //# sourceMappingURL=TextInput.d.ts.map

package/lib/typescript/src/components/native/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/TextInput.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;2CAA0C,CAAA"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/TextInput.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,KAA0C,CAAA"}

package/lib/typescript/src/components/native/TouchableHighlight.d.ts

@@ -1,4 +1,2 @@
-export declare const TouchableHighlight: import("react").ForwardRefExoticComponent<{
-    style?: import("../../types").UnistylesValues | Array<import("../../types").UnistylesValues>;
-} & import("react").RefAttributes<unknown>>;
+export declare const TouchableHighlight: any;
 //# sourceMappingURL=TouchableHighlight.d.ts.map

package/lib/typescript/src/components/native/TouchableHighlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchableHighlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/TouchableHighlight.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;2CAAmD,CAAA"}
+{"version":3,"file":"TouchableHighlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/TouchableHighlight.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,KAAmD,CAAA"}

package/lib/typescript/src/components/native/TouchableOpacity.d.ts

@@ -1,4 +1,2 @@
-export declare const TouchableOpacity: import("react").ForwardRefExoticComponent<{
-    style?: import("../../types").UnistylesValues | Array<import("../../types").UnistylesValues>;
-} & import("react").RefAttributes<unknown>>;
+export declare const TouchableOpacity: any;
 //# sourceMappingURL=TouchableOpacity.d.ts.map

package/lib/typescript/src/components/native/TouchableOpacity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchableOpacity.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/TouchableOpacity.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB;;2CAAiD,CAAA"}
+{"version":3,"file":"TouchableOpacity.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/TouchableOpacity.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,KAAiD,CAAA"}

package/lib/typescript/src/components/native/View.d.ts

@@ -1,4 +1,2 @@
-export declare const View: import("react").ForwardRefExoticComponent<{
-    style?: import("../../types").UnistylesValues | Array<import("../../types").UnistylesValues>;
-} & import("react").RefAttributes<unknown>>;
+export declare const View: any;
 //# sourceMappingURL=View.d.ts.map

package/lib/typescript/src/components/native/View.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/View.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI;;2CAAqC,CAAA"}
+{"version":3,"file":"View.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/View.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,KAAqC,CAAA"}

package/lib/typescript/src/components/native/VirtualizedList.d.ts

@@ -1,4 +1,2 @@
-export declare const VirtualizedList: import("react").ForwardRefExoticComponent<{
-    style?: import("../../types").UnistylesValues | Array<import("../../types").UnistylesValues>;
-} & import("react").RefAttributes<unknown>>;
+export declare const VirtualizedList: any;
 //# sourceMappingURL=VirtualizedList.d.ts.map

package/lib/typescript/src/components/native/VirtualizedList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedList.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/VirtualizedList.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe;;2CAAgD,CAAA"}
+{"version":3,"file":"VirtualizedList.d.ts","sourceRoot":"","sources":["../../../../../src/components/native/VirtualizedList.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,KAAgD,CAAA"}

package/lib/typescript/src/core/createUnistylesElement.d.ts

@@ -1,8 +1,2 @@
-import React from 'react';
-import type { UnistylesValues } from '../types';
-type ComponentProps = {
-    style?: UnistylesValues | Array<UnistylesValues>;
-};
-export declare const createUnistylesElement: (Component: any) => React.ForwardRefExoticComponent<ComponentProps & React.RefAttributes<unknown>>;
-export {};
+export declare const createUnistylesElement: (Component: any) => any;
 //# sourceMappingURL=createUnistylesElement.d.ts.map

package/lib/typescript/src/core/createUnistylesElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createUnistylesElement.d.ts","sourceRoot":"","sources":["../../../../src/core/createUnistylesElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM/C,KAAK,cAAc,GAAG;IAClB,KAAK,CAAC,EAAE,eAAe,GAAG,KAAK,CAAC,eAAe,CAAC,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,sBAAsB,cAAe,GAAG,mFA+BnD,CAAA"}
+{"version":3,"file":"createUnistylesElement.d.ts","sourceRoot":"","sources":["../../../../src/core/createUnistylesElement.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,sBAAsB,cAAe,GAAG,QAmCpD,CAAA"}

package/lib/typescript/src/core/createUnistylesElement.native.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-export declare const createUnistylesElement: (Component: any) => React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export declare const createUnistylesElement: (Component: any) => any;
 //# sourceMappingURL=createUnistylesElement.native.d.ts.map

package/lib/typescript/src/core/createUnistylesElement.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createUnistylesElement.native.d.ts","sourceRoot":"","sources":["../../../../src/core/createUnistylesElement.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAkBtD,eAAO,MAAM,sBAAsB,cAAe,GAAG,kEA2BnD,CAAA"}
+{"version":3,"file":"createUnistylesElement.native.d.ts","sourceRoot":"","sources":["../../../../src/core/createUnistylesElement.native.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,sBAAsB,cAAe,GAAG,QA+BpD,CAAA"}

package/lib/typescript/src/core/createUnistylesImageBackground.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
-import type { ImageBackground, ImageBackgroundProps } from 'react-native';
-export declare const createUnistylesImageBackground: (Component: typeof ImageBackground) => React.ForwardRefExoticComponent<ImageBackgroundProps & React.RefAttributes<ImageBackground>>;
+import type { ImageBackground } from 'react-native';
+export declare const createUnistylesImageBackground: (Component: typeof ImageBackground) => any;
 //# sourceMappingURL=createUnistylesImageBackground.d.ts.map

package/lib/typescript/src/core/createUnistylesImageBackground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createUnistylesImageBackground.d.ts","sourceRoot":"","sources":["../../../../src/core/createUnistylesImageBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAS,eAAe,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AAKhF,eAAO,MAAM,8BAA8B,cAAe,OAAO,eAAe,iGAsC9E,CAAA"}
+{"version":3,"file":"createUnistylesImageBackground.d.ts","sourceRoot":"","sources":["../../../../src/core/createUnistylesImageBackground.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAS,eAAe,EAAwB,MAAM,cAAc,CAAA;AAMhF,eAAO,MAAM,8BAA8B,cAAe,OAAO,eAAe,QA0C/E,CAAA"}

package/lib/typescript/src/utils.d.ts

@@ -1,3 +1,4 @@
 export declare const isDefined: <T>(value: T) => value is NonNullable<T>;
 export declare const deepMergeObjects: <T extends Record<PropertyKey, any>>(...sources: Array<T>) => T;
+export declare const copyComponentProperties: (Component: any, UnistylesComponent: any) => any;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,CAAC,KAAG,KAAK,IAAI,WAAW,CAAC,CAAC,CAA0C,CAAA;AAExG,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,CAAC,WAAW,EAAE,GAAG,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,MAuBxF,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,CAAC,KAAG,KAAK,IAAI,WAAW,CAAC,CAAC,CAA0C,CAAA;AAExG,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,CAAC,WAAW,EAAE,GAAG,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,MAuBxF,CAAA;AAED,eAAO,MAAM,uBAAuB,cAAe,GAAG,sBAAsB,GAAG,QAe9E,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"unistyle.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/unistyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAMpG,eAAO,MAAM,aAAa,WAAY,WAAW,qBAQhD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,iBAAiB,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;CAC/D,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,UAAU,CAAC,WAAW,eAAe,MAanE,CAAA;AAED,eAAO,MAAM,cAAc,WAAY,GAAG;;aAYzC,CAAA;AAED,eAAO,MAAM,kBAAkB,WAAY,eAAe,OAUzD,CAAA;AAED,eAAO,MAAM,YAAY,YAAa,WAAW,YAAoC,CAAA;AAErF,eAAO,MAAM,aAAa,UAAW,MAAM,kBAAkB,KAAK,CAAC,MAAM,CAAC,WA6BzE,CAAA;AAED,eAAO,MAAM,2BAA2B,UAAW,GAAG,yBAQrD,CAAA"}
+{"version":3,"file":"unistyle.d.ts","sourceRoot":"","sources":["../../../../../src/web/utils/unistyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAMpG,eAAO,MAAM,aAAa,WAAY,WAAW,qBAQhD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC1B,iBAAiB,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAA;CAC/D,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,UAAU,CAAC,WAAW,eAAe,MAanE,CAAA;AAED,eAAO,MAAM,cAAc,WAAY,GAAG;;aAkBzC,CAAA;AAED,eAAO,MAAM,kBAAkB,WAAY,eAAe,OAUzD,CAAA;AAED,eAAO,MAAM,YAAY,YAAa,WAAW,YAAoC,CAAA;AAErF,eAAO,MAAM,aAAa,UAAW,MAAM,kBAAkB,KAAK,CAAC,MAAM,CAAC,WA6BzE,CAAA;AAED,eAAO,MAAM,2BAA2B,UAAW,GAAG,yBAQrD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.0.0-nightly-20250127",
+  "version": "3.0.0-nightly-20250129",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -82,6 +82,8 @@
   },
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "7.25.9",
+    "@babel/preset-flow": "7.25.9",
+    "@babel/preset-typescript": "7.26.0",
     "@biomejs/biome": "1.9.4",
     "@commitlint/config-conventional": "19.6.0",
     "@react-native/normalize-colors": "0.77.0",

package/plugin/consts.js

@@ -0,0 +1,43 @@
+const REACT_NATIVE_COMPONENT_NAMES = [
+    'ActivityIndicator',
+    'View',
+    'Text',
+    'Image',
+    'ImageBackground',
+    'KeyboardAvoidingView',
+    'Pressable',
+    'ScrollView',
+    'FlatList',
+    'SectionList',
+    'Switch',
+    'TextInput',
+    'RefreshControl',
+    'TouchableHighlight',
+    'TouchableOpacity',
+    'VirtualizedList',
+    'Animated'
+    // Modal - there is no exposed native handle
+    // TouchableWithoutFeedback - can't accept a ref
+]
+
+// auto replace RN imports to Unistyles imports under these paths
+// our implementation simply borrows 'ref' to register it in ShadowRegistry
+// so we won't affect anyone's implementation
+const REPLACE_WITH_UNISTYLES_PATHS = [
+    'react-native-reanimated/src/component',
+    'react-native-gesture-handler/src/components'
+]
+
+// this is more powerful API as it allows to convert unmatched imports to Unistyles
+// { path: string, imports: Array<{ name: string, isDefault: boolean, path: string, mapTo: string }> }
+// name <- target import name
+// isDefault <- is the import default?
+// path <- path to the target import
+// mapTo <- name of the Unistyles component
+const REPLACE_WITH_UNISTYLES_EXOTIC_PATHS = []
+
+module.exports = {
+    REACT_NATIVE_COMPONENT_NAMES,
+    REPLACE_WITH_UNISTYLES_PATHS,
+    REPLACE_WITH_UNISTYLES_EXOTIC_PATHS
+}

package/plugin/exotic.js

@@ -0,0 +1,42 @@
+function handleExoticImport(t, path, state, exoticImport) {
+    const specifiers = path.node.specifiers
+    const source = path.node.source
+
+    if (path.node.importKind !== 'value') {
+        return
+    }
+
+    specifiers.forEach(specifier => {
+        for (const rule of exoticImport.imports) {
+            const hasMatchingImportType = !rule.isDefault || t.isImportDefaultSpecifier(specifier)
+            const hasMatchingImportName = rule.name === specifier.local.name
+            const hasMatchingPath = rule.path === source.value
+
+            if (!hasMatchingImportType || !hasMatchingImportName || !hasMatchingPath) {
+                continue
+            }
+
+            const newImport = t.importDeclaration(
+                [t.importSpecifier(t.identifier(rule.mapTo), t.identifier(rule.mapTo))],
+                t.stringLiteral(state.opts.isLocal
+                    ? state.file.opts.filename.split('react-native-unistyles').at(0).concat(`react-native-unistyles/components/native/${rule.mapTo}`)
+                    : `react-native-unistyles/components/native/${rule.mapTo}`
+                )
+            )
+
+            // remove old import
+            if (t.isImportDefaultSpecifier(specifier)) {
+                path.replaceWith(newImport)
+            } else {
+                path.node.specifiers = specifiers.filter(s => s !== specifier)
+                path.unshift(newImport)
+            }
+
+            return
+        }
+    })
+}
+
+module.exports = {
+    handleExoticImport
+}

package/plugin/index.js

@@ -2,35 +2,8 @@ const { addUnistylesImport, isInsideNodeModules } = require('./import')
 const { hasStringRef } = require('./ref')
 const { isUnistylesStyleSheet, analyzeDependencies, addStyleSheetTag, getUnistyles, isKindOfStyleSheet } = require('./stylesheet')
 const { extractVariants } = require('./variants')
-
-const reactNativeComponentNames = [
-    'ActivityIndicator',
-    'View',
-    'Text',
-    'Image',
-    'ImageBackground',
-    'KeyboardAvoidingView',
-    'Pressable',
-    'ScrollView',
-    'FlatList',
-    'SectionList',
-    'Switch',
-    'TextInput',
-    'RefreshControl',
-    'TouchableHighlight',
-    'TouchableOpacity',
-    'VirtualizedList',
-    // Modal - there is no exposed native handle
-    // TouchableWithoutFeedback - can't accept a ref
-]
-
-// auto replace RN imports to Unistyles imports under these paths
-// our implementation simply borrows 'ref' to register it in ShadowRegistry
-// so we won't affect anyone's implementation
-const REPLACE_WITH_UNISTYLES_PATHS = [
-    'react-native-reanimated/src/component',
-    'react-native-gesture-handler/src/components'
-]
+const { REACT_NATIVE_COMPONENT_NAMES, REPLACE_WITH_UNISTYLES_PATHS, REPLACE_WITH_UNISTYLES_EXOTIC_PATHS } = require('./consts')
+const { handleExoticImport } = require('./exotic')
 
 module.exports = function ({ types: t }) {
     return {
@@ -107,6 +80,13 @@ module.exports = function ({ types: t }) {
             },
             /** @param {import('./index').UnistylesPluginPass} state */
             ImportDeclaration(path, state) {
+                const exoticImport = REPLACE_WITH_UNISTYLES_EXOTIC_PATHS
+                    .find(exotic => state.filename.includes(exotic.path))
+
+                if (exoticImport) {
+                    return handleExoticImport(t, path, state, exoticImport)
+                }
+
                 if (isInsideNodeModules(state) && !state.file.replaceWithUnistyles) {
                     return
                 }
@@ -123,7 +103,7 @@ module.exports = function ({ types: t }) {
 
                 if (importSource === 'react-native') {
                     path.node.specifiers.forEach(specifier => {
-                        if (specifier.imported && reactNativeComponentNames.includes(specifier.imported.name)) {
+                        if (specifier.imported && REACT_NATIVE_COMPONENT_NAMES.includes(specifier.imported.name)) {
                             state.reactNativeImports[specifier.local.name] = specifier.imported.name
                         }
                     })

package/plugin/variants.js

@@ -15,7 +15,7 @@ function extractVariants(t, path, state) {
         return (
             t.isIdentifier(variant.expression.callee.object, { name: calleeName }) &&
             t.isIdentifier(variant.expression.callee.property, { name: 'useVariants' }) &&
-            t.isObjectExpression(variant.expression.arguments[0])
+            variant.expression.arguments.length === 1
         )
     })
 

package/src/components/native/Animated.tsx

@@ -0,0 +1,17 @@
+import { Animated as RNAnimated } from 'react-native'
+import { View } from './View'
+import { Text } from './Text'
+import { FlatList } from './FlatList'
+import { Image } from './Image'
+import { ScrollView } from './ScrollView'
+import { SectionList } from './SectionList'
+
+export const Animated = {
+    ...RNAnimated,
+    View: RNAnimated.createAnimatedComponent(View),
+    Text: RNAnimated.createAnimatedComponent(Text),
+    FlatList: RNAnimated.createAnimatedComponent(FlatList),
+    Image: RNAnimated.createAnimatedComponent(Image),
+    ScrollView: RNAnimated.createAnimatedComponent(ScrollView),
+    SectionList: RNAnimated.createAnimatedComponent(SectionList)
+}

package/src/components/native/ImageBackground.tsx

@@ -5,13 +5,14 @@ import type { UnistylesValues } from '../../types'
 import { getClassName } from '../../core'
 import { isServer } from '../../web/utils'
 import { UnistylesShadowRegistry } from '../../web'
+import { copyComponentProperties } from '../../utils'
 
 type Props = {
     style?: UnistylesValues
     imageStyle?: UnistylesValues
 }
 
-export const ImageBackground = forwardRef<unknown, Props>((props, forwardedRef) => {
+const UnistylesImageBackground = forwardRef<unknown, Props>((props, forwardedRef) => {
     let storedRef: NativeImageBackground | null = null
     let storedImageRef: NativeImageBackground | null = null
     const styleClassNames = getClassName(props.style)
@@ -54,3 +55,5 @@ export const ImageBackground = forwardRef<unknown, Props>((props, forwardedRef)
         />
     )
 })
+
+export const ImageBackground = copyComponentProperties(NativeImageBackground, UnistylesImageBackground)

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

@@ -8,6 +8,22 @@ type PressableProps = Props & {
     variants?: Record<string, string | boolean>
 }
 
+const getStyles = (styleProps: Record<string, any> = {}) => {
+    const unistyleKey = Object
+        .keys(styleProps)
+        .find(key => key.startsWith('unistyles-'))
+
+    if (!unistyleKey) {
+        return styleProps
+    }
+
+    return {
+        // styles without C++ state
+        ...styleProps[unistyleKey].uni__getStyles(),
+        [unistyleKey]: styleProps[unistyleKey].uni__getStyles()
+    }
+}
+
 export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
     const storedRef = useRef<View | null>()
 
@@ -28,7 +44,7 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                     ? style({ pressed: false })
                     : style
 
-                // @ts-expect-error web types are not compatible with RN styles
+                // @ts-expect-error - this is hidden from TS
                 UnistylesShadowRegistry.add(ref, unistyles)
 
                 if (ref) {
@@ -40,12 +56,14 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
             style={state => {
                 const unistyles = typeof style === 'function'
                     ? style(state)
-                    : style
+                    : getStyles(style as unknown as Record<string, any>)
 
                 if (!storedRef.current) {
                     return unistyles
                 }
 
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.remove(storedRef.current)
                 // @ts-expect-error - this is hidden from TS
                 UnistylesShadowRegistry.add(storedRef.current, unistyles)
 

package/src/core/createUnistylesElement.native.tsx

@@ -2,6 +2,7 @@ import React, { useLayoutEffect, useRef } from 'react'
 import { UnistylesShadowRegistry } from '../specs'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
+import { copyComponentProperties } from '../utils'
 
 const getNativeRef = (Component: any, ref: any) => {
     switch (Component.name) {
@@ -16,31 +17,35 @@ const getNativeRef = (Component: any, ref: any) => {
     }
 }
 
-export const createUnistylesElement = (Component: any) => React.forwardRef((props, forwardedRef) => {
-    const storedRef = useRef<unknown>(null)
+export const createUnistylesElement = (Component: any) => {
+    const UnistylesComponent = React.forwardRef((props, forwardedRef) => {
+        const storedRef = useRef<unknown>(null)
 
-    useLayoutEffect(() => {
-        return () => {
-            if (storedRef.current) {
-                // @ts-ignore
-                UnistylesShadowRegistry.remove(storedRef.current)
+        useLayoutEffect(() => {
+            return () => {
+                if (storedRef.current) {
+                    // @ts-ignore
+                    UnistylesShadowRegistry.remove(storedRef.current)
+                }
             }
-        }
-    }, [])
+        }, [])
 
-    return (
-        <Component
-            {...props}
-            ref={(ref: unknown) => {
-                if (ref) {
-                    storedRef.current = getNativeRef(Component, ref)
-                }
+        return (
+            <Component
+                {...props}
+                ref={(ref: unknown) => {
+                    if (ref) {
+                        storedRef.current = getNativeRef(Component, ref)
+                    }
 
-                passForwardedRef(props, ref, forwardedRef)
+                    passForwardedRef(props, ref, forwardedRef)
 
-                // @ts-ignore we don't know the type of the component
-                maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
-            }}
-        />
-    )
-})
+                    // @ts-ignore we don't know the type of the component
+                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+                }}
+            />
+        )
+    })
+
+    return copyComponentProperties(Component, UnistylesComponent)
+}

package/src/core/createUnistylesElement.tsx

@@ -4,40 +4,45 @@ import { getClassName } from './getClassname'
 import { isServer } from '../web/utils'
 import { UnistylesShadowRegistry } from '../web'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
+import { copyComponentProperties } from '../utils'
 
 type ComponentProps = {
     style?: UnistylesValues | Array<UnistylesValues>
 }
 
-export const createUnistylesElement = (Component: any) => React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
-    let storedRef: HTMLElement | null = null
-    const classNames = getClassName(props.style)
+export const createUnistylesElement = (Component: any) => {
+    const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
+        let storedRef: HTMLElement | null = null
+        const classNames = getClassName(props.style)
 
-    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)
+        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) {
+                    if (!ref) {
+                        // @ts-expect-error hidden from TS
+                        UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
+                    }
+
+                    storedRef = 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
-                }
-            }}
-        />
-    )
-})
+                    UnistylesShadowRegistry.add(ref, classNames?.hash)
+
+                    if (typeof forwardedRef === 'function') {
+                        return forwardedRef(ref)
+                    }
+
+                    if (forwardedRef) {
+                        forwardedRef.current = ref
+                    }
+                }}
+            />
+        )
+    })
+
+    return copyComponentProperties(Component, UnistylesComponent)
+}

package/src/core/createUnistylesImageBackground.tsx

@@ -3,43 +3,48 @@ import type { Image, ImageBackground, ImageBackgroundProps } from 'react-native'
 import { UnistylesShadowRegistry } from '../specs'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
+import { copyComponentProperties } from '../utils'
 
-export const createUnistylesImageBackground = (Component: typeof ImageBackground) => React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
-    const storedImageRef = useRef<Image | null>(null)
+export const createUnistylesImageBackground = (Component: typeof ImageBackground) => {
+    const UnistylesImageBackground = React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
+        const storedImageRef = useRef<Image | null>(null)
 
-    useLayoutEffect(() => {
-        return () => {
-            if (storedImageRef.current) {
-                // @ts-ignore
-                UnistylesShadowRegistry.remove(storedImageRef.current)
+        useLayoutEffect(() => {
+            return () => {
+                if (storedImageRef.current) {
+                    // @ts-ignore
+                    UnistylesShadowRegistry.remove(storedImageRef.current)
+                }
             }
-        }
-    }, [])
+        }, [])
 
-    // @ts-expect-error we don't know the type of the component
-    maybeWarnAboutMultipleUnistyles(props.style, 'ImageBackground')
-    // @ts-ignore we don't know the type of the component
-    maybeWarnAboutMultipleUnistyles(props.imageStyle, 'ImageBackground')
+        // @ts-expect-error we don't know the type of the component
+        maybeWarnAboutMultipleUnistyles(props.style, 'ImageBackground')
+        // @ts-ignore we don't know the type of the component
+        maybeWarnAboutMultipleUnistyles(props.imageStyle, 'ImageBackground')
 
-    return (
-        <Component
-            {...props}
-            ref={ref => {
-                passForwardedRef(props, ref, forwardedRef)
+        return (
+            <Component
+                {...props}
+                ref={ref => {
+                    passForwardedRef(props, ref, forwardedRef)
 
-                return () => {
-                    // @ts-ignore
-                    UnistylesShadowRegistry.remove(ref)
-                }
-            }}
-            imageRef={ref => {
-                if (ref) {
-                    storedImageRef.current = ref
-                }
+                    return () => {
+                        // @ts-ignore
+                        UnistylesShadowRegistry.remove(ref)
+                    }
+                }}
+                imageRef={ref => {
+                    if (ref) {
+                        storedImageRef.current = ref
+                    }
+
+                    // @ts-expect-error web types are not compatible with RN styles
+                    UnistylesShadowRegistry.add(ref, props.imageStyle)
+                }}
+            />
+        )
+    })
 
-                // @ts-expect-error web types are not compatible with RN styles
-                UnistylesShadowRegistry.add(ref, props.imageStyle)
-            }}
-        />
-    )
-})
+    return copyComponentProperties(Component, UnistylesImageBackground)
+}