Gesture Handler

La librairie de Software Mansion qui reconnaît les gestes (pan, tap, pinch…) côté natif et les combine, avec des callbacks exécutés sur le thread UI.

Mis à jour le 26 octobre 2026

Définition

React Native Gesture Handler est la librairie de Software Mansion qui gère les gestes tactiles de façon native dans React Native. Au lieu du système de réponse tactile en JavaScript de React Native (PanResponder), où chaque mouvement du doigt transite par le thread JS, elle délègue la reconnaissance aux recognizers natifs d’iOS et d’Android, puis expose depuis la version 3 une API à base de hooks : usePanGesture(), useTapGesture(), usePinchGesture(), useLongPressGesture(), attachés à une vue via GestureDetector. Les gestes se composent avec useCompetingGestures, useSimultaneousGestures et useExclusiveGestures pour décrire qui l’emporte quand plusieurs s’appliquent ; ces hooks remplacent Gesture.Pan() et Gesture.Race() de la v2. Quand Reanimated est installé, les callbacks sont automatiquement transformés en worklets et s’exécutent sur le thread UI, ce qui permet de suivre le doigt à chaque frame sans saccade. Elle est aussi une dépendance de React Navigation (drawer, stack JavaScript). Vous la rencontrez pour un swipe-to-delete, une bottom sheet, un carrousel ou un zoom sur image.

Dans une vraie app

L’installation exige un GestureHandlerRootView à la racine de l’app (le template Expo le pose pour vous), sans quoi les gestes ne répondent pas sur Android, souvent sans aucun message. L’API à utiliser aujourd’hui est celle des hooks de la version 3 (usePanGesture et consorts) avec GestureDetector ; le builder Gesture de la v2 et les anciens composants PanGestureHandler ne sont plus la voie recommandée. Les callbacks (onBegin, onActivate, onUpdate, onDeactivate) suivent la machine à états du geste, et onUpdate est appelé à chaque frame.

Le piège central est la composition avec les scrolls et les navigateurs : un Pan horizontal dans une liste verticale, un geste de retour de la stack native, une ScrollView qui avale le geste. les offsets d’activation et d’échec, simultaneousWith et requireToFail sont les réglages à connaître, et il faut tester sur device Android, dont le comportement de dispatch diffère d’iOS. Un geste qui marche sur simulateur iOS et pas sur Android est le cas d’école.

Avec Reanimated, les callbacks sont des worklets : pas de setState ni de navigation dedans sans scheduleOnRN. Pour vérifier qu’un geste est bien géré nativement, console.log dans onUpdate doit venir du runtime UI, et la fluidité doit tenir pendant qu’un setState lourd tourne sur le thread JS.

Sources

Les 35 termes du glossaire

Dans une vraie app

Termes liés

Sources

Un de ces sujets bloque votre app ?