Merge pull request #326 from jpudysz/feature/new-props

feat: add support for new rn 0.76 css props

Author: jpudysz

examples/bare/src/App.tsx

@@ -28,6 +28,7 @@ export const App: React.FunctionComponent = () => {
             >
                 <Text>Switch theme</Text>
             </Pressable>
+            <View style={styles.box} />
         </View>
     )
 }
@@ -65,5 +66,20 @@ const stylesheet = createStyleSheet((theme, rt) => ({
     },
     bold: {
         fontWeight: 'bold'
+    },
+    box: {
+        height: 100,
+        width: 100,
+        position: 'absolute',
+        backgroundColor: theme.colors.fog,
+        filter: [
+            {
+                brightness: 0.2
+            },
+            {
+                opacity: 0.5
+            }
+        ],
+        boxShadow: '0 0 10 10 rgba(255, 0, 0, 0.5)'
     }
 }))

examples/tv/package.json

@@ -14,7 +14,7 @@
     "expo": "51.0.14",
     "expo-build-properties": "0.12.3",
     "react": "18.3.1",
-    "react-native": "npm:react-native-tvos@~0.74.2-0"
+    "react-native": "npm:react-native-tvos@latest"
   },
   "devDependencies": {
     "@babel/core": "7.24.7",

package.json

@@ -86,7 +86,7 @@
     "jest": "29.7.0",
     "metro-react-native-babel-preset": "0.77.0",
     "react": "18.3.1",
-    "react-native": "0.74.2",
+    "react-native": "0.76.0",
     "react-native-builder-bob": "0.23.2",
     "react-native-web": "0.19.12",
     "react-test-renderer": "18.3.1",

src/__tests__/styles.spec.ts

@@ -163,7 +163,7 @@ describe('styles', () => {
             }
 
             const parsedStyles = parseStyle(
-                style as StyleSheet,
+                style as unknown as StyleSheet,
                 {}
             )
 

src/types/normalizer.ts

@@ -1,6 +1,6 @@
 import type { ShadowStyleIOS, TextStyle, TransformsStyle } from 'react-native'
 
-type TransformArrayElement<T> = T extends Array<infer U> ? U : never
+type TransformArrayElement<T> = T extends ReadonlyArray<infer U> ? U : never
 type BoxShadow = Required<ShadowStyleIOS>
 type TextShadow = Required<Pick<TextStyle, 'textShadowColor' | 'textShadowOffset' | 'textShadowRadius'>>
 type Transforms = Array<TransformArrayElement<TransformsStyle['transform']>>

src/types/stylesheet.ts

@@ -1,10 +1,10 @@
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type { BoxShadowValue, FilterFunction, ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
 import type { UnistylesBreakpoints } from '../global'
 import type { UnistylesMiniRuntime } from '../core'
 
 // these props are treated differently to nest breakpoints and media queries
-type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
+type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset' | 'boxShadow' | 'filter'
 
 export type UnistyleView = Omit<ViewStyle, NestedKeys>
 export type UnistyleText = Omit<TextStyle, NestedKeys>
@@ -13,7 +13,9 @@ export type UnistyleImage = Omit<ImageStyle, NestedKeys>
 type UnistyleNestedStyles = {
     shadowOffset?: ToDeepUnistyles<ShadowOffset>,
     textShadowOffset?: ToDeepUnistyles<ShadowOffset>,
-    transform?: Array<ToDeepUnistyles<TransformStyles>>
+    transform?: Array<ToDeepUnistyles<TransformStyles>>,
+    boxShadow?: Array<ToDeepUnistyles<BoxShadowValue>> | string,
+    filter?: Array<ToDeepUnistyles<FilterFunction>> | string
 }
 
 type Variants = {

src/utils/styles.ts

@@ -49,6 +49,14 @@ export const parseStyle = <T extends RNStyle>(
             return acc
         }
 
+        if ((key === 'boxShadow' || key === 'filter') && Array.isArray(value)) {
+            acc[key] = value
+                .map(value => parseStyle(value, variant, false))
+                .filter(value => Object.keys(value).length === 1)
+
+            return acc
+        }
+
         if (key === 'fontVariant' && Array.isArray(value)) {
             acc[key] = value