0
# React Native Web
1

2
React Native for Web is a comprehensive compatibility library that enables React Native components and APIs to run seamlessly on web browsers using React DOM. It provides a complete mapping of React Native's component system, styling capabilities, and platform APIs to web-equivalent implementations, allowing developers to write cross-platform applications using a single React Native codebase that works across mobile and web platforms.
3

4
## Package Information
5

6
- **Package Name**: react-native-web
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install react-native-web`
10

11
## Core Imports
12

13
```javascript
14
import { View, Text, StyleSheet, AppRegistry } from "react-native-web";
15
```
16

17
For specific components:
18

19
```javascript
20
import { Pressable, Image, ScrollView } from "react-native-web";
21
```
22

23
CommonJS:
24

25
```javascript
26
const { View, Text, StyleSheet } = require("react-native-web");
27
```
28

29
## Basic Usage
30

31
```javascript
32
import React from "react";
33
import { View, Text, StyleSheet, AppRegistry } from "react-native-web";
34

35
const App = () => (
36
  <View style={styles.container}>
37
    <Text style={styles.title}>Hello React Native Web!</Text>
38
  </View>
39
);
40

41
const styles = StyleSheet.create({
42
  container: {
43
    flex: 1,
44
    justifyContent: "center",
45
    alignItems: "center",
46
    backgroundColor: "#f5f5f5",
47
  },
48
  title: {
49
    fontSize: 24,
50
    fontWeight: "bold",
51
    color: "#333",
52
  },
53
});
54

55
AppRegistry.registerComponent("App", () => App);
56
AppRegistry.runApplication("App", {
57
  rootTag: document.getElementById("root"),
58
});
59
```
60

61
## Architecture
62

63
React Native Web is built around several core concepts:
64

65
- **Component System**: Complete React Native component library optimized for web rendering
66
- **StyleSheet**: Atomic CSS compilation system with automatic optimization and RTL support  
67
- **Platform APIs**: Web implementations of React Native's platform-specific APIs
68
- **Responder System**: Touch and gesture handling system that works across devices
69
- **Platform Methods**: DOM measurement and focus utilities available on all components
70
- **Accessibility**: Full ARIA support and screen reader compatibility
71
- **Performance**: Virtualization, atomic CSS, and efficient rendering optimizations
72

73
## Capabilities
74

75
### Core Utilities
76

77
Essential utilities for rendering, element creation, and DOM integration. These provide the foundation for React Native Web's compatibility layer.
78

79
```javascript { .api }
80
function render(element: React.Element, container: DOMContainer, callback?: Function): void;
81
function findNodeHandle(componentOrHandle: any): number | null;
82
function processColor(color: ColorValue): string | null;
83
function unstable_createElement(type: string, props?: Object, ...children: any[]): React.Element;
84
function unmountComponentAtNode(container: DOMContainer): boolean;
85
```
86

87
[Core Utilities](./core-utilities.md)
88

89
### Layout Components
90

91
Fundamental layout and container components including View, ScrollView, SafeAreaView, and Modal. These provide the structural foundation for React Native Web applications.
92

93
```javascript { .api }
94
const View: React.ComponentType<ViewProps>;
95
const ScrollView: React.ComponentType<ScrollViewProps>;
96
const SafeAreaView: React.ComponentType<SafeAreaViewProps>;
97
const Modal: React.ComponentType<ModalProps>;
98
const KeyboardAvoidingView: React.ComponentType<KeyboardAvoidingViewProps>;
99
```
100

101
[Layout Components](./layout-components.md)
102

103
### Text and Input
104

105
Text display and input components with advanced typography, accessibility, and internationalization support.
106

107
```javascript { .api }
108
const Text: React.ComponentType<TextProps>;
109
const TextInput: React.ComponentType<TextInputProps>;
110
```
111

112
[Text and Input](./text-input.md)
113

114
### Interactive Components
115

116
User interaction components including buttons, touchables, and pressable elements with comprehensive gesture and accessibility support.
117

118
```javascript { .api }
119
const Button: React.ComponentType<ButtonProps>;
120
const Pressable: React.ComponentType<PressableProps>;
121
const TouchableOpacity: React.ComponentType<TouchableOpacityProps>;
122
const TouchableHighlight: React.ComponentType<TouchableHighlightProps>;
123
const TouchableWithoutFeedback: React.ComponentType<TouchableWithoutFeedbackProps>;
124
```
125

126
[Interactive Components](./interactive-components.md)
127

128
### Media and Graphics
129

130
Image display and media components with support for multiple source formats, caching, and accessibility.
131

132
```javascript { .api }
133
const Image: React.ComponentType<ImageProps>;
134
const ImageBackground: React.ComponentType<ImageBackgroundProps>;
135
```
136

137
[Media Components](./media-components.md)
138

139
### Form Controls
140

141
Form input components including switches, checkboxes, pickers, and progress indicators.
142

143
```javascript { .api }
144
const Switch: React.ComponentType<SwitchProps>;
145
const CheckBox: React.ComponentType<CheckBoxProps>;
146
const Picker: React.ComponentType<PickerProps>;
147
const ProgressBar: React.ComponentType<ProgressBarProps>;
148
const ActivityIndicator: React.ComponentType<ActivityIndicatorProps>;
149
```
150

151
[Form Controls](./form-controls.md)
152

153
### List Components
154

155
High-performance list and virtualization components for handling large datasets efficiently.
156

157
```javascript { .api }
158
const FlatList: React.ComponentType<FlatListProps>;
159
const SectionList: React.ComponentType<SectionListProps>;
160
const VirtualizedList: React.ComponentType<VirtualizedListProps>;
161
const RefreshControl: React.ComponentType<RefreshControlProps>;
162
```
163

164
[List Components](./list-components.md)
165

166
### Platform APIs
167

168
React Native's platform APIs adapted for web environments, including device information, status bar control, system services, and web integrations.
169

170
```javascript { .api }
171
const Platform: {
172
  OS: 'web';
173
  Version: string;
174
  isTesting: boolean;
175
  select: <T>(specifics: {web?: T, default?: T}) => T;
176
};
177

