Filter out css props without style flattening

packages/react-native-reanimated/src/css/component/utils.ts

@@ -1,16 +1,42 @@
 'use strict';
-import type { StyleProp } from 'react-native';
-import { StyleSheet } from 'react-native';
+import type {
+  Falsy,
+  RecursiveArray,
+  RegisteredStyle,
+  StyleProp,
+} from 'react-native';
 
-import type { AnyRecord, CSSStyle, PlainStyle } from '../types';
+import type { AnyRecord, CSSStyle } from '../types';
 import { isCSSStyleProp } from '../utils/guards';
 
-export function filterNonCSSStyleProps(props: StyleProp<CSSStyle>): PlainStyle {
-  const flattened = StyleSheet.flatten(props);
-  return Object.entries(flattened).reduce<AnyRecord>((acc, [key, value]) => {
-    if (!isCSSStyleProp(key)) {
-      acc[key] = value;
-    }
-    return acc;
-  }, {});
+type BaseStyle = CSSStyle | Falsy | RegisteredStyle<CSSStyle>;
+type StyleProps = BaseStyle | RecursiveArray<BaseStyle> | readonly BaseStyle[];
+
+function filterNonCSSStylePropsRecursive(
+  props: StyleProps
+): StyleProp<CSSStyle> {
+  if (Array.isArray(props)) {
+    return props.map(filterNonCSSStylePropsRecursive);
+  }
+
+  if (!props) {
+    return props;
+  }
+
+  if (typeof props === 'object') {
+    return Object.entries(props).reduce<AnyRecord>((acc, [key, value]) => {
+      if (!isCSSStyleProp(key)) {
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+  }
+
+  return props;
+}
+
+export function filterNonCSSStyleProps(
+  props: StyleProp<CSSStyle>
+): StyleProp<CSSStyle> {
+  return filterNonCSSStylePropsRecursive(props);
 }