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