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