CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-gesture-handler

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

—

Pending
Overview
Eval results
Files

components.mddocs/

Enhanced React Native Components

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

Capabilities

ScrollView

Enhanced ScrollView with gesture handler support and automatic RefreshControl integration.

/**
 * Enhanced ScrollView with gesture handler support
 * Drop-in replacement for React Native's ScrollView with improved gesture handling
 */
function ScrollView(props: ScrollViewProps & {
  waitFor?: React.Ref<any> | React.Ref<any>[];
  simultaneousHandlers?: React.Ref<any> | React.Ref<any>[];
}): JSX.Element;

Usage Example:

import React from "react";
import { View, Text } from "react-native";
import { ScrollView } from "react-native-gesture-handler";

function MyScrollView() {
  return (
    <ScrollView
      style={{ flex: 1 }}
      showsVerticalScrollIndicator={false}
      contentContainerStyle={{ padding: 20 }}
    >
      <Text>Scrollable content with enhanced gesture support</Text>
      {/* More content */}
    </ScrollView>
  );
}

FlatList

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

/**
 * Enhanced FlatList with gesture handler support
 * Drop-in replacement for React Native's FlatList with improved performance
 */
function FlatList<T>(props: FlatListProps<T> & {
  waitFor?: React.Ref<any> | React.Ref<any>[];
  simultaneousHandlers?: React.Ref<any> | React.Ref<any>[];
}): JSX.Element;

Usage Example:

import React from "react";
import { Text, View } from "react-native";
import { FlatList } from "react-native-gesture-handler";

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

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

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
}

RefreshControl

Enhanced RefreshControl component with improved gesture coordination.

/**
 * Enhanced RefreshControl with gesture handler support
 * Drop-in replacement for React Native's RefreshControl
 */
function RefreshControl(props: RefreshControlProps): JSX.Element;

Switch

Enhanced Switch component with gesture handler support.

/**
 * Enhanced Switch component with gesture handler support
 * Drop-in replacement for React Native's Switch
 */
function Switch(props: SwitchProps): JSX.Element;

TextInput

Enhanced TextInput with gesture handler support and improved focus management.

/**
 * Enhanced TextInput with gesture handler support
 * Drop-in replacement for React Native's TextInput with better gesture coordination
 */
function TextInput(props: TextInputProps): JSX.Element;

Usage Example:

import React, { useState } from "react";
import { View } from "react-native";
import { TextInput } from "react-native-gesture-handler";

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

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="Enter text here"
        style={{
          borderWidth: 1,
          borderColor: "#ccc",
          padding: 10,
          borderRadius: 5,
        }}
      />
    </View>
  );
}

DrawerLayoutAndroid

Enhanced DrawerLayoutAndroid with gesture handler support.

/**
 * Enhanced DrawerLayoutAndroid with gesture handler support
 * Android-specific drawer layout with improved gesture handling
 */
function DrawerLayoutAndroid(props: DrawerLayoutAndroidProps): JSX.Element;

Text

Enhanced Text component with gesture handler support.

/**
 * Enhanced Text component with gesture handler support
 * Drop-in replacement for React Native's Text component
 */
function Text(props: TextProps): JSX.Element;

Usage Example:

import React from "react";
import { View } from "react-native";
import { Text } from "react-native-gesture-handler";

function MyText() {
  return (
    <View>
      <Text style={{ fontSize: 16, color: "black" }}>
        Enhanced text with gesture support
      </Text>
    </View>
  );
}

Touchable Components

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

TouchableOpacity

Enhanced TouchableOpacity with gesture handler support and improved performance.

/**
 * Enhanced TouchableOpacity with gesture handler support
 * Drop-in replacement for React Native's TouchableOpacity with better performance
 */
function TouchableOpacity(props: {
  onPress?: () => void;
  onLongPress?: () => void;
  onPressIn?: () => void;
  onPressOut?: () => void;
  disabled?: boolean;
  activeOpacity?: number;
  delayLongPress?: number;
  delayPressIn?: number;
  delayPressOut?: number;
  hitSlop?: Insets;
  pressRetentionOffset?: Insets;
  children?: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  testID?: string;
  accessible?: boolean;
  accessibilityLabel?: string;
}): JSX.Element;

interface TouchableOpacityProps {
  onPress?: () => void;
  onLongPress?: () => void;
  onPressIn?: () => void;
  onPressOut?: () => void;
  disabled?: boolean;
  activeOpacity?: number;
  delayLongPress?: number;
  delayPressIn?: number;
  delayPressOut?: number;
  hitSlop?: Insets;
  pressRetentionOffset?: Insets;
  children?: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  testID?: string;
  accessible?: boolean;
  accessibilityLabel?: string;
}

Usage Example:

