gestures

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

2|Updated Oct 18, 2024
One-click install
npx skills add https://github.com/carlos3g/react-native-playground --skill gestures-carlos3g
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gestures
Source: https://github.com/carlos3g/react-native-playground/tree/main/.agents/skills/react-native-best-practices/references/gestures
Command: npx skills add https://github.com/carlos3g/react-native-playground --skill gestures-carlos3g

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-native, react-native-gesture-handler, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines for implementing and optimizing touch interactions in React Native apps using React Native Gesture Handler.

Core Features & Use Cases

  • Gesture Best Practices: Offers expert advice on implementing gestures like tap, pan, pinch, and swipe effectively.
  • Version Transition Guide: Assists developers in migrating from v2 to v3 of React Native Gesture Handler.
  • API Differences: Highlights the key differences between v2 and v3 APIs for gesture handling.
  • Critical Rules: Outlines essential rules for using GestureHandlerRootView, avoiding common pitfalls, and ensuring stable gesture handling.
  • Quick Start: To get started, navigate to the 'react-native-best-practices/references/gestures' directory and review the 'SKILL.md' file for a detailed guide.

Quick Start

To begin, read the 'SKILL.md' file located in the 'react-native-best-practices/references/gestures' directory to understand the best practices for gesture handling in React Native.

Frequently Asked Questions about gestures

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

FAQPage Schema
What are the best practices for React Native gesture handling?

React Native gesture handling best practices require wrapping your app in GestureHandlerRootView and following critical API rules for tap, pan, pinch, and swipe interactions to ensure stable touch behavior.

How do I migrate React Native Gesture Handler from v2 to v3?

To migrate React Native Gesture Handler from v2 to v3, you need to understand the key API differences between the two versions. This Skill provides a dedicated version transition guide highlighting the changes required for a smooth migration.

Do I need to install React Native Gesture Handler before using these guidelines?

Yes, you must have both React Native and React Native Gesture Handler installed in your project. These dependencies are required prerequisites before implementing the touch interaction best practices outlined in the reference guide.

Why do my React Native touch interactions feel unstable?

Unstable React Native touch interactions often occur when critical rules for GestureHandlerRootView are ignored. This Skill outlines essential rules and common pitfalls to avoid, ensuring your gesture handling remains stable across interactions.

What is the best way to implement pan and pinch gestures in React Native?

The best way to implement pan and pinch gestures in React Native is by following established best practices for the Gesture Handler API. This Skill offers expert advice on configuring these specific touch interactions effectively.