0
# React Native
1

2
React Native is a framework for building native mobile applications using React and JavaScript/TypeScript. It enables developers to write code once and deploy to both iOS and Android platforms while maintaining native performance and platform-specific functionality.
3

4
## Package Information
5

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

11
## Core Imports
12

13
```typescript
14
// ESM (recommended)
15
import { View, Text, StyleSheet, AppRegistry } from 'react-native';
16
```
17

18
CommonJS:
19

20
```javascript
21
const { View, Text, StyleSheet, AppRegistry } = require('react-native');
22
```
23

24
## Basic Usage
25

26
```typescript
27
import React from 'react';
28
import { View, Text, StyleSheet, AppRegistry } from 'react-native';
29

30
function App() {
31
  return (
32
    <View style={styles.container}>
33
      <Text>Hello, React Native!</Text>
34
    </View>
35
  );
36
}
37

38
const styles = StyleSheet.create({
39
  container: {
40
    flex: 1,
41
    justifyContent: 'center',
42
    alignItems: 'center',
43
  },
44
});
45

46
// Register the main application component
47
AppRegistry.registerComponent('MyApp', () => App);
48
```
49

50
## AppRegistry
51

52
Register and start your React Native application:
53

54
```javascript { .api }
55
// ESM
56
import {AppRegistry} from 'react-native';
57

58
// CommonJS  
59
const {AppRegistry} = require('react-native');
60

61
// Register the main application component
62
AppRegistry.registerComponent('MyApp', () => App);
63

64
// Run the application (typically called automatically)
65
AppRegistry.runApplication('MyApp', {
66
  rootTag: document.getElementById('react-native-root')
67
});
68
```
69

70
```typescript { .api }
71
interface AppRegistry {
72
  registerComponent(appKey: string, componentProvider: () => React.ComponentType): void;
73
  registerRunnable(appKey: string, run: () => void): void;
74
  registerSection(appKey: string, component: () => React.ComponentType): void;
75
  getApplication(appKey: string, appParameters?: any): {element: React.ReactElement, getStyleElement: () => React.ReactElement};
76
  runApplication(appKey: string, appParameters: any): void;
77
  unmountApplicationComponentAtRootTag(rootTag: number): void;
78
  registerHeadlessTask(taskKey: string, taskProvider: () => any): void;
79
  startHeadlessTask(taskId: number, taskKey: string, data: any): void;
80
}
81
```
82

83
## Quick API Overview
84

85
### Core Components
86
Build your UI with these fundamental components:
87

88
```javascript { .api }
89
// Layout containers
90
import {View, SafeAreaView, ScrollView} from 'react-native';
91

92
// Text display
93
import {Text} from 'react-native';
94

95
// Images
96
import {Image, ImageBackground} from 'react-native';
97

98
// User input
99
import {TextInput, Button, Switch} from 'react-native';
100

101
// Touchables
102
import {TouchableOpacity, TouchableHighlight, Pressable} from 'react-native';
103

104
// Lists  
105
import {FlatList, SectionList} from 'react-native';
106

107
// Feedback
108
import {ActivityIndicator, RefreshControl} from 'react-native';
109

110
// Navigation
111
import {Modal, StatusBar} from 'react-native';
112
```
113

114
### Platform APIs
115
Access platform-specific functionality:
116

117
```javascript { .api }
118
// Device info
119
import {Platform, Dimensions, PixelRatio} from 'react-native';
120

121
// System state
122
import {AppState, BackHandler, Keyboard} from 'react-native';
123

124
// External integration
125
import {Linking, Share} from 'react-native';
126

127
// Native modules
128
import {NativeModules, NativeEventEmitter} from 'react-native';
129
```
130

131
### Styling System
132
Style your components with flexible styling APIs:
133

134
```javascript { .api }
135
// Core styling
136
import {StyleSheet} from 'react-native';
137

138
// Color utilities
139
import {processColor, PlatformColor, DynamicColorIOS} from 'react-native';
140

141
// Appearance
142
import {Appearance, useColorScheme} from 'react-native';
143
```
144

145
### Animation System
146
Create smooth animations and interactions:
147

148
```javascript { .api }
149
// Animation APIs
150
import {Animated, Easing, LayoutAnimation} from 'react-native';
151

152
// Gesture handling
153
import {PanResponder} from 'react-native';
154

155
// Performance utilities
156
import {InteractionManager} from 'react-native';
157
```
158

159
### User Interaction
160
Handle user interactions and system dialogs:
161