178
const StatusBar: React.ComponentType<StatusBarProps> & {
179
  setBackgroundColor: (color: string, animated?: boolean) => void;
180
  setBarStyle: (style: 'default' | 'light-content' | 'dark-content', animated?: boolean) => void;
181
  setHidden: (hidden: boolean, animation?: 'none' | 'fade' | 'slide') => void;
182
};
183

184
const Dimensions: {
185
  get: (dim: 'window' | 'screen') => {width: number, height: number, scale: number, fontScale: number};
186
  addEventListener: (type: 'change', listener: Function) => void;
187
  removeEventListener: (type: 'change', listener: Function) => void;
188
};
189
```
190

191
[Platform APIs](./platform-apis.md)
192

193
### StyleSheet and Styling
194

195
Advanced styling system with atomic CSS compilation, RTL support, and performance optimizations.
196

197
```javascript { .api }
198
const StyleSheet: {
199
  create: <T>(styles: T) => T;
200
  compose: (style1: any, style2: any) => any;
201
  flatten: (style: any) => Object;
202
  absoluteFillObject: {position: 'absolute', left: 0, right: 0, top: 0, bottom: 0};
203
  hairlineWidth: number;
204
};
205
```
206

207
[StyleSheet](./stylesheet.md)
208

209
### Animation
210

211
Comprehensive animation system with timing functions, easing curves, animated values, and component integration.
212

213
```javascript { .api }
214
const Animated: {
215
  View: React.ComponentType<AnimatedViewProps>;
216
  Text: React.ComponentType<AnimatedTextProps>;
217
  Image: React.ComponentType<AnimatedImageProps>;
218
  ScrollView: React.ComponentType<AnimatedScrollViewProps>;
219
  timing: (value: AnimatedValue, config: TimingAnimationConfig) => CompositeAnimation;
220
  spring: (value: AnimatedValue, config: SpringAnimationConfig) => CompositeAnimation;
221
  decay: (value: AnimatedValue, config: DecayAnimationConfig) => CompositeAnimation;
222
  Value: typeof AnimatedValue;
223
  ValueXY: typeof AnimatedValueXY;
224
};
225

