skills.rest
software-mansion-labs
software-mansion-labsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

gestures

Implement React Native Gesture Handler touch interactions across gesture types.

265|12|Updated Jan 27, 2026
Search Tags:#react-native#gestures#rotation#hover#pan#gesture-handler#pinch
One-click install
npx skills add https://github.com/software-mansion-labs/skills --skill gestures-software-mansion-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gestures
Source: https://github.com/software-mansion-labs/skills/tree/main/skills/react-native-best-practices/references/gestures
Command: npx skills add https://github.com/software-mansion-labs/skills --skill gestures-software-mansion-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Complex, error-prone gesture implementations in React Native are hard to scale across components and platforms. This Skill provides production-ready patterns for using React Native Gesture Handler to build reliable tap, pan, pinch, rotation, hover, and fling interactions, while guiding migration paths between v2 and the hook-based v3 APIs.

Core Features & Use Cases

  • Clear, production-ready patterns for common gesture types (tap, pan, pinch, rotation, hover, long press, fling).
  • Guidance on cross-component interactions and performance considerations, including usage within ScrollView, modals, and SVG, as well as correct root view usage and gesture composition.
  • Migration guidance from v2 builder API to v3 hook API, including memoization, worklets considerations, and Reanimated integration.

Quick Start

Wrap your app with GestureHandlerRootView and start using the hook-based gestures (e.g., usePanGesture) for interactions.

Frequently Asked Questions about gestures

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Does React Native Gesture Handler require special bridging patterns for JavaScript thread calls?▼

Yes, React Native Gesture Handler requires safe bridging patterns like scheduleOnRN for JS-thread calls. Enforcing this bridging model alongside strict memoization rules ensures robust touch interactions without performance degradation.

How do I implement reliable pan and pinch gestures in React Native without conflicts?▼

To implement reliable React Native gestures, wrap your app with GestureHandlerRootView and use the hook-based v3 APIs. This ensures proper event handling and avoids common touch conflicts across components like ScrollView and modals.

What is the best way to migrate React Native Gesture Handler from v2 to v3?▼

Migrating React Native Gesture Handler from v2 to v3 involves transitioning from the builder API to the hook-based API. You must apply memoization rules, address worklet threading considerations, and integrate Reanimated correctly.

Why do my React Native gestures stop working inside a ScrollView or modal?▼

React Native gestures often fail inside ScrollView or modals due to incorrect root view setup. Wrapping your application with GestureHandlerRootView establishes the necessary touch hierarchy to resolve these event conflicts.

Can I use React Native Gesture Handler for rotation, hover, and fling interactions simultaneously?▼

Yes, React Native Gesture Handler supports combining tap, pan, pinch, rotation, hover, and fling interactions. You achieve this by applying gesture composition patterns and adhering to the threading model for smooth execution.

Does React Native Gesture Handler require special bridging patterns for JavaScript thread calls?▼

Yes, React Native Gesture Handler requires safe bridging patterns like scheduleOnRN for JS-thread calls. Enforcing this bridging model alongside strict memoization rules ensures robust touch interactions without performance degradation.

Related Skills

Explore More Software Engineering Skills→
carlos3gcarlos3g
2

gestures

Implement touch gestures in React Native with Gesture Handler best practices.

Community
Advanced
oldwombatoldwombat

animating-react-native-expo

Select Reanimated v4 primitives for React Native Expo animations and gestures.

Community
Intermediate
treesus6treesus6
1

erne-animate

Create gesture-driven UI animations in React Native with Reanimated and Gesture Handler.

Community
Intermediate
FutureAtomsFutureAtoms
1

react-native-2026-reanimated-moti

Create React Native animations with Reanimated 3 and Moti.

Community
Advanced