1import { ClassAttributes, ComponentProps, ComponentType } from 'react';
2import {
3  AccessibilityRole,
4  StyleProp,
5  View as NativeView,
6  ViewStyle as NativeViewStyle,
7} from 'react-native';
8
9import { createDevView } from './createDevView';
10import { createSafeStyledView } from '../css/createSafeStyledView';
11
12// https://github.com/necolas/react-native-web/issues/832
13
14type NativeViewProps = ComponentProps<typeof NativeView> & ClassAttributes<typeof NativeView>;
15
16/**
17 * https://baconbrix.gitbook.io/react-native-web/primitives/view
18 */
19export interface WebViewStyle {
20  /** @platform web */
21  backdropFilter?: string;
22  /** @platform web */
23  animationDelay?: string;
24  /** @platform web */
25  animationDirection?: string;
26  /** @platform web */
27  animationDuration?: string;
28  /** @platform web */
29  animationFillMode?: string;
30  /** @platform web */
31  animationName?: string | any[];
32  /** @platform web */
33  animationIterationCount?: number | 'infinite';
34  /** @platform web */
35  animationPlayState?: string;
36  /** @platform web */
37  animationTimingFunction?: string;
38  /** @platform web */
39  backgroundAttachment?: string;
40  /** @platform web */
41  backgroundBlendMode?: string;
42  /** @platform web */
43  backgroundClip?: string;
44  /** @platform web */
45  backgroundImage?: string;
46  /** @platform web */
47  backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box';
48  /** @platform web */
49  backgroundPosition?: string;
50  /** @platform web */
51  backgroundRepeat?: string;
52  /** @platform web */
53  backgroundSize?: string;
54  /** @platform web */
55  boxShadow?: string;
56  /** @platform web */
57  boxSizing?: string;
58  /** @platform web */
59  clip?: string;
60  /** @platform web */
61  cursor?: string;
62  /** @platform web */
63  filter?: string;
64  /** @platform web */
65  gridAutoColumns?: string;
66  /** @platform web */
67  gridAutoFlow?: string;
68  /** @platform web */
69  gridAutoRows?: string;
70  /** @platform web */
71  gridColumnEnd?: string;
72  /** @platform web */
73  gridColumnGap?: string;
74  /** @platform web */
75  gridColumnStart?: string;
76  /** @platform web */
77  gridRowEnd?: string;
78  /** @platform web */
79  gridRowGap?: string;
80  /** @platform web */
81  gridRowStart?: string;
82  /** @platform web */
83  gridTemplateColumns?: string;
84  /** @platform web */
85  gridTemplateRows?: string;
86  /** @platform web */
87  gridTemplateAreas?: string;
88  /** @platform web */
89  outline?: string;
90  /** @platform web */
91  outlineColor?: string;
92  /** @platform web */
93  overflowX?: string;
94  /** @platform web */
95  overflowY?: string;
96  /** @platform web */
97  overscrollBehavior?: 'auto' | 'contain' | 'none';
98  /** @platform web */
99  overscrollBehaviorX?: 'auto' | 'contain' | 'none';
100  /** @platform web */
101  overscrollBehaviorY?: 'auto' | 'contain' | 'none';
102  /** @platform web */
103  perspective?: string;
104  /** @platform web */
105  perspectiveOrigin?: string;
106  /** @platform web */
107  touchAction?: string;
108  /** @platform web */
109  transformOrigin?: string;
110  /** @platform web */
111  transitionDelay?: string;
112  /** @platform web */
113  transitionDuration?: string;
114  /** @platform web */
115  transitionProperty?: string;
116  /** @platform web */
117  transitionTimingFunction?: string;
118  /** @platform web */
119  userSelect?: string;
120  /** @platform web */
121  visibility?: string;
122  /** @platform web */
123  willChange?: string;
124  /** @platform web */
125  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
126}
127
128export type ViewStyle = Omit<NativeViewStyle, 'position'> & WebViewStyle;
129
130export type WebViewProps = {
131  style?: StyleProp<ViewStyle>;
132
133  accessibilityRole?:
134    | 'list'
135    | 'listitem'
136    | 'complementary'
137    | 'contentinfo'
138    | 'region'
139    | 'navigation'
140    | 'main'
141    | 'article'
142    | 'banner'
143    | AccessibilityRole;
144};
145
146export type ViewProps = WebViewProps & Omit<NativeViewProps, 'style' | 'accessibilityRole'>;
147
148let View = NativeView as ComponentType<ViewProps>;
149
150if (process.env.NODE_ENV !== 'production') {
151  // Add better errors and warnings in development builds.
152  View = createDevView(NativeView) as ComponentType<ViewProps>;
153}
154
155export default createSafeStyledView(View) as ComponentType<ViewProps>;
156