0
# Setup and Root Components
1

2
Essential components and setup required for gesture handlers to function properly in React Native applications.
3

4
## Capabilities
5

6
### GestureHandlerRootView
7

8
Root component that must wrap your application for gesture handlers to work properly. This component sets up the necessary native infrastructure for gesture recognition.
9

10
```typescript { .api }
11
/**
12
 * Root component required for gesture handlers to function
13
 * Must be placed at the root of your app component tree
14
 */
15
function GestureHandlerRootView(props: {
16
  style?: StyleProp<ViewStyle>;
17
  children?: React.ReactNode;
18
}): JSX.Element;
19
```
20

21
**Usage Example:**
22

23
```typescript
24
import React from "react";
25
import { GestureHandlerRootView } from "react-native-gesture-handler";
26
import { YourAppContent } from "./YourAppContent";
27

28
export default function App() {
29
  return (
30
    <GestureHandlerRootView style={{ flex: 1 }}>
31
      <YourAppContent />
32
    </GestureHandlerRootView>
33
  );
34
}
35
```
36

37
### gestureHandlerRootHOC (Deprecated)
38

39
Higher-order component for wrapping your root component with gesture handler support. This is the legacy approach and is deprecated in favor of `GestureHandlerRootView`.
40

41
```typescript { .api }
42
/**
43
 * HOC for wrapping app root with gesture handler support (deprecated)
44
 * @param Component - React component to wrap
45
 * @param containerStyles - Optional styles for the container
46
 * @deprecated Use GestureHandlerRootView instead
47
 */
48
function gestureHandlerRootHOC<T>(
49
  Component: React.ComponentType<T>,
50
  containerStyles?: StyleProp<ViewStyle>
51
): React.ComponentType<T>;
52
```
53

54
**Usage Example (Deprecated):**
55

56
```typescript
57
import { gestureHandlerRootHOC } from "react-native-gesture-handler";
58
import { YourAppContent } from "./YourAppContent";
59

60
// Don't use this approach - use GestureHandlerRootView instead
61
export default gestureHandlerRootHOC(YourAppContent);
62
```
63

64
### Web Implementation Functions
65

66
Functions for configuring web-specific gesture behavior. These are mostly deprecated as the new implementation is enabled by default.
67

68
```typescript { .api }
69
/**
70
 * Enable experimental web implementation (deprecated - no-op)
71
 * New implementation is enabled by default
72
 * @deprecated New web implementation is default
73
 */
74
function enableExperimentalWebImplementation(): void;
75

76
/**
77
 * Enable legacy web implementation (deprecated)
78
 * Falls back to the older web gesture implementation
79
 * @deprecated Use new implementation
80
 */
81
function enableLegacyWebImplementation(): void;
82
```
83

84
## Setup Requirements
85

86
### React Native Configuration
87

88
After installing react-native-gesture-handler, you need to:
89

90
1. **iOS**: Run `cd ios && pod install` to install iOS dependencies
91
2. **Android**: The library auto-links, but ensure your MainActivity extends ReactFragmentActivity
92
3. **Metro Configuration**: No additional Metro configuration required for recent versions
93

94
### Root Component Setup
95

96
The most important setup step is wrapping your root component:
97

98
```typescript
99
// ✅ Correct setup
100
import React from "react";
101
import { GestureHandlerRootView } from "react-native-gesture-handler";
102

103
export default function App() {
104
  return (
105
    <GestureHandlerRootView style={{ flex: 1 }}>
106
      {/* Your app content */}
107
    </GestureHandlerRootView>
108
  );
109
}
110

111
// ❌ Incorrect - missing root wrapper
112
export default function App() {
113
  return (
114
    <View style={{ flex: 1 }}>
115
      {/* Gestures won't work properly without GestureHandlerRootView */}
116
    </View>
117
  );
118
}
119
```
120

121
### Platform-Specific Considerations
122

123
**iOS:**
124
- Requires iOS 9.0 or later
125
- Full support for all gesture types
126
- Native UIKit gesture recognizer integration
127

128
**Android:**
129
- Requires Android API level 16 or later
130
- Full support for all gesture types
131
- Native Android gesture system integration
132

133
**Web:**
134
- Modern browsers with touch/pointer event support
135
- Automatic fallback for older browsers
136
- CSS touch-action integration for optimal performance
137

138
### Integration with React Navigation
139

140
When using with React Navigation, ensure the GestureHandlerRootView wraps your navigation container:
141

142
```typescript
143
import React from "react";
144
import { NavigationContainer } from "@react-navigation/native";
145
import { GestureHandlerRootView } from "react-native-gesture-handler";
146
import { YourNavigator } from "./navigation";
147

148
export default function App() {
149
  return (
150
    <GestureHandlerRootView style={{ flex: 1 }}>
151
      <NavigationContainer>
152
        <YourNavigator />
153
      </NavigationContainer>
154
    </GestureHandlerRootView>
155
  );
156
}
157
```