react-native-gesture-handler icon indicating copy to clipboard operation
react-native-gesture-handler copied to clipboard

Migration from hammer

Open m-bert opened this issue 3 years ago • 0 comments

Description

This PR introduces new approach for RNGH on web as a response to issue #902. Main point is removing hammer.js and using pointer events instead. It is based mainly on Android implementation of GestureHandler, so it represents similar behavior.

Note that hammer.js is still enabled by default.

Each handler has set of methods called on specific event:

  • onDownAction - called when new pointer is placed on the handler
    • onPointerAdd - this method is called manually when handler receives another pointer
  • onUpAction - called when pointer is removed from the handler
    • onPointerRemove - similar to onPointerAdd, it is called when pointer is released from handler, but there are still remaining pointers on handler
  • onMoveAction - called when pointers move in bounds of handler
  • onOutOfBoundsAction - called when pointer moves outside of handler (note that it had to be tracked first, so it requires onDownAction to trigger first)
  • onOutAction - called when pointer leaves handler boundaries
  • onEnterAction - called when pointer returns to handler
  • onCancelAction - called when pointer gets canceled (for example by ScrollView)

Usage

To enable new implementation, call enableExperimentalWebImplementation() in the root of the project.

Structure

New implementation is located in src/web directory, while the old one is still available in web_hammer.

  • Detectors
    • RotationGestureDetector - it is used to calculate rotations in RotationGestureHandler
    • ScaleGestureDetector - it is used to calculate scaling in PinchGestureHandler
  • Handlers
    • This directory contains all handlers specific handlers along with GestureHandler base class
  • Tools
    • Here are located all additional classes:
      • Tracker - keeps track of pointers and their velocity
      • InteractionManager - it is used to properly handle simultaneous and waitFor relations
      • EventManager - it receives events from browser, and then calls callback received from handler
      • GestureHandlerOrchestrator - it is responsible for handling handlers state changes

Test plan

Tested on example app

m-bert avatar Aug 08 '22 13:08 m-bert