diff --git a/examples/bare/src/App.tsx b/examples/bare/src/App.tsx
index 049ea411..8b8ab251 100644
--- a/examples/bare/src/App.tsx
+++ b/examples/bare/src/App.tsx
@@ -28,6 +28,7 @@ export const App: React.FunctionComponent = () => {
>
Switch theme
+
)
}
@@ -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)'
}
}))
diff --git a/package.json b/package.json
index 788e3762..45794dee 100644
--- a/package.json
+++ b/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",
diff --git a/src/__tests__/styles.spec.ts b/src/__tests__/styles.spec.ts
index 88484ef8..b4f3dda8 100644
--- a/src/__tests__/styles.spec.ts
+++ b/src/__tests__/styles.spec.ts
@@ -163,7 +163,7 @@ describe('styles', () => {
}
const parsedStyles = parseStyle(
- style as StyleSheet,
+ style as unknown as StyleSheet,
{}
)
diff --git a/src/types/normalizer.ts b/src/types/normalizer.ts
index e4bb72f1..6f2e4c5f 100644
--- a/src/types/normalizer.ts
+++ b/src/types/normalizer.ts
@@ -1,6 +1,6 @@
import type { ShadowStyleIOS, TextStyle, TransformsStyle } from 'react-native'
-type TransformArrayElement = T extends Array ? U : never
+type TransformArrayElement = T extends ReadonlyArray ? U : never
type BoxShadow = Required
type TextShadow = Required>
type Transforms = Array>
diff --git a/src/types/stylesheet.ts b/src/types/stylesheet.ts
index 142e3a21..5c1dbad6 100644
--- a/src/types/stylesheet.ts
+++ b/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
export type UnistyleText = Omit
@@ -13,7 +13,9 @@ export type UnistyleImage = Omit
type UnistyleNestedStyles = {
shadowOffset?: ToDeepUnistyles,
textShadowOffset?: ToDeepUnistyles,
- transform?: Array>
+ transform?: Array>,
+ boxShadow?: Array> | string,
+ filter?: Array> | string
}
type Variants = {
diff --git a/src/utils/styles.ts b/src/utils/styles.ts
index a0d9862f..eff7bca3 100644
--- a/src/utils/styles.ts
+++ b/src/utils/styles.ts
@@ -49,6 +49,14 @@ export const parseStyle = (
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
diff --git a/yarn.lock b/yarn.lock
index f516b896..24912094 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20878,7 +20878,7 @@ __metadata:
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