1import { StyleSheet } from 'react-native';
2
3// Remove the unsupported web styles from the style object
4// to prevent crashing.
5const WEB_STYLES = [
6  'backdropFilter',
7  'animationDelay',
8  'animationDirection',
9  'animationDuration',
10  'animationFillMode',
11  'animationName',
12  'animationIterationCount',
13  'animationPlayState',
14  'animationTimingFunction',
15  'backgroundAttachment',
16  'backgroundBlendMode',
17  'backgroundClip',
18  'backgroundImage',
19  'backgroundOrigin',
20  'backgroundPosition',
21  'backgroundRepeat',
22  'backgroundSize',
23  'boxShadow',
24  'boxSizing',
25  'clip',
26  'cursor',
27  'filter',
28  'gridAutoColumns',
29  'gridAutoFlow',
30  'gridAutoRows',
31  'gridColumnEnd',
32  'gridColumnGap',
33  'gridColumnStart',
34  'gridRowEnd',
35  'gridRowGap',
36  'gridRowStart',
37  'gridTemplateColumns',
38  'gridTemplateRows',
39  'gridTemplateAreas',
40  'outline',
41  'outlineColor',
42  'overflowX',
43  'overflowY',
44  'overscrollBehavior',
45  'overscrollBehaviorX',
46  'overscrollBehaviorY',
47  'perspective',
48  'perspectiveOrigin',
49  'touchAction',
50  'transformOrigin',
51  'transitionDelay',
52  'transitionDuration',
53  'transitionProperty',
54  'transitionTimingFunction',
55  'userSelect',
56  'willChange',
57];
58
59export function filterStyles(styleProp) {
60  if (!styleProp) {
61    return styleProp;
62  }
63  const style = StyleSheet.flatten(styleProp);
64
65  const filteredStyle = Object.fromEntries(
66    Object.entries(style).filter(([k]) => !WEB_STYLES.includes(k))
67  );
68
69  return processNativeStyles(filteredStyle);
70}
71
72function processNativeStyles(style) {
73  if (!style) return style;
74
75  if (style.visibility) {
76    if (style.visibility === 'hidden') {
77      // style.display = "none";
78      style.opacity = 0;
79    }
80    delete style.visibility;
81  }
82
83  if (style.position) {
84    if (!['absolute', 'relative'].includes(style.position)) {
85      console.warn(`Unsupported position: '${style.position}'`);
86      style.position = 'relative';
87    }
88  }
89
90  return style;
91}
92