tessl/npm-react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native

—

Pending

Overview

Eval results

Files

Setup and Root Components

Name: tessl/npm-react-native-gesture-handler
Author: tessl

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

Capabilities

GestureHandlerRootView

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

/**
 * Root component required for gesture handlers to function
 * Must be placed at the root of your app component tree
 */
function GestureHandlerRootView(props: {
  style?: StyleProp<ViewStyle>;
  children?: React.ReactNode;
}): JSX.Element;

Usage Example:

import React from "react";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { YourAppContent } from "./YourAppContent";

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <YourAppContent />
    </GestureHandlerRootView>
  );
}

gestureHandlerRootHOC (Deprecated)

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

/**
 * HOC for wrapping app root with gesture handler support (deprecated)
 * @param Component - React component to wrap
 * @param containerStyles - Optional styles for the container
 * @deprecated Use GestureHandlerRootView instead
 */
function gestureHandlerRootHOC<T>(
  Component: React.ComponentType<T>,
  containerStyles?: StyleProp<ViewStyle>
): React.ComponentType<T>;

Usage Example (Deprecated):

import { gestureHandlerRootHOC } from "react-native-gesture-handler";
import { YourAppContent } from "./YourAppContent";

// Don't use this approach - use GestureHandlerRootView instead
export default gestureHandlerRootHOC(YourAppContent);

Web Implementation Functions

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

/**
 * Enable experimental web implementation (deprecated - no-op)
 * New implementation is enabled by default
 * @deprecated New web implementation is default
 */
function enableExperimentalWebImplementation(): void;

/**
 * Enable legacy web implementation (deprecated)
 * Falls back to the older web gesture implementation
 * @deprecated Use new implementation
 */
function enableLegacyWebImplementation(): void;

Setup Requirements

React Native Configuration

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

iOS: Run cd ios && pod install to install iOS dependencies
Android: The library auto-links, but ensure your MainActivity extends ReactFragmentActivity
Metro Configuration: No additional Metro configuration required for recent versions

Root Component Setup

The most important setup step is wrapping your root component:

// ✅ Correct setup
import React from "react";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app content */}
    </GestureHandlerRootView>
  );
}

// ❌ Incorrect - missing root wrapper
export default function App() {
  return (
    <View style={{ flex: 1 }}>
      {/* Gestures won't work properly without GestureHandlerRootView */}
    </View>
  );
}

Platform-Specific Considerations

iOS:

Requires iOS 9.0 or later
Full support for all gesture types
Native UIKit gesture recognizer integration

Android:

Requires Android API level 16 or later
Full support for all gesture types
Native Android gesture system integration

Web:

Modern browsers with touch/pointer event support
Automatic fallback for older browsers
CSS touch-action integration for optimal performance

Integration with React Navigation

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

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { YourNavigator } from "./navigation";

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        <YourNavigator />
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}

Install with Tessl CLI

npx tessl i tessl/npm-react-native-gesture-handler

docs

advanced-components.md