162
```javascript { .api }
163
// System dialogs
164
import {Alert, Share} from 'react-native';
165

166
// Device feedback
167
import {Vibration} from 'react-native';
168

169
// Platform-specific
170
import {ActionSheetIOS, ToastAndroid} from 'react-native';
171
```
172

173
## React Hooks
174

175
React Native provides custom hooks for common use cases:
176

177
```javascript { .api }
178
// Responsive design
179
import {useWindowDimensions, useColorScheme} from 'react-native';
180

181
function MyComponent() {
182
  const {width, height} = useWindowDimensions();
183
  const colorScheme = useColorScheme();
184
  
185
  return (
186
    <View style={{
187
      width,
188
      backgroundColor: colorScheme === 'dark' ? 'black' : 'white'
189
    }}>
190
      <Text>Responsive component</Text>
191
    </View>
192
  );
193
}
194
```
195

196
## Architecture Overview
197

198
React Native apps consist of:
199

200
1. **JavaScript Layer** - Your React components and business logic
201
2. **Bridge** - Communication layer between JavaScript and native code
202
3. **Native Layer** - Platform-specific native modules and UI components
203

204
```javascript { .api }
205
// Access native modules
206
import {NativeModules} from 'react-native';
207

208
// Create custom native event emitters  
209
import {NativeEventEmitter} from 'react-native';
210

211
// Access TurboModules (new architecture)
212
import {TurboModuleRegistry} from 'react-native';
213

214
// Low-level UI management
215
import {UIManager, findNodeHandle} from 'react-native';
216
```
217

218
## Platform Differences
219

220
React Native provides platform-specific APIs and components:
221

222
```javascript { .api }
223
// Check current platform
224
import {Platform} from 'react-native';
225

226
if (Platform.OS === 'ios') {
227
  // iOS-specific code
228
} else if (Platform.OS === 'android') {
229
  // Android-specific code
230
}
231

232
// Platform-specific components
233
import {ActionSheetIOS} from 'react-native'; // iOS only
234
import {ToastAndroid, BackHandler} from 'react-native'; // Android only
235
```
236

237
## Comprehensive Documentation
238

239
For detailed API references and usage examples, see the specialized documentation:
240

241
- **[Core Components](./core-components.md)** - View, Text, ScrollView, Image, TextInput, Lists, Touchables, and more
242
- **[Platform APIs](./platform-apis.md)** - Platform detection, device info, app state, keyboard, linking, and system integration
243
- **[Styling System](./styling.md)** - StyleSheet, colors, appearance, and theming
244
- **[Animation & Interaction](./animation.md)** - Animated API, Easing, LayoutAnimation, PanResponder, and interaction management
245
- **[User Interaction](./user-interaction.md)** - Alerts, sharing, vibration, haptics, and platform-specific UI
246
- **[Native Bridge](./native-bridge.md)** - NativeModules, TurboModules, event emitters, and native integration
247
- **[React Hooks](./react-hooks.md)** - useColorScheme, useWindowDimensions, and responsive utilities
248

249
## Type Definitions
250

251
```typescript { .api }
252
// Core types for React Native development
253
interface ReactNativeCore {
254
  // Component types
255
  ComponentType<P = {}> = React.ComponentType<P>;
256
  ReactElement = React.ReactElement;
257
  
258
  // Style types
259
  ViewStyle: object;
260
  TextStyle: object;
261
  ImageStyle: object;
262
  
263
  // Event types
264
  NativeSyntheticEvent<T>: {
265
    nativeEvent: T;
266
    currentTarget: number;
267
    target: number;
268
  };
269
  
270
  // Layout types
271
  LayoutEvent: NativeSyntheticEvent<{
272
    layout: {x: number; y: number; width: number; height: number};
273
  }>;
274
}
275

276
// Platform information
277
interface PlatformStatic {
278
  OS: 'ios' | 'android' | 'windows' | 'macos' | 'web';
279
  Version: string | number;
280
  isPad?: boolean;
281
  isTesting?: boolean;
282
  select<T>(specifics: {ios?: T; android?: T; default?: T}): T;
283
}
284

285
// Dimensions
286
interface ScaledSize {
287
  width: number;
288
  height: number;
289
  scale: number;
290
  fontScale: number;
291
}
292

293
interface DimensionsStatic {
294
  get(dim: 'window' | 'screen'): ScaledSize;
295
  addEventListener(type: 'change', handler: (dims: {window: ScaledSize; screen: ScaledSize}) => void): void;
296
  removeEventListener(type: 'change', handler: Function): void;
297
}
298
```
299

300
React Native provides a comprehensive set of APIs for building cross-platform mobile applications with native performance and platform-specific experiences.