Gesture Handler integration in React Native

Introduction

Gesture handlers let your app respond to touches like taps, swipes, and drags. They make your app feel smooth and natural.

You want to detect a tap on a button or image.

You want to add swipe actions to a list item.

You want to drag and move an object on the screen.

You want to handle complex gestures like pinch or long press.

You want better control over touch events than the default React Native touchables.

Syntax

React Native

import { GestureHandlerRootView, TapGestureHandler } from 'react-native-gesture-handler';
import { View } from 'react-native';

function MyComponent() {
  const onSingleTap = () => {
    console.log('Tapped!');
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <TapGestureHandler onActivated={onSingleTap}>
        <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
      </TapGestureHandler>
    </GestureHandlerRootView>
  );
}

Always wrap your app or screen with GestureHandlerRootView to enable gesture handling.

Use specific gesture handlers like TapGestureHandler, PanGestureHandler, etc., for different gestures.

Examples

A simple tap gesture that shows an alert when tapped.

React Native

import { GestureHandlerRootView, TapGestureHandler } from 'react-native-gesture-handler';
import { View } from 'react-native';

<TapGestureHandler onActivated={() => alert('Tapped!')}>
  <View style={{ width: 50, height: 50, backgroundColor: 'red' }} />
</TapGestureHandler>

A pan gesture that logs horizontal drag distance as you move your finger.

React Native

import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';
import { View } from 'react-native';

<PanGestureHandler onGestureEvent={event => console.log(event.nativeEvent.translationX)}>
  <View style={{ width: 100, height: 100, backgroundColor: 'green' }} />
</PanGestureHandler>

Sample App

This app shows a blue box in the center. When you tap the box, an alert pops up saying "You tapped the box!". The whole screen is wrapped in GestureHandlerRootView to enable gestures.

React Native

import React from 'react';
import { View, Text, StyleSheet, Alert } from 'react-native';
import { GestureHandlerRootView, TapGestureHandler } from 'react-native-gesture-handler';

export default function App() {
  const onTap = () => {
    Alert.alert('You tapped the box!');
  };

  return (
    <GestureHandlerRootView style={styles.container}>
      <TapGestureHandler onActivated={onTap}>
        <View style={styles.box} />
      </TapGestureHandler>
      <Text style={styles.text}>Tap the blue box</Text>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  box: { width: 150, height: 150, backgroundColor: 'blue', borderRadius: 10 },
  text: { marginTop: 20, fontSize: 18 }
});

Important Notes

Make sure to install and link react-native-gesture-handler properly before using it.

Wrap your app's root component with GestureHandlerRootView to avoid gesture conflicts.

Gesture handlers provide better performance and flexibility than default touchables.

Summary

Gesture Handler lets you detect and respond to user touches like taps and swipes.

Wrap your app with GestureHandlerRootView to enable gestures.

Use specific handlers like TapGestureHandler for different gestures.