react-native-unistyles 3.5.3 → 3.7.0

package/src/components/NamedTheme.tsx

@@ -17,6 +17,11 @@ interface NamedThemeProps extends PropsWithChildren {
 export const NamedTheme: React.FunctionComponent<NamedThemeProps> = ({ name, children, previousScopedTheme }) => {
     const scope = useMemo(() => ({ name }), [name])
 
+    useLayoutEffect(() => {
+        // this will affect only scoped styles as other styles are not yet mounted
+        UnistylesShadowRegistry.flush()
+    })
+
     const mappedChildren = [
         <ApplyScopedTheme key="apply" name={name} />,
         <ScopedThemeContext.Provider key="scope" value={scope}>
@@ -25,10 +30,5 @@ export const NamedTheme: React.FunctionComponent<NamedThemeProps> = ({ name, chi
         <ApplyScopedTheme key="dispose" name={previousScopedTheme as keyof UnistylesThemes | undefined} />,
     ]
 
-    useLayoutEffect(() => {
-        // this will affect only scoped styles as other styles are not yet mounted
-        UnistylesShadowRegistry.flush()
-    })
-
     return <React.Fragment>{mappedChildren}</React.Fragment>
 }

package/src/components/ScopedThemeContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react'
+import { type Context, createContext } from 'react'
 
 import type { UnistylesThemes } from '../global'
 
@@ -6,4 +6,8 @@ export type Scope = {
     name: keyof UnistylesThemes | undefined
 }
 
-export const ScopedThemeContext = createContext<Scope | null>(null)
+// React Server Components load a React build without createContext (or useContext). The Next.js App Router
+// setup imports Unistyles from the root layout, a server component, and nothing can read this context there.
+export const ScopedThemeContext = (
+    typeof createContext === 'function' ? createContext<Scope | null>(null) : null
+) as Context<Scope | null>

package/src/components/native/deep/ActivityIndicator.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the ActivityIndicator module of react-native or react-native-web here
+export { ActivityIndicator, ActivityIndicator as default } from '../ActivityIndicator'

package/src/components/native/deep/Animated.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the Animated module of react-native or react-native-web here
+export { Animated, Animated as default } from '../Animated'

package/src/components/native/deep/FlatList.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the FlatList module of react-native or react-native-web here
+export { FlatList, FlatList as default } from '../FlatList'

package/src/components/native/deep/Image.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the Image module of react-native or react-native-web here
+export { Image, Image as default } from '../Image'

package/src/components/native/deep/ImageBackground.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the ImageBackground module of react-native or react-native-web here
+export { ImageBackground, ImageBackground as default } from '../ImageBackground'

package/src/components/native/deep/KeyboardAvoidingView.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the KeyboardAvoidingView module of react-native or react-native-web here
+export { KeyboardAvoidingView, KeyboardAvoidingView as default } from '../KeyboardAvoidingView'

package/src/components/native/deep/Pressable.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the Pressable module of react-native or react-native-web here
+export { Pressable, Pressable as default } from '../Pressable'

package/src/components/native/deep/RefreshControl.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the RefreshControl module of react-native or react-native-web here
+export { RefreshControl, RefreshControl as default } from '../RefreshControl'

package/src/components/native/deep/SafeAreaView.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the SafeAreaView module of react-native or react-native-web here
+export { SafeAreaView, SafeAreaView as default } from '../SafeAreaView'

package/src/components/native/deep/ScrollView.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the ScrollView module of react-native or react-native-web here
+export { ScrollView, ScrollView as default } from '../ScrollView'

package/src/components/native/deep/SectionList.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the SectionList module of react-native or react-native-web here
+export { SectionList, SectionList as default } from '../SectionList'

package/src/components/native/deep/Switch.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the Switch module of react-native or react-native-web here
+export { Switch, Switch as default } from '../Switch'

package/src/components/native/deep/Text.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the Text module of react-native or react-native-web here
+export { Text, Text as default } from '../Text'

package/src/components/native/deep/TextInput.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the TextInput module of react-native or react-native-web here
+export { TextInput, TextInput as default } from '../TextInput'

package/src/components/native/deep/TextNativeComponent.ts

@@ -0,0 +1,5 @@
+// react-native-unistyles/metro resolves direct imports of react-native/Libraries/Text/TextNativeComponent here,
+// its other exports (eg. NativeVirtualText) stay untouched
+// @ts-ignore deep imports are typed only by some React Native versions
+export * from 'react-native/Libraries/Text/TextNativeComponent'
+export { NativeText } from '../NativeText'

package/src/components/native/deep/TouchableHighlight.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the TouchableHighlight module of react-native or react-native-web here
+export { TouchableHighlight, TouchableHighlight as default } from '../TouchableHighlight'

package/src/components/native/deep/TouchableOpacity.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the TouchableOpacity module of react-native or react-native-web here
+export { TouchableOpacity, TouchableOpacity as default } from '../TouchableOpacity'

package/src/components/native/deep/View.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the View module of react-native or react-native-web here
+export { View, View as default } from '../View'

package/src/components/native/deep/ViewNativeComponent.ts

@@ -0,0 +1,5 @@
+// react-native-unistyles/metro resolves direct imports of react-native/Libraries/Components/View/ViewNativeComponent here,
+// its other exports stay untouched
+// @ts-ignore deep imports are typed only by some React Native versions
+export * from 'react-native/Libraries/Components/View/ViewNativeComponent'
+export { NativeView as default } from '../NativeView'

package/src/components/native/deep/VirtualizedList.ts

@@ -0,0 +1,2 @@
+// react-native-unistyles/metro resolves direct imports of the VirtualizedList module of react-native or react-native-web here
+export { VirtualizedList, VirtualizedList as default } from '../VirtualizedList'

package/src/components/native/index.ts

@@ -0,0 +1,41 @@
+// react-native-unistyles/metro resolves every `react-native` import (react-native-web on web) to this module,
+// so it exposes every export of react-native and swaps the components Unistyles can update.
+// Imports from this folder are Unistyles' own, they reach the real react-native
+const ReactNative: Record<string, unknown> = require('react-native')
+
+// lazy, like react-native's own exports
+const UNISTYLES_COMPONENTS: Record<string, () => unknown> = {
+    ActivityIndicator: () => require('./ActivityIndicator').ActivityIndicator,
+    Animated: () => require('./Animated').Animated,
+    FlatList: () => require('./FlatList').FlatList,
+    Image: () => require('./Image').Image,
+    ImageBackground: () => require('./ImageBackground').ImageBackground,
+    KeyboardAvoidingView: () => require('./KeyboardAvoidingView').KeyboardAvoidingView,
+    Pressable: () => require('./Pressable').Pressable,
+    RefreshControl: () => require('./RefreshControl').RefreshControl,
+    SafeAreaView: () => require('./SafeAreaView').SafeAreaView,
+    ScrollView: () => require('./ScrollView').ScrollView,
+    SectionList: () => require('./SectionList').SectionList,
+    Switch: () => require('./Switch').Switch,
+    Text: () => require('./Text').Text,
+    TextInput: () => require('./TextInput').TextInput,
+    TouchableHighlight: () => require('./TouchableHighlight').TouchableHighlight,
+    TouchableOpacity: () => require('./TouchableOpacity').TouchableOpacity,
+    View: () => require('./View').View,
+    VirtualizedList: () => require('./VirtualizedList').VirtualizedList,
+    unstable_NativeText: () => require('./NativeText').NativeText,
+    unstable_NativeView: () => require('./NativeView').NativeView,
+}
+
+// Object.keys doesn't call react-native's getters. Unistyles components are added even if missing,
+// react-native-web and React Native before 0.83 don't export unstable_NativeView / unstable_NativeText
+const exportNames = new Set(Object.keys(ReactNative).concat(Object.keys(UNISTYLES_COMPONENTS)))
+
+exportNames.forEach((name) => {
+    // CommonJS without the __esModule flag, like react-native, so a default import still gets every export
+    // @ts-ignore module is provided by Metro
+    Object.defineProperty(module.exports, name, {
+        enumerable: true,
+        get: UNISTYLES_COMPONENTS[name] ?? (() => ReactNative[name]),
+    })
+})

package/src/core/createUnistylesActivityIndicator.tsx

@@ -2,18 +2,21 @@ import type { ActivityIndicator } from 'react-native'
 
 import React, { useContext } from 'react'
 
-import { isAndroid } from '../common'
 import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
+import { Fiber } from '../unifiber/src'
 import { copyComponentProperties } from '../utils'
+import { hasUnistyles } from './hasUnistyles'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
-const getWrapperHandle = (ref: any) => {
-    const spinner = ref?.__internalInstanceHandle
+const { getHostFor, getParentHost } = Fiber
+
+const getWrapperHandle = (ref: unknown) => {
+    const spinner = getHostFor(ref)
 
     return {
-        __internalInstanceHandle: isAndroid ? spinner?.return?.return : spinner?.return,
+        __internalInstanceHandle: spinner && getParentHost(spinner),
     }
 }
 
@@ -21,6 +24,10 @@ export const createUnistylesActivityIndicator = (Component: typeof ActivityIndic
     const UnistylesActivityIndicator = (props: any) => {
         const scope = useContext(ScopedThemeContext)
 
+        if (!hasUnistyles(props.style)) {
+            return <Component {...props} />
+        }
+
         return (
             <Component
                 {...props}

package/src/core/createUnistylesElement.native.tsx

@@ -5,6 +5,7 @@ import React, { useContext, useRef } from 'react'
 import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
+import { hasUnistyles } from './hasUnistyles'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
@@ -13,6 +14,10 @@ export const createUnistylesElement = (Component: any) => {
         const scrollViewRef = useRef<ScrollView>(null)
         const scope = useContext(ScopedThemeContext)
 
+        if (!hasUnistyles(props.style)) {
+            return <Component {...props} />
+        }
+
         return (
             <Component
                 {...props}

package/src/core/createUnistylesImageBackground.tsx

@@ -5,11 +5,16 @@ import React, { useContext } from 'react'
 import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
+import { hasUnistyles } from './hasUnistyles'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
 export const createUnistylesImageBackground = (Component: typeof ImageBackground) => {
-    const UnistylesImageBackground = React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
+    const UnistylesImageBackground = ({
+        ref,
+        ...props
+    }: ImageBackgroundProps & { ref?: React.ForwardedRef<ImageBackground> }) => {
+        const forwardedRef: React.ForwardedRef<ImageBackground> = ref ?? null
         const scope = useContext(ScopedThemeContext)
 
         // @ts-expect-error we don't know the type of the component
@@ -17,35 +22,38 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
         // @ts-ignore we don't know the type of the component
         maybeWarnAboutMultipleUnistyles(props.imageStyle, 'ImageBackground')
 
+        const linkRef = (ref: ImageBackground | null) => {
+            return passForwardedRef(
+                ref,
+                forwardedRef,
+                () => {
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.add(ref, props.style, scope)
+                },
+                () => {
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.remove(ref)
+                },
+            )
+        }
+        const linkImageRef = (ref: unknown) => {
+            // @ts-expect-error web types are not compatible with RN styles
+            UnistylesShadowRegistry.add(ref, props.imageStyle, scope)
+
+            return () => {
+                // @ts-ignore this is hidden from TS
+                UnistylesShadowRegistry.remove(ref)
+            }
+        }
+
         return (
             <Component
                 {...props}
-                ref={(ref) => {
-                    return passForwardedRef(
-                        ref,
-                        forwardedRef,
-                        () => {
-                            // @ts-expect-error - this is hidden from TS
-                            UnistylesShadowRegistry.add(ref, props.style, scope)
-                        },
-                        () => {
-                            // @ts-expect-error - this is hidden from TS
-                            UnistylesShadowRegistry.remove(ref)
-                        },
-                    )
-                }}
-                imageRef={(ref) => {
-                    // @ts-expect-error web types are not compatible with RN styles
-                    UnistylesShadowRegistry.add(ref, props.imageStyle, scope)
-
-                    return () => {
-                        // @ts-ignore this is hidden from TS
-                        UnistylesShadowRegistry.remove(ref)
-                    }
-                }}
+                ref={hasUnistyles(props.style) ? linkRef : forwardedRef}
+                imageRef={hasUnistyles(props.imageStyle) ? linkImageRef : props.imageRef}
             />
         )
-    })
+    }
 
     return copyComponentProperties(Component, UnistylesImageBackground)
 }

package/src/core/createUnistylesTouchableHighlight.tsx

@@ -5,6 +5,7 @@ import React, { useCallback, useContext, useLayoutEffect, useRef, useState } fro
 import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
+import { hasUnistyles } from './hasUnistyles'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
@@ -49,6 +50,10 @@ export const createUnistylesTouchableHighlight = (Component: typeof TouchableHig
             [props, scope],
         )
 
+        if (!hasUnistyles(props.style)) {
+            return <Component {...props} />
+        }
+
         return (
             <Component
                 {...props}

package/src/core/getClassname.ts

@@ -1,7 +1,7 @@
 import type { UnistylesValues } from '../types'
 
 import * as unistyles from '../web/services'
-import { checkForAnimated } from '../web/utils'
+import { checkForAnimated, isGeneratedUnistyle } from '../web/utils'
 
 export const getClassName = (unistyle: UnistylesValues | undefined | Array<UnistylesValues>, forChild?: boolean) => {
     if (!unistyle) {
@@ -11,6 +11,15 @@ export const getClassName = (unistyle: UnistylesValues | undefined | Array<Unist
     const flattenedStyles = Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle]
     const animatedStyles = flattenedStyles.filter(checkForAnimated)
     const regularStyles = flattenedStyles.filter((style) => !checkForAnimated(style))
+    const [firstStyle, ...otherStyles] = regularStyles
+
+    // Already processed by an outer Unistyles component, e.g. createUnistylesElement(Animated.View),
+    // styles added after it (like Reanimated's initial animated values) stay inline
+    if (firstStyle && isGeneratedUnistyle(firstStyle) && firstStyle.hash) {
+        const { hash, injectedClassName } = firstStyle
+
+        return [{ $$css: true, hash, injectedClassName }, otherStyles.concat(animatedStyles)] as const
+    }
 
     const { hash, injectedClassName } = unistyles.services.shadowRegistry.addStyles(regularStyles, forChild)
 

package/src/core/hasUnistyles.ts

@@ -0,0 +1,20 @@
+// whether a style prop (also nested arrays) holds a unistyle, the only styles Unistyles updates
+// a view without one renders like a React Native view, it never links
+export const hasUnistyles = (style: unknown): boolean => {
+    if (Array.isArray(style)) {
+        return style.some(hasUnistyles)
+    }
+
+    if (!style || typeof style !== 'object') {
+        return false
+    }
+
+    // own keys only, like the registry. A unistyle starts with its `unistyles_` key, so it exits early
+    for (const key in style) {
+        if (key.startsWith('unistyles_') && Object.prototype.hasOwnProperty.call(style, key)) {
+            return true
+        }
+    }
+
+    return false
+}

package/src/core/withUnistyles/withUnistyles.native.tsx

@@ -1,10 +1,10 @@
 import React, {
-    forwardRef,
     useContext,
     useEffect,
     type ComponentProps,
     type ComponentRef,
     type ComponentType,
+    type Ref,
 } from 'react'
 
 import type { UnistylesValues } from '../../types'
@@ -12,7 +12,7 @@ import type { Mappings } from './types'
 
 import { ScopedThemeContext } from '../../components/ScopedThemeContext'
 import { type UnistyleDependency, UnistylesShadowRegistry } from '../../specs'
-import { deepMergeObjects } from '../../utils'
+import { deepMergeObjects, isAnimatedStyleHandle } from '../../utils'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 import { maybeWarnAboutMultipleUnistyles } from '../warn'
 
@@ -27,10 +27,30 @@ type UnistylesSecrets = {
 }
 
 type MappedSecrets = {
-    styles: Record<string, any>
+    styles: Record<string, any> | Array<Record<string, any>>
     dependencies: Array<UnistyleDependency>
 }
 
+// Reanimated finds animated styles by their keys, merged with other styles they would hide them
+// so keep every animated style as a separate entry and merge only the styles between them, in order
+const mergeAroundAnimatedStyles = (secrets: Array<UnistylesSecrets>) =>
+    secrets.reduce<Array<Record<string, any>>>((acc, secret) => {
+        const style = secret.uni__getStyles()
+        const lastStyle = acc.at(-1)
+
+        if (isAnimatedStyleHandle(style)) {
+            return acc.concat([style])
+        }
+
+        if (lastStyle && !isAnimatedStyleHandle(lastStyle)) {
+            Object.assign(lastStyle, style)
+
+            return acc
+        }
+
+        return acc.concat([{ ...style }])
+    }, [])
+
 export const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
     const styles = Array.isArray(styleProps) ? styleProps.flat(Infinity) : [styleProps]
 
@@ -48,7 +68,9 @@ export const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets
     }, [])
 
     return {
-        styles: secrets.reduce((acc, secret) => Object.assign(acc, secret.uni__getStyles()), {} as Record<string, any>),
+        styles: styles.some(isAnimatedStyleHandle)
+            ? mergeAroundAnimatedStyles(secrets)
+            : secrets.reduce((acc, secret) => Object.assign(acc, secret.uni__getStyles()), {} as Record<string, any>),
         dependencies: secrets.flatMap((secret) => secret.uni__dependencies),
     }
 }
@@ -66,7 +88,7 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         contentContainerStyle?: UnistylesValues
     }
 
-    return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
+    return ({ ref, ...props }: PropsWithUnistyles & { ref?: Ref<GenericComponentRef<TComponent>> }) => {
         const narrowedProps = props as PropsWithUnistyles & UnistyleStyles
         const NativeComponent = Component as ComponentType
 
@@ -127,5 +149,5 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         } as any
 
         return <NativeComponent key={uniPropsKey || mappingsKey} {...finalProps} ref={ref} />
-    })
+    }
 }

package/src/core/withUnistyles/withUnistyles.tsx

@@ -1,4 +1,4 @@
-import React, { type ComponentType, forwardRef, type ComponentProps, type ComponentRef } from 'react'
+import React, { type ComponentType, type ComponentProps, type ComponentRef, type Ref } from 'react'
 
 import type { UnistylesValues } from '../../types'
 import type { Mappings } from './types'
@@ -26,9 +26,9 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         contentContainerStyle?: UnistylesValues
     }
 
-    return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
+    return ({ ref, ...props }: PropsWithUnistyles & { ref?: Ref<GenericComponentRef<TComponent>> }) => {
         const narrowedProps = props as PropsWithUnistyles & UnistyleStyles
-        const styleClassNames = getClassName(narrowedProps.style, true)
+        const [classNames, animatedStyles] = getClassName(narrowedProps.style, true) ?? []
         const contentContainerStyleClassNames = getClassName(narrowedProps.contentContainerStyle)
         const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
 
@@ -50,7 +50,8 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
             ...(narrowedProps.style
                 ? {
                       // Override default component styles with undefined values to reset them
-                      style: emptyStyles,
+                      // animated styles can't be a class, so they stay inline
+                      style: animatedStyles?.length ? [emptyStyles, ...animatedStyles] : emptyStyles,
                   }
                 : {}),
             ...(narrowedProps.contentContainerStyle
@@ -68,12 +69,11 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
         const NativeComponent = Component as ComponentType
-        const [classNames] = styleClassNames ?? []
 
         return (
             <div className={classNames?.hash} style={{ display: 'contents' }}>
                 <NativeComponent key={uniPropsKey || mappingsKey} {...combinedProps} ref={ref} />
             </div>
         )
-    })
+    }
 }

package/src/mocks.ts

@@ -20,6 +20,7 @@ jest.mock('react-native-nitro-modules', () => ({
         createHybridObject: () => ({
             add: () => {},
             init: () => {},
+            addChangeListener: () => () => {},
             createHybridStatusBar: () => ({
                 setStyle: () => {},
             }),
@@ -199,11 +200,19 @@ jest.mock('react-native-unistyles', () => {
                 Component: TComponent,
                 mapper?: (theme: UnistylesTheme, runtime: typeof miniRuntime) => TComponent,
             ) =>
-            (props: any) =>
-                React.createElement(Component, {
-                    ...mapper?.((Object.values(_REGISTRY.themes).at(0) ?? {}) as UnistylesTheme, miniRuntime),
-                    ...props,
-                }),
+            ({ uniProps, ...props }: any) => {
+                const { deepMergeObjects } = require('./utils')
+                const theme = (Object.values(_REGISTRY.themes).at(0) ?? {}) as UnistylesTheme
+                const { key: mappingsKey, ...mappingsProps } = mapper?.(theme, miniRuntime) ?? ({} as any)
+                const { key: uniPropsKey, ...unistyleProps } = uniProps?.(theme, miniRuntime) ?? {}
+
+                return React.createElement(Component, {
+                    ...deepMergeObjects(mappingsProps, unistyleProps, props),
+                    ...(props.style ? { style: props.style } : {}),
+                    ...(props.contentContainerStyle ? { contentContainerStyle: props.contentContainerStyle } : {}),
+                    key: uniPropsKey || mappingsKey,
+                })
+            },
         mq: {
             only: {
                 width: () => ({