handler-fling.md

id	handler-fling
title	FlingGestureHandler
sidebar_label	FlingGestureHandler

A discrete gesture handler that activates when the movement is sufficiently long and fast. Handler gets ACTIVE when movement is sufficiently long and it did not take too much time. When handler gets activated it will turn into END state when finger is released. The handler will fail to recognize if the finger is lifted before being activated. The handler is implemented using UISwipeGestureRecognizer on iOS and from scratch on Android.

Properties

See set of properties inherited from base handler class. Below is a list of properties specific to FlingGestureHandler component:

---

direction

Expressed allowed direction of movement. It's possible to set ona or many direction in one parameter:

direction={Directions.RIGHT | Directions.LEFT}

or

direction={Directions.DOWN}

---

numberOfPointers

Determinate exact number of point required to handle the fling gesture.

Event data

Gesture events provided to FlingGestureHandler callbacks does not include any handler specific attributes beside the common set of event attributes from base handler class.

Example

See the fling example from GestureHandler Example App or view it directly on your phone by visiting our expo demo.

const LongPressButton = () => (
  <FlingGestureHandler
      direction={Directions.RIGHT | Directions.LEFT}
      onHandlerStateChange={({ nativeEvent }) => {
        if (nativeEvent.state === State.ACTIVE) {
          Alert.alert("I'm flinged!");
        }
      }}>
      <View style={styles.box} />
  </FlingGestureHandler>
);