0
# Enhanced React Native Components
1

2
Drop-in replacements for standard React Native components with enhanced gesture support and performance optimizations.
3

4
## Capabilities
5

6
### ScrollView
7

8
Enhanced ScrollView with gesture handler support and automatic RefreshControl integration.
9

10
```typescript { .api }
11
/**
12
 * Enhanced ScrollView with gesture handler support
13
 * Drop-in replacement for React Native's ScrollView with improved gesture handling
14
 */
15
function ScrollView(props: ScrollViewProps & {
16
  waitFor?: React.Ref<any> | React.Ref<any>[];
17
  simultaneousHandlers?: React.Ref<any> | React.Ref<any>[];
18
}): JSX.Element;
19
```
20

21
**Usage Example:**
22

23
```typescript
24
import React from "react";
25
import { View, Text } from "react-native";
26
import { ScrollView } from "react-native-gesture-handler";
27

28
function MyScrollView() {
29
  return (
30
    <ScrollView
31
      style={{ flex: 1 }}
32
      showsVerticalScrollIndicator={false}
33
      contentContainerStyle={{ padding: 20 }}
34
    >
35
      <Text>Scrollable content with enhanced gesture support</Text>
36
      {/* More content */}
37
    </ScrollView>
38
  );
39
}
40
```
41

42
### FlatList
43

44
Enhanced FlatList with gesture handler support for improved scroll performance and gesture recognition.
45

46
```typescript { .api }
47
/**
48
 * Enhanced FlatList with gesture handler support
49
 * Drop-in replacement for React Native's FlatList with improved performance
50
 */
51
function FlatList<T>(props: FlatListProps<T> & {
52
  waitFor?: React.Ref<any> | React.Ref<any>[];
53
  simultaneousHandlers?: React.Ref<any> | React.Ref<any>[];
54
}): JSX.Element;
55
```
56

57
**Usage Example:**
58

59
```typescript
60
import React from "react";
61
import { Text, View } from "react-native";
62
import { FlatList } from "react-native-gesture-handler";
63

64
const data = [{ id: "1", title: "Item 1" }, { id: "2", title: "Item 2" }];
65

66
function MyFlatList() {
67
  const renderItem = ({ item }) => (
68
    <View style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: "#eee" }}>
69
      <Text>{item.title}</Text>
70
    </View>
71
  );
72

73
  return (
74
    <FlatList
75
      data={data}
76
      renderItem={renderItem}
77
      keyExtractor={(item) => item.id}
78
    />
79
  );
80
}
81
```
82

83
### RefreshControl
84

85
Enhanced RefreshControl component with improved gesture coordination.
86

87
```typescript { .api }
88
/**
89
 * Enhanced RefreshControl with gesture handler support
90
 * Drop-in replacement for React Native's RefreshControl
91
 */
92
function RefreshControl(props: RefreshControlProps): JSX.Element;
93
```
94

95
### Switch
96

97
Enhanced Switch component with gesture handler support.
98

99
```typescript { .api }
100
/**
101
 * Enhanced Switch component with gesture handler support
102
 * Drop-in replacement for React Native's Switch
103
 */
104
function Switch(props: SwitchProps): JSX.Element;
105
```
106

107
### TextInput
108

109
Enhanced TextInput with gesture handler support and improved focus management.
110

111
```typescript { .api }
112
/**
113
 * Enhanced TextInput with gesture handler support
114
 * Drop-in replacement for React Native's TextInput with better gesture coordination
115
 */
116
function TextInput(props: TextInputProps): JSX.Element;
117
```
118

119
**Usage Example:**
120

121
```typescript
122
import React, { useState } from "react";
123
import { View } from "react-native";
124
import { TextInput } from "react-native-gesture-handler";
125

126
function MyTextInput() {
127
  const [text, setText] = useState("");
128

129
  return (
130
    <View style={{ padding: 20 }}>
131
      <TextInput
132
        value={text}
133
        onChangeText={setText}
134
        placeholder="Enter text here"
135
        style={{
136
          borderWidth: 1,
137
          borderColor: "#ccc",
138
          padding: 10,
139
          borderRadius: 5,
140
        }}
141
      />
142
    </View>
143
  );
144
}
145
```
146

147
### DrawerLayoutAndroid
148

149
Enhanced DrawerLayoutAndroid with gesture handler support.
150

