react-native-unistyles 3.3.0 → 3.4.0

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/Func_void_UnistylesNativeMiniRuntime.kt

@@ -10,7 +10,6 @@ package com.margelo.nitro.unistyles
 import androidx.annotation.Keep
 import com.facebook.jni.HybridData
 import com.facebook.proguard.annotations.DoNotStrip
-import dalvik.annotation.optimization.FastNative
 
 
 /**
@@ -59,7 +58,6 @@ class Func_void_UnistylesNativeMiniRuntime_cxx: Func_void_UnistylesNativeMiniRun
   override fun invoke(miniRuntime: UnistylesNativeMiniRuntime): Unit
     = invoke_cxx(miniRuntime)
 
-  @FastNative
   private external fun invoke_cxx(miniRuntime: UnistylesNativeMiniRuntime): Unit
 }
 

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/Func_void_std__vector_UnistyleDependency__UnistylesNativeMiniRuntime.kt

@@ -10,7 +10,6 @@ package com.margelo.nitro.unistyles
 import androidx.annotation.Keep
 import com.facebook.jni.HybridData
 import com.facebook.proguard.annotations.DoNotStrip
-import dalvik.annotation.optimization.FastNative
 
 
 /**
@@ -59,7 +58,6 @@ class Func_void_std__vector_UnistyleDependency__UnistylesNativeMiniRuntime_cxx:
   override fun invoke(dependencies: Array<UnistyleDependency>, miniRuntime: UnistylesNativeMiniRuntime): Unit
     = invoke_cxx(dependencies,miniRuntime)
 
-  @FastNative
   private external fun invoke_cxx(dependencies: Array<UnistyleDependency>, miniRuntime: UnistylesNativeMiniRuntime): Unit
 }
 

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/HybridNativePlatformSpec.kt

@@ -10,6 +10,7 @@ package com.margelo.nitro.unistyles
 import androidx.annotation.Keep
 import com.facebook.jni.HybridData
 import com.facebook.proguard.annotations.DoNotStrip
+import dalvik.annotation.optimization.FastNative
 import com.margelo.nitro.core.HybridObject
 
 /**
@@ -120,6 +121,7 @@ abstract class HybridNativePlatformSpec: HybridObject() {
   @Keep
   protected open class CxxPart(javaPart: HybridNativePlatformSpec): HybridObject.CxxPart(javaPart) {
     // C++ JHybridNativePlatformSpec::CxxPart::initHybrid(...)
+    @FastNative
     external override fun initHybrid(): HybridData
   }
   override fun createCxxPart(): CxxPart {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "NODE_ENV=babel-test jest ./plugin ./src/__tests__",
@@ -128,39 +128,40 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@babel/types": "7.29.0"
+    "@babel/types": "7.29.8"
   },
   "devDependencies": {
-    "@callstack/repack": "5.2.4",
-    "@commitlint/config-conventional": "20.4.2",
-    "@react-native/normalize-colors": "0.85.3",
-    "@rspack/core": "1.7.6",
+    "@callstack/repack": "5.4.0",
+    "@commitlint/config-conventional": "21.2.3",
+    "@react-native/normalize-colors": "0.87.1",
+    "@rspack/core": "2.2.7",
     "@types/jest": "30.0.0",
-    "@types/react": "19.2.14",
+    "@types/react": "19.2.18",
     "babel-plugin-tester": "12.0.0",
-    "commitlint": "20.4.2",
-    "concurrently": "9.2.1",
-    "dpdm": "4.0.1",
-    "esbuild": "0.27.3",
-    "jest": "30.2.0",
-    "@babel/plugin-syntax-jsx": "7.28.6",
-    "@babel/runtime": "7.28.6",
-    "@react-native/babel-preset": "0.85.3",
-    "nitrogen": "0.36.1",
-    "oxfmt": "0.35.0",
-    "oxlint": "1.50.0",
+    "commitlint": "21.2.3",
+    "concurrently": "10.0.5",
+    "dpdm": "4.3.0",
+    "esbuild": "0.28.2",
+    "jest": "30.5.2",
+    "@babel/plugin-syntax-jsx": "7.29.7",
+    "@babel/runtime": "7.29.7",
+    "@react-native/babel-preset": "0.87.1",
+    "@react-native/jest-preset": "0.87.1",
+    "nitrogen": "0.37.1",
+    "oxfmt": "0.70.0",
+    "oxlint": "1.85.0",
     "react": "19.2.3",
-    "react-native": "0.85.3",
-    "react-native-builder-bob": "0.40.18",
-    "react-native-nitro-modules": "0.36.1",
-    "react-native-reanimated": "4.3.1",
-    "react-native-web": "0.21.2",
-    "typescript": "5.9.3"
+    "react-native": "0.87.1",
+    "react-native-builder-bob": "0.43.1",
+    "react-native-nitro-modules": "0.37.1",
+    "react-native-reanimated": "4.7.0",
+    "react-native-web": "0.21.3",
+    "typescript": "6.0.3"
   },
   "peerDependencies": {
     "@react-native/normalize-colors": "*",
     "react": "*",
-    "react-native": ">=0.76.0",
+    "react-native": ">=0.81.0",
     "react-native-edge-to-edge": "*",
     "react-native-nitro-modules": "*",
     "react-native-reanimated": "*"
@@ -177,7 +178,7 @@
     "node": ">= 20.18.0"
   },
   "jest": {
-    "preset": "react-native",
+    "preset": "@react-native/jest-preset",
     "modulePathIgnorePatterns": [
       "<rootDir>/lib/",
       "<rootDir>/cxx/tests"

package/src/components/native/Animated.tsx

@@ -7,7 +7,24 @@ import { SectionList } from './SectionList'
 import { Text } from './Text'
 import { View } from './View'
 
-export const Animated = {
+type AnimatedComponent<T extends Parameters<typeof RNAnimated.createAnimatedComponent>[0]> = ReturnType<
+    typeof RNAnimated.createAnimatedComponent<T>
+>
+
+// explicit type keeps emitted declarations portable (RN 0.87+ Strict TypeScript API references private paths)
+type UnistylesAnimated = Omit<
+    typeof RNAnimated,
+    'View' | 'Text' | 'FlatList' | 'Image' | 'ScrollView' | 'SectionList'
+> & {
+    View: AnimatedComponent<typeof View>
+    Text: AnimatedComponent<typeof Text>
+    FlatList: AnimatedComponent<typeof FlatList>
+    Image: AnimatedComponent<typeof Image>
+    ScrollView: AnimatedComponent<typeof ScrollView>
+    SectionList: AnimatedComponent<typeof SectionList>
+}
+
+export const Animated: UnistylesAnimated = {
     ...RNAnimated,
     View: RNAnimated.createAnimatedComponent(View),
     Text: RNAnimated.createAnimatedComponent(Text),

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

@@ -3,9 +3,14 @@ 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 { Nullable } from '../../types'
+
 import { passForwardedRef } from '../../core'
 import { UnistylesShadowRegistry } from '../../specs'
 
+// instance type of View for both legacy and Strict TypeScript API (RN 0.87+)
+type ViewRef = React.ComponentRef<typeof View>
+
 type PressableProps = Props & {
     variants?: Record<string, string | boolean>
 }
@@ -24,8 +29,11 @@ const getStyles = (styleProps: Record<string, any> = {}) => {
     }
 }
 
-export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
-    const storedRef = useRef<View | null>(null)
+export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<ViewRef>> = forwardRef<
+    ViewRef,
+    PressableProps
+>(({ variants, style, ...props }, forwardedRef) => {
+    const storedRef = useRef<Nullable<ViewRef>>(null)
     const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
 
     useLayoutEffect(() => {

package/src/components/native/Pressable.tsx

@@ -18,12 +18,18 @@ type WebPressableState = {
 
 type WebPressableStyle = ((state: WebPressableState) => UnistylesValues) | UnistylesValues
 
+// instance type of View for both legacy and Strict TypeScript API (RN 0.87+)
+type ViewRef = React.ComponentRef<typeof View>
+
 type PressableProps = Props & {
     variants?: Variants
     style?: WebPressableStyle
 }
 
-export const Pressable = forwardRef<View, PressableProps>(({ style, ...props }, forwardedRef) => {
+export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<ViewRef>> = forwardRef<
+    ViewRef,
+    PressableProps
+>(({ style, ...props }, forwardedRef) => {
     const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
     let storedRef: HTMLElement | null = null
     let classNames: ReturnType<typeof getClassName> | undefined = undefined

package/src/types/core.ts

@@ -1,19 +1,4 @@
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
-import type {
-    MatrixTransform,
-    PerspectiveTransform,
-    RotateTransform,
-    RotateXTransform,
-    RotateYTransform,
-    RotateZTransform,
-    ScaleTransform,
-    ScaleXTransform,
-    ScaleYTransform,
-    SkewXTransform,
-    SkewYTransform,
-    TranslateXTransform,
-    TranslateYTransform,
-} from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 
@@ -22,19 +7,13 @@ export type ShadowOffset = {
     height: number
 }
 
-export type TransformStyles = PerspectiveTransform &
-    RotateTransform &
-    RotateXTransform &
-    RotateYTransform &
-    RotateZTransform &
-    ScaleTransform &
-    ScaleXTransform &
-    ScaleYTransform &
-    TranslateXTransform &
-    TranslateYTransform &
-    SkewXTransform &
-    SkewYTransform &
-    MatrixTransform
+type TransformEntry = Exclude<NonNullable<ViewStyle['transform']>, string>[number]
+type TransformKeys<T> = T extends unknown ? keyof T : never
+type TransformValue<T, K extends PropertyKey> = T extends unknown ? (K extends keyof T ? T[K] : never) : never
+
+export type TransformStyles = {
+    [K in TransformKeys<TransformEntry>]: Exclude<TransformValue<TransformEntry, K>, void | undefined>
+}
 
 export type ScreenSize = {
     width: number

package/src/web/convert/object/boxShadow.ts

@@ -17,7 +17,7 @@ export const getBoxShadow = (boxShadow: Array<BoxShadowValue>) => {
         const value = shadow[key as keyof BoxShadowValue]
 
         // Breakpoints
-        if (typeof value === 'object') {
+        if (value !== null && typeof value === 'object') {
             Object.keys(value).forEach((breakpoint) => breakpoints.add(breakpoint))
         }
     })
@@ -41,7 +41,7 @@ export const getBoxShadow = (boxShadow: Array<BoxShadowValue>) => {
                 const [key] = Object.keys(shadow)
                 const value = shadow[key as keyof BoxShadowValue]
 
-                if (typeof value === 'object' && keyInObject(value, breakpoint)) {
+                if (value !== null && typeof value === 'object' && keyInObject(value, breakpoint)) {
                     return [key, value[breakpoint]]
                 }
 

package/src/web/index.ts

@@ -26,7 +26,8 @@ export const StyleSheet = {
         bottom: 0,
     },
     compose: (a: object, b: object) => RNStyleSheet.compose(a, b),
-    flatten: (...styles: Array<object>) => RNStyleSheet.flatten(...styles),
+    flatten: (...styles: Array<object>) =>
+        (RNStyleSheet.flatten as unknown as (...styles: Array<object>) => object)(...styles),
     hairlineWidth: 1,
 } as unknown as typeof NativeStyleSheet