226
const Easing: {
227
  linear: (t: number) => number;
228
  ease: (t: number) => number;
229
  bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => number;
230
  bounce: (t: number) => number;
231
  elastic: (bounciness?: number) => (t: number) => number;
232
  in: (easing: (t: number) => number) => (t: number) => number;
233
  out: (easing: (t: number) => number) => (t: number) => number;
234
  inOut: (easing: (t: number) => number) => (t: number) => number;
235
};
236
```
237

238
[Animation](./animation.md)
239

240
### System Integration
241

242
APIs for integrating with browser and system features including application lifecycle, theme detection, clipboard, linking, alerts, and sharing.
243

244
```javascript { .api }
245
const AppRegistry: {
246
  registerComponent: (appKey: string, componentProvider: () => React.ComponentType) => string;
247
  runApplication: (appKey: string, appParameters: AppParameters) => void;
248
  getAppKeys: () => string[];
249
};
250

251
const Appearance: {
252
  getColorScheme: () => 'light' | 'dark';
253
  addChangeListener: (listener: (preferences: AppearancePreferences) => void) => {remove: () => void};
254
};
255

256
const Alert: {
257
  alert: (title: string, message?: string, buttons?: AlertButton[], options?: AlertOptions) => void;
258
};
259

260
const Clipboard: {
261
  getString: () => Promise<string>;
262
  setString: (content: string) => void;
263
  hasString: () => Promise<boolean>;
264
};
265

266
const Linking: {
267
  openURL: (url: string) => Promise<void>;
268
  canOpenURL: (url: string) => Promise<boolean>;
269
  getInitialURL: () => Promise<string | null>;
270
};
271
```
272

273
[System Integration](./system-integration.md)
274

275
### Accessibility
276

277
Comprehensive accessibility features and screen reader support for inclusive applications.
278

279
```javascript { .api }
280
const AccessibilityInfo: {
281
  announceForAccessibility: (announcement: string) => void;
282
  isScreenReaderEnabled: () => Promise<boolean>;
283
  isBoldTextEnabled: () => Promise<boolean>;
284
  isGrayscaleEnabled: () => Promise<boolean>;
285
  isInvertColorsEnabled: () => Promise<boolean>;
286
  isReduceMotionEnabled: () => Promise<boolean>;
287
  isReduceTransparencyEnabled: () => Promise<boolean>;
288
  setAccessibilityFocus: (reactTag: number) => void;
289
};
290
```
291

292
[Accessibility](./accessibility.md)
293

294
### Hooks
295

296
React hooks for common React Native Web functionality including dimensions, color scheme, and locale context.
297

298
```javascript { .api }
299
function useWindowDimensions(): {width: number, height: number, scale: number, fontScale: number};
300
function useColorScheme(): 'light' | 'dark' | null;
301
function useLocaleContext(): {direction: 'ltr' | 'rtl', locale: string};
302
```
303

304
[Hooks](./hooks.md)
305

306
## Types
307

308
```javascript { .api }
309
type ColorValue = string | null;
310
type DimensionValue = number | string | null;
311

312
interface EdgeInsetsValue {
313
  top: number;
314
  left: number;
315
  right: number;
316
  bottom: number;
317
}
318

319
interface LayoutValue {
320
  x: number;
321
  y: number;
322
  width: number;
323
  height: number;
324
}
325

326
interface LayoutEvent {
327
  nativeEvent: {
328
    layout: LayoutValue;
329
    target: any;
330
  };
331
  timeStamp: number;
332
}
333

334
interface PointValue {
335
  x: number;
336
  y: number;
337
}
338

339
interface PlatformMethods {
340
  blur(): void;
341
  focus(): void;
342
  measure(callback: (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void): void;
343
  measureInWindow(callback: (x: number, y: number, width: number, height: number) => void): void;
344
  measureLayout(
345
    relativeToNativeNode: any,
346
    onSuccess: (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void,
347
    onFail: () => void
348
  ): void;
349
}
350
```