151
```typescript { .api }
152
/**
153
 * Enhanced DrawerLayoutAndroid with gesture handler support
154
 * Android-specific drawer layout with improved gesture handling
155
 */
156
function DrawerLayoutAndroid(props: DrawerLayoutAndroidProps): JSX.Element;
157
```
158

159
### Text
160

161
Enhanced Text component with gesture handler support.
162

163
```typescript { .api }
164
/**
165
 * Enhanced Text component with gesture handler support
166
 * Drop-in replacement for React Native's Text component
167
 */
168
function Text(props: TextProps): JSX.Element;
169
```
170

171
**Usage Example:**
172

173
```typescript
174
import React from "react";
175
import { View } from "react-native";
176
import { Text } from "react-native-gesture-handler";
177

178
function MyText() {
179
  return (
180
    <View>
181
      <Text style={{ fontSize: 16, color: "black" }}>
182
        Enhanced text with gesture support
183
      </Text>
184
    </View>
185
  );
186
}
187
```
188

189
## Touchable Components
190

191
Enhanced touchable components that provide better gesture handling and performance compared to React Native's built-in touchables.
192

193
### TouchableOpacity
194

195
Enhanced TouchableOpacity with gesture handler support and improved performance.
196

197
```typescript { .api }
198
/**
199
 * Enhanced TouchableOpacity with gesture handler support
200
 * Drop-in replacement for React Native's TouchableOpacity with better performance
201
 */
202
function TouchableOpacity(props: {
203
  onPress?: () => void;
204
  onLongPress?: () => void;
205
  onPressIn?: () => void;
206
  onPressOut?: () => void;
207
  disabled?: boolean;
208
  activeOpacity?: number;
209
  delayLongPress?: number;
210
  delayPressIn?: number;
211
  delayPressOut?: number;
212
  hitSlop?: Insets;
213
  pressRetentionOffset?: Insets;
214
  children?: React.ReactNode;
215
  style?: StyleProp<ViewStyle>;
216
  testID?: string;
217
  accessible?: boolean;
218
  accessibilityLabel?: string;
219
}): JSX.Element;
220

221
interface TouchableOpacityProps {
222
  onPress?: () => void;
223
  onLongPress?: () => void;
224
  onPressIn?: () => void;
225
  onPressOut?: () => void;
226
  disabled?: boolean;
227
  activeOpacity?: number;
228
  delayLongPress?: number;
229
  delayPressIn?: number;
230
  delayPressOut?: number;
231
  hitSlop?: Insets;
232
  pressRetentionOffset?: Insets;
233
  children?: React.ReactNode;
234
  style?: StyleProp<ViewStyle>;
235
  testID?: string;
236
  accessible?: boolean;
237
  accessibilityLabel?: string;
238
}
239
```
240

241
**Usage Example:**
242

243
```typescript
244
import React from "react";
245
import { Text } from "react-native";
246
import { TouchableOpacity } from "react-native-gesture-handler";
247

248
function MyTouchableOpacity() {
249
  return (
250
    <TouchableOpacity
251
      onPress={() => console.log("TouchableOpacity pressed")}
252
      activeOpacity={0.7}
253
      style={{
254
        backgroundColor: "blue",
255
        padding: 15,
256
        borderRadius: 8,
257
        alignItems: "center",
258
      }}
259
    >
260
      <Text style={{ color: "white", fontSize: 16 }}>Press Me</Text>
261
    </TouchableOpacity>
262
  );
263
}
264
```
265

266
### TouchableHighlight
267

268
Enhanced TouchableHighlight with gesture handler support.
269

270
```typescript { .api }
271
/**
272
 * Enhanced TouchableHighlight with gesture handler support
273
 * Drop-in replacement for React Native's TouchableHighlight
274
 */
275
function TouchableHighlight(props: {
276
  onPress?: () => void;
277
  onLongPress?: () => void;
278
  onPressIn?: () => void;
279
  onPressOut?: () => void;
280
  disabled?: boolean;
281
  activeOpacity?: number;
282
  underlayColor?: string;
283
  delayLongPress?: number;
284
  delayPressIn?: number;
285
  delayPressOut?: number;
286
  hitSlop?: Insets;
287
  pressRetentionOffset?: Insets;
288
  children?: React.ReactNode;
289
  style?: StyleProp<ViewStyle>;
290
  testID?: string;
291
}): JSX.Element;
292

293
interface TouchableHighlightProps {
294
  onPress?: () => void;
295
  onLongPress?: () => void;
296
  onPressIn?: () => void;
297
  onPressOut?: () => void;
298
  disabled?: boolean;
299
  activeOpacity?: number;
300
  underlayColor?: string;
301
  delayLongPress?: number;
302
  delayPressIn?: number;
303
  delayPressOut?: number;
304
  hitSlop?: Insets;
305
  pressRetentionOffset?: Insets;
306
  children?: React.ReactNode;
307
  style?: StyleProp<ViewStyle>;
308
  testID?: string;
309
}
310
```
311

312
### TouchableWithoutFeedback
313

314
Enhanced TouchableWithoutFeedback with gesture handler support.
315

316
```typescript { .api }
317
/**
318
 * Enhanced TouchableWithoutFeedback with gesture handler support
319
 * Drop-in replacement for React Native's TouchableWithoutFeedback
320
 */
321
function TouchableWithoutFeedback(props: {
322
  onPress?: () => void;
323
  onLongPress?: () => void;
324
  onPressIn?: () => void;
325
  onPressOut?: () => void;
326
  disabled?: boolean;
327
  delayLongPress?: number;
328
  delayPressIn?: number;
329
  delayPressOut?: number;
330
  hitSlop?: Insets;
331
  pressRetentionOffset?: Insets;
332
  children?: React.ReactNode;
333
  accessible?: boolean;
334
  accessibilityLabel?: string;
335
  testID?: string;
336
}): JSX.Element;
337

338
interface TouchableWithoutFeedbackProps {
339
  onPress?: () => void;
340
  onLongPress?: () => void;
341
  onPressIn?: () => void;
342
  onPressOut?: () => void;
343
  disabled?: boolean;
344
  delayLongPress?: number;
345
  delayPressIn?: number;
346
  delayPressOut?: number;
347
  hitSlop?: Insets;
348
  pressRetentionOffset?: Insets;
349
  children?: React.ReactNode;
350
  accessible?: boolean;
351
  accessibilityLabel?: string;
352
  testID?: string;
353
}
354
```
355

356
### TouchableNativeFeedback (Android)
357

358
Enhanced TouchableNativeFeedback with gesture handler support, Android only.
359

360
```typescript { .api }
361
/**
362
 * Enhanced TouchableNativeFeedback with gesture handler support
363
 * Android-only component with native ripple effects
364
 */
365
function TouchableNativeFeedback(props: {
366
  onPress?: () => void;
367
  onLongPress?: () => void;
368
  disabled?: boolean;
369
  background?: any;
370
  useForeground?: boolean;
371
  delayLongPress?: number;
372
  delayPressIn?: number;
373
  delayPressOut?: number;
374
  hitSlop?: Insets;
375
  children?: React.ReactNode;
376
  testID?: string;
377
}): JSX.Element;
378
```
379

380
## Utility Types
381

382
Common types used across enhanced components.
383

384
```typescript { .api }
385
/**
386
 * Insets for defining hit areas and press retention
387
 */
388
interface Insets {
389
  top?: number;
390
  left?: number;
391
  bottom?: number;
392
  right?: number;
393
}
394

395
/**
396
 * Style prop type for views
397
 */
398
type StyleProp<T> = T | T[] | null | undefined;
399
```
400

401
## Performance Benefits
402

403
The enhanced components provide several performance advantages:
404

405
### Native Thread Processing
406
- Touch events are processed on the native UI thread
407
- Reduced JavaScript bridge traffic during interactions
408
- Smoother scroll performance and touch responsiveness
409

410
### Gesture Coordination
411
- Better coordination between multiple gesture recognizers
412
- Improved handling of simultaneous gestures
413
- Reduced conflicts between different touch interactions
414

415
### Memory Efficiency
416
- Optimized memory usage for large lists
417
- Better cleanup of gesture recognizers
418
- Reduced memory leaks in complex gesture scenarios
419

420
## Migration Guide
421

422
Replacing React Native components with gesture handler versions is typically straightforward:
423

424
```typescript
425
// Before (React Native)
426
import { ScrollView, TouchableOpacity, Text } from "react-native";
427

428
// After (Gesture Handler)
429
import { ScrollView, TouchableOpacity, Text } from "react-native-gesture-handler";
430
```
431

432
Most props remain the same, with additional gesture-specific props available when needed:
433

434
```typescript
435
// Additional gesture handler props (optional)
436
const additionalProps = {
437
  waitFor: someGestureRef,
438
  simultaneousHandlers: [gestureRef1, gestureRef2],
439
};
440
```