react-native-unistyles 3.0.24 → 3.1.1

package/src/components/AdaptiveTheme.tsx

@@ -1,7 +1,10 @@
-import React, { useLayoutEffect } from 'react'
 import type { PropsWithChildren } from 'react'
-import { useUnistyles } from '../core'
+
+import React, { useLayoutEffect } from 'react'
+
 import type { UnistylesThemes } from '../global'
+
+import { useUnistyles } from '../core'
 import { UnistylesShadowRegistry } from '../specs'
 import { ApplyScopedTheme } from './ApplyScopedTheme'
 
@@ -9,16 +12,13 @@ interface AdaptiveThemeProps extends PropsWithChildren {
     previousScopedTheme?: string
 }
 
-export const AdaptiveTheme: React.FunctionComponent<AdaptiveThemeProps> = ({
-    children,
-    previousScopedTheme
-}) => {
+export const AdaptiveTheme: React.FunctionComponent<AdaptiveThemeProps> = ({ children, previousScopedTheme }) => {
     const { rt } = useUnistyles()
     const name = (rt.colorScheme === 'dark' ? 'light' : 'dark') as keyof UnistylesThemes
     const mappedChildren = [
         <ApplyScopedTheme key={name} name={name} />,
         children,
-        <ApplyScopedTheme key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
+        <ApplyScopedTheme key="dispose" name={previousScopedTheme as keyof UnistylesThemes | undefined} />,
     ]
 
     useLayoutEffect(() => {
@@ -26,9 +26,5 @@ export const AdaptiveTheme: React.FunctionComponent<AdaptiveThemeProps> = ({
         UnistylesShadowRegistry.flush()
     })
 
-    return (
-        <React.Fragment key={name}>
-            {mappedChildren}
-        </React.Fragment>
-    )
+    return <React.Fragment key={name}>{mappedChildren}</React.Fragment>
 }

package/src/components/ApplyScopedTheme.tsx

@@ -1,5 +1,7 @@
 import { useLayoutEffect } from 'react'
+
 import type { UnistylesThemes } from '../global'
+
 import { UnistylesShadowRegistry } from '../specs'
 
 type ApplyScopedThemeProps = {

package/src/components/Display.tsx

@@ -1,4 +1,5 @@
 import React, { type PropsWithChildren } from 'react'
+
 import { useMedia } from '../hooks'
 
 type DisplayProps = { mq: symbol } & PropsWithChildren
@@ -6,7 +7,5 @@ type DisplayProps = { mq: symbol } & PropsWithChildren
 export const Display: React.FunctionComponent<DisplayProps> = ({ children, ...props }) => {
     const { isVisible } = useMedia(props)
 
-    return isVisible
-        ? children
-        : null
+    return isVisible ? children : null
 }

package/src/components/Hide.tsx

@@ -1,4 +1,5 @@
 import React, { type PropsWithChildren } from 'react'
+
 import { useMedia } from '../hooks'
 
 type HideProps = { mq: symbol } & PropsWithChildren
@@ -6,7 +7,5 @@ type HideProps = { mq: symbol } & PropsWithChildren
 export const Hide: React.FunctionComponent<HideProps> = ({ children, ...props }) => {
     const { isVisible } = useMedia(props)
 
-    return !isVisible
-        ? children
-        : null
+    return !isVisible ? children : null
 }

package/src/components/NamedTheme.tsx

@@ -1,23 +1,22 @@
-import React, { useLayoutEffect } from 'react'
 import type { PropsWithChildren } from 'react'
+
+import React, { useLayoutEffect } from 'react'
+
 import type { UnistylesThemes } from '../global'
+
 import { UnistylesShadowRegistry } from '../specs'
 import { ApplyScopedTheme } from './ApplyScopedTheme'
 
 interface NamedThemeProps extends PropsWithChildren {
-    name: keyof UnistylesThemes | undefined,
+    name: keyof UnistylesThemes | undefined
     previousScopedTheme?: string
 }
 
-export const NamedTheme: React.FunctionComponent<NamedThemeProps> = ({
-    name,
-    children,
-    previousScopedTheme
-}) => {
+export const NamedTheme: React.FunctionComponent<NamedThemeProps> = ({ name, children, previousScopedTheme }) => {
     const mappedChildren = [
-        <ApplyScopedTheme key='apply' name={name} />,
+        <ApplyScopedTheme key="apply" name={name} />,
         children,
-        <ApplyScopedTheme key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
+        <ApplyScopedTheme key="dispose" name={previousScopedTheme as keyof UnistylesThemes | undefined} />,
     ]
 
     useLayoutEffect(() => {
@@ -25,9 +24,5 @@ export const NamedTheme: React.FunctionComponent<NamedThemeProps> = ({
         UnistylesShadowRegistry.flush()
     })
 
-    return (
-        <React.Fragment>
-            {mappedChildren}
-        </React.Fragment>
-    )
+    return <React.Fragment>{mappedChildren}</React.Fragment>
 }

package/src/components/ScopedTheme.tsx

@@ -1,28 +1,33 @@
 import React from 'react'
+
 import type { UnistylesThemes } from '../global'
+
 import { UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
 import { AdaptiveTheme } from './AdaptiveTheme'
 import { NamedTheme } from './NamedTheme'
 
-type ThemeProps = {
-    name: keyof UnistylesThemes,
-    invertedAdaptive?: never
-    reset?: never
-} | {
-    name?: never,
-    invertedAdaptive: boolean,
-    reset?: never
-} | {
-    name?: never,
-    invertedAdaptive?: never,
-    reset: boolean
-}
+type ThemeProps =
+    | {
+          name: keyof UnistylesThemes
+          invertedAdaptive?: never
+          reset?: never
+      }
+    | {
+          name?: never
+          invertedAdaptive: boolean
+          reset?: never
+      }
+    | {
+          name?: never
+          invertedAdaptive?: never
+          reset: boolean
+      }
 
 export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({
     name,
     children,
     invertedAdaptive,
-    reset
+    reset,
 }) => {
     const hasAdaptiveThemes = UnistylesRuntime.hasAdaptiveThemes
     const isAdaptiveTheme = invertedAdaptive && hasAdaptiveThemes
@@ -31,25 +36,15 @@ export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeP
     switch (true) {
         case name !== undefined:
             return (
-                <NamedTheme
-                    name={name as keyof UnistylesThemes}
-                    previousScopedTheme={previousScopedTheme}
-                >
+                <NamedTheme name={name as keyof UnistylesThemes} previousScopedTheme={previousScopedTheme}>
                     {children}
                 </NamedTheme>
             )
         case isAdaptiveTheme:
-            return (
-                <AdaptiveTheme previousScopedTheme={previousScopedTheme}>
-                    {children}
-                </AdaptiveTheme>
-            )
+            return <AdaptiveTheme previousScopedTheme={previousScopedTheme}>{children}</AdaptiveTheme>
         case reset:
             return (
-                <NamedTheme
-                    name={undefined}
-                    previousScopedTheme={previousScopedTheme}
-                >
+                <NamedTheme name={undefined} previousScopedTheme={previousScopedTheme}>
                     {children}
                 </NamedTheme>
             )

package/src/components/native/ActivityIndicator.tsx

@@ -1,4 +1,5 @@
 import { ActivityIndicator as NativeActivityIndicator } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const ActivityIndicator = createUnistylesElement(NativeActivityIndicator)

package/src/components/native/Animated.tsx

@@ -1,4 +1,5 @@
 import { Animated as RNAnimated } from 'react-native'
+
 import { FlatList } from './FlatList'
 import { Image } from './Image'
 import { ScrollView } from './ScrollView'
@@ -13,5 +14,5 @@ export const Animated = {
     FlatList: RNAnimated.createAnimatedComponent(FlatList),
     Image: RNAnimated.createAnimatedComponent(Image),
     ScrollView: RNAnimated.createAnimatedComponent(ScrollView),
-    SectionList: RNAnimated.createAnimatedComponent(SectionList)
+    SectionList: RNAnimated.createAnimatedComponent(SectionList),
 }

package/src/components/native/FlatList.tsx

@@ -1,4 +1,5 @@
 import { FlatList as NativeFlatList } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const FlatList = createUnistylesElement(NativeFlatList)

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

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

package/src/components/native/Image.tsx

@@ -1,8 +1,10 @@
 import React, { type ComponentProps, forwardRef } from 'react'
 import { type ImageStyle, Image as NativeImage, type StyleProp, type ViewStyle } from 'react-native'
+
+import type { UnistylesValues } from '../../types'
+
 import { getClassName } from '../../core'
 import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
-import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
 import { checkForProp } from '../../web/utils'
 import { createUnistylesRef } from '../../web/utils/createUnistylesRef'
@@ -23,12 +25,14 @@ const UnistylesImage = forwardRef<unknown, Props>((props, forwardedRef) => {
     return (
         <NativeImage
             {...props}
-            style={[
-                classNames,
-                // Clear inline width and height extracted from source
-                hasWidthStyle && { width: '' },
-                hasHeightStyle && { height: '' }
-            ] as StyleProp<ImageStyle>}
+            style={
+                [
+                    classNames,
+                    // Clear inline width and height extracted from source
+                    hasWidthStyle && { width: '' },
+                    hasHeightStyle && { height: '' },
+                ] as StyleProp<ImageStyle>
+            }
             ref={ref}
         />
     )

package/src/components/native/ImageBackground.native.tsx

@@ -1,4 +1,5 @@
 import { ImageBackground as NativeImageBackground } from 'react-native'
+
 import { createUnistylesImageBackground } from '../../core'
 
 export const ImageBackground = createUnistylesImageBackground(NativeImageBackground)

package/src/components/native/ImageBackground.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { forwardRef } from 'react'
 import { type ImageStyle, ImageBackground as NativeImageBackground, type StyleProp, type ViewStyle } from 'react-native'
+
+import type { UnistylesValues } from '../../types'
+
 import { getClassName } from '../../core'
 import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
-import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
 import { keyInObject } from '../../web/utils'
 import { createUnistylesRef } from '../../web/utils/createUnistylesRef'
@@ -28,12 +30,14 @@ const UnistylesImageBackground = forwardRef<unknown, Props>((props, forwardedRef
         <NativeImageBackground
             {...props}
             style={styleClassNames as StyleProp<ViewStyle>}
-            imageStyle={[
-                imageClassNames,
-                // Clear inline width and height extracted from source
-                hasWidthStyle && { width: '' },
-                hasHeightStyle && { height: '' }
-            ] as StyleProp<ImageStyle>}
+            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/KeyboardAvoidingView.tsx

@@ -1,4 +1,5 @@
 import { KeyboardAvoidingView as NativeKeyboardAvoidingView } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const KeyboardAvoidingView = createUnistylesElement(NativeKeyboardAvoidingView)

package/src/components/native/NativeText.native.tsx

@@ -1,5 +1,7 @@
-import { type ComponentType, createElement, forwardRef } from 'react'
 import type { TextProps } from 'react-native'
+
+import { type ComponentType, createElement, forwardRef } from 'react'
+
 import { createUnistylesElement } from '../../core'
 
 // credits to @hirbod

package/src/components/native/NativeView.native.tsx

@@ -1,5 +1,7 @@
-import { type ComponentType, createElement, forwardRef } from 'react'
 import type { ViewProps } from 'react-native'
+
+import { type ComponentType, createElement, forwardRef } from 'react'
+
 import { createUnistylesElement } from '../../core'
 
 // credits to @hirbod

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

@@ -1,6 +1,8 @@
+import type { PressableProps as Props, View } from 'react-native'
+
 import React, { forwardRef, useLayoutEffect, useRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
-import type { PressableProps as Props, View } from 'react-native'
+
 import { passForwardedRef } from '../../core'
 import { UnistylesShadowRegistry } from '../../specs'
 
@@ -9,9 +11,7 @@ type PressableProps = Props & {
 }
 
 const getStyles = (styleProps: Record<string, any> = {}) => {
-    const unistyleKey = Object
-        .keys(styleProps)
-        .find(key => key.startsWith('unistyles_'))
+    const unistyleKey = Object.keys(styleProps).find((key) => key.startsWith('unistyles_'))
 
     if (!unistyleKey) {
         return styleProps
@@ -20,7 +20,7 @@ const getStyles = (styleProps: Record<string, any> = {}) => {
     return {
         // styles without C++ state
         ...styleProps[unistyleKey].uni__getStyles(),
-        [unistyleKey]: styleProps[unistyleKey]
+        [unistyleKey]: styleProps[unistyleKey],
     }
 }
 
@@ -40,7 +40,7 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
     return (
         <NativePressableReactNative
             {...props}
-            ref={ref => {
+            ref={(ref) => {
                 const isPropStyleAFunction = typeof style === 'function'
                 const unistyles = isPropStyleAFunction
                     ? style.call(style, { pressed: false })
@@ -60,10 +60,10 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                     () => {
                         // @ts-expect-error - this is hidden from TS
                         UnistylesShadowRegistry.remove(ref)
-                    }
+                    },
                 )
             }}
-            style={state => {
+            style={(state) => {
                 const isPropStyleAFunction = typeof style === 'function'
                 const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
 

package/src/components/native/Pressable.tsx

@@ -1,15 +1,18 @@
+import type { PressableProps as Props, View } from 'react-native'
+
 import React, { forwardRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
-import type { PressableProps as Props, View } from 'react-native'
+
+import type { UnistylesValues } from '../../types'
+
 import { getClassName } from '../../core'
 import { UnistylesShadowRegistry } from '../../specs'
-import type { UnistylesValues } from '../../types'
 import { isServer } from '../../web/utils'
 
 type Variants = Record<string, string | boolean | undefined>
 type WebPressableState = {
-    pressed: boolean,
-    hovered: boolean,
+    pressed: boolean
+    hovered: boolean
     focused: boolean
 }
 
@@ -17,7 +20,7 @@ type WebPressableStyle = ((state: WebPressableState) => UnistylesValues) | Unist
 
 type PressableProps = Props & {
     variants?: Variants
-    style?: WebPressableStyle,
+    style?: WebPressableStyle
 }
 
 export const Pressable = forwardRef<View, PressableProps>(({ style, ...props }, forwardedRef) => {
@@ -28,23 +31,25 @@ export const Pressable = forwardRef<View, PressableProps>(({ style, ...props },
     return (
         <NativePressableReactNative
             {...props}
-            ref={isServer() ? undefined : ref => {
-                storedRef = ref as unknown as HTMLElement
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(storedRef, classNames?.hash)
+            ref={
+                isServer()
+                    ? undefined
+                    : (ref) => {
+                          storedRef = ref as unknown as HTMLElement
+                          // @ts-expect-error hidden from TS
+                          UnistylesShadowRegistry.add(storedRef, classNames?.hash)
 
-                if (typeof forwardedRef === 'function') {
-                    return forwardedRef(ref)
-                }
+                          if (typeof forwardedRef === 'function') {
+                              return forwardedRef(ref)
+                          }
 
-                if (forwardedRef) {
-                    forwardedRef.current = ref
-                }
-            }}
-            style={state => {
-                const styleResult = typeof style === 'function'
-                    ? style(state as WebPressableState)
-                    : style
+                          if (forwardedRef) {
+                              forwardedRef.current = ref
+                          }
+                      }
+            }
+            style={(state) => {
+                const styleResult = typeof style === 'function' ? style(state as WebPressableState) : style
                 const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
 
                 UnistylesShadowRegistry.setScopedTheme(scopedTheme)

package/src/components/native/RefreshControl.tsx

@@ -1,4 +1,5 @@
 import { RefreshControl as NativeRefreshControl } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const RefreshControl = createUnistylesElement(NativeRefreshControl)

package/src/components/native/SafeAreaView.tsx

@@ -1,4 +1,5 @@
 import { SafeAreaView as NativeSafeAreaView } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const SafeAreaView = createUnistylesElement(NativeSafeAreaView)

package/src/components/native/ScrollView.tsx

@@ -1,4 +1,5 @@
 import { ScrollView as NativeScrollView } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const ScrollView = createUnistylesElement(NativeScrollView)

package/src/components/native/SectionList.tsx

@@ -1,4 +1,5 @@
 import { SectionList as NativeSectionList } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const SectionList = createUnistylesElement(NativeSectionList)

package/src/components/native/Switch.tsx

@@ -1,4 +1,5 @@
 import { Switch as NativeSwitch } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const Switch = createUnistylesElement(NativeSwitch)

package/src/components/native/Text.tsx

@@ -1,4 +1,5 @@
 import { Text as NativeText } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const Text = createUnistylesElement(NativeText)

package/src/components/native/TextInput.tsx

@@ -1,4 +1,5 @@
 import { TextInput as NativeTextInput } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const TextInput = createUnistylesElement(NativeTextInput)

package/src/components/native/TouchableHighlight.tsx

@@ -1,4 +1,5 @@
 import { TouchableHighlight as NativeTouchableHighlight } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const TouchableHighlight = createUnistylesElement(NativeTouchableHighlight)

package/src/components/native/TouchableOpacity.tsx

@@ -1,4 +1,5 @@
 import { TouchableOpacity as NativeTouchableOpacity } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const TouchableOpacity = createUnistylesElement(NativeTouchableOpacity)

package/src/components/native/View.tsx

@@ -1,4 +1,5 @@
 import { View as NativeView } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const View = createUnistylesElement(NativeView)

package/src/components/native/VirtualizedList.tsx

@@ -1,4 +1,5 @@
 import { VirtualizedList as NativeVirtualizedList } from 'react-native'
+
 import { createUnistylesElement } from '../../core'
 
 export const VirtualizedList = createUnistylesElement(NativeVirtualizedList)

package/src/core/createUnistylesElement.native.tsx

@@ -1,5 +1,7 @@
-import React, { useRef } from 'react'
 import type { ScrollView } from 'react-native'
+
+import React, { useRef } from 'react'
+
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
@@ -41,7 +43,7 @@ export const createUnistylesElement = (Component: any) => {
                         () => {
                             // @ts-ignore this is hidden from TS
                             UnistylesShadowRegistry.remove(ref)
-                        }
+                        },
                     )
                 }}
             />

package/src/core/createUnistylesElement.tsx

@@ -1,6 +1,9 @@
-import React from 'react'
 import type { ViewStyle } from 'react-native'
+
+import React from 'react'
+
 import type { UnistylesValues } from '../types'
+
 import { copyComponentProperties } from '../utils'
 import { isServer } from '../web/utils'
 import { createUnistylesRef } from '../web/utils/createUnistylesRef'
@@ -9,40 +12,34 @@ import { maybeWarnAboutMultipleUnistyles } from './warn'
 
 const STYLE_PROPS = ['contentContainerStyle', 'columnWrapperStyle'] as const
 
-type StyleProp = typeof STYLE_PROPS[number] | 'style'
+type StyleProp = (typeof STYLE_PROPS)[number] | 'style'
 
 type ComponentProps = {
     [K in StyleProp]?: UnistylesValues
 }
 
 const buildUnistylesProps = (Component: any, props: ComponentProps, forwardedRef: React.ForwardedRef<unknown>) => {
-    const componentStyleProps = ['style' as const, ...STYLE_PROPS.filter(styleProp => styleProp in props)]
-    const classNames = Object.fromEntries(componentStyleProps.map(styleProp => [styleProp, getClassName(props[styleProp])]))
-    const refs = componentStyleProps.map(styleProp => {
-        return createUnistylesRef(
-            classNames[styleProp],
-            styleProp === 'style' ? forwardedRef : undefined
-        )
+    const componentStyleProps = ['style' as const, ...STYLE_PROPS.filter((styleProp) => styleProp in props)]
+    const classNames = Object.fromEntries(
+        componentStyleProps.map((styleProp) => [styleProp, getClassName(props[styleProp])]),
+    )
+    const refs = componentStyleProps.map((styleProp) => {
+        return createUnistylesRef(classNames[styleProp], styleProp === 'style' ? forwardedRef : undefined)
     })
 
-    componentStyleProps.forEach(styleProp => {
+    componentStyleProps.forEach((styleProp) => {
         maybeWarnAboutMultipleUnistyles(props[styleProp] as ViewStyle, Component.displayName)
     })
 
     return {
         ...classNames,
-        ref: isServer() ? undefined : (componentRef: any) => refs.forEach(ref => ref?.(componentRef))
+        ref: isServer() ? undefined : (componentRef: any) => refs.forEach((ref) => ref?.(componentRef)),
     }
 }
 
 export const createUnistylesElement = (Component: any) => {
     const UnistylesComponent = (props: any) => {
-        return (
-            <Component
-                {...props}
-                {...buildUnistylesProps(Component, props, props.ref)}
-            />
-        )
+        return <Component {...props} {...buildUnistylesProps(Component, props, props.ref)} />
     }
 
     return copyComponentProperties(Component, UnistylesComponent)