Gesture Handlers

    With the library react-native-gesture-hander, we can use the native gesture recognition APIs.

    We can use these React components to detect gestures:

    • PanGestureHandler
    • TapGestureHandler
    • LongPressGestureHandler
    • RotationGestureHandler
    • FlingGestureHandler
    • PinchGestureHandler
    • ForceTouchGestureHandler

    States

    A gesture is always in one of the following states:

    • UNDETERMINED
    • BEGAN
    • ACTIVE
    • END
    • CANCELLED
    • FAILED

    The onHandlerStateChange prop is called when the state changes.

    Events

    Any change in the gesture (e.g. the user moving their finger) will trigger an event - we can listen for events with the onGestureEvent prop.

    PanGestureHandler event metadata includes:

    • x
    • y
    • translationX
    • translationY
    • velocityX
    • velocityY

    These can become Animated.Values.

    Example

    Previous:
    Pan Responder
    Next:
    Component Libraries
    Contents
    1. States
    2. Events
    3. Example

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Check it out!

    Community Resources

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!