import React from "react";
import { Text } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";

function MyTouchableOpacity() {
  return (
    <TouchableOpacity
      onPress={() => console.log("TouchableOpacity pressed")}
      activeOpacity={0.7}
      style={{
        backgroundColor: "blue",
        padding: 15,
        borderRadius: 8,
        alignItems: "center",
      }}
    >
      <Text style={{ color: "white", fontSize: 16 }}>Press Me</Text>
    </TouchableOpacity>
  );
}

TouchableHighlight

Enhanced TouchableHighlight with gesture handler support.

/**
 * Enhanced TouchableHighlight with gesture handler support
 * Drop-in replacement for React Native's TouchableHighlight
 */
function TouchableHighlight(props: {
  onPress?: () => void;
  onLongPress?: () => void;
  onPressIn?: () => void;
  onPressOut?: () => void;
  disabled?: boolean;
  activeOpacity?: number;
  underlayColor?: string;
  delayLongPress?: number;
  delayPressIn?: number;
  delayPressOut?: number;
  hitSlop?: Insets;
  pressRetentionOffset?: Insets;
  children?: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  testID?: string;
}): JSX.Element;

interface TouchableHighlightProps {
  onPress?: () => void;
  onLongPress?: () => void;
  onPressIn?: () => void;
  onPressOut?: () => void;
  disabled?: boolean;
  activeOpacity?: number;
  underlayColor?: string;
  delayLongPress?: number;
  delayPressIn?: number;
  delayPressOut?: number;
  hitSlop?: Insets;
  pressRetentionOffset?: Insets;
  children?: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  testID?: string;
}

TouchableWithoutFeedback

Enhanced TouchableWithoutFeedback with gesture handler support.

/**
 * Enhanced TouchableWithoutFeedback with gesture handler support
 * Drop-in replacement for React Native's TouchableWithoutFeedback
 */
function TouchableWithoutFeedback(props: {
  onPress?: () => void;
  onLongPress?: () => void;
  onPressIn?: () => void;
  onPressOut?: () => void;
  disabled?: boolean;
  delayLongPress?: number;
  delayPressIn?: number;
  delayPressOut?: number;
  hitSlop?: Insets;
  pressRetentionOffset?: Insets;
  children?: React.ReactNode;
  accessible?: boolean;
  accessibilityLabel?: string;
  testID?: string;
}): JSX.Element;

interface TouchableWithoutFeedbackProps {
  onPress?: () => void;
  onLongPress?: () => void;
  onPressIn?: () => void;
  onPressOut?: () => void;
  disabled?: boolean;
  delayLongPress?: number;
  delayPressIn?: number;
  delayPressOut?: number;
  hitSlop?: Insets;
  pressRetentionOffset?: Insets;
  children?: React.ReactNode;
  accessible?: boolean;
  accessibilityLabel?: string;
  testID?: string;
}

TouchableNativeFeedback (Android)

Enhanced TouchableNativeFeedback with gesture handler support, Android only.

/**
 * Enhanced TouchableNativeFeedback with gesture handler support
 * Android-only component with native ripple effects
 */
function TouchableNativeFeedback(props: {
  onPress?: () => void;
  onLongPress?: () => void;
  disabled?: boolean;
  background?: any;
  useForeground?: boolean;
  delayLongPress?: number;
  delayPressIn?: number;
  delayPressOut?: number;
  hitSlop?: Insets;
  children?: React.ReactNode;
  testID?: string;
}): JSX.Element;

Utility Types

Common types used across enhanced components.

/**
 * Insets for defining hit areas and press retention
 */
interface Insets {
  top?: number;
  left?: number;
  bottom?: number;
  right?: number;
}

/**
 * Style prop type for views
 */
type StyleProp<T> = T | T[] | null | undefined;

Performance Benefits

The enhanced components provide several performance advantages:

Native Thread Processing

  • Touch events are processed on the native UI thread
  • Reduced JavaScript bridge traffic during interactions
  • Smoother scroll performance and touch responsiveness

Gesture Coordination

  • Better coordination between multiple gesture recognizers
  • Improved handling of simultaneous gestures
  • Reduced conflicts between different touch interactions

Memory Efficiency

  • Optimized memory usage for large lists
  • Better cleanup of gesture recognizers
  • Reduced memory leaks in complex gesture scenarios

Migration Guide

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

// Before (React Native)
import { ScrollView, TouchableOpacity, Text } from "react-native";

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

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

// Additional gesture handler props (optional)
const additionalProps = {
  waitFor: someGestureRef,
  simultaneousHandlers: [gestureRef1, gestureRef2],
};

Install with Tessl CLI

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

docs

advanced-components.md

buttons.md

components.md

constants.md

events.md

gestures.md

index.md

setup.md

tile.json