react-native-gifted-touch

RNGiftedTouch is a react native component that allows to handle single, double and long presses on a single element effortlessly.

Installation

npm install react-native-gifted-touch

or if you use yarn

yarn add react-native-gifted-touch

Example

import React from 'react';
import { Text } from 'react-native';
import RNGiftedTouch from 'react-native-gifted-touch';

function Component() {
  return (
    <RNGiftedTouch
      onSinglePress={(event, gestureState) =>
        console.log('handle single press')
      }
      onDoublePress={(event, gestureState) =>
        console.log('handle double press')
      }
      onLongPress={(event, gestureState) => console.log('handle long press')}
      longPressDelay={800}
      doublePressDelay={500}
    >
      <Text>I'm a touchable...</Text>
    </RNGiftedTouch>
  );
}

Props

| Attributes | Type | Default | Required | Description | | :--------------- | :--------: | :-----: | :------: | :---------------------------------------------------------------------------------------: | | onSinglePress | Function | null | false | Single press handler on the element | | onDoublePress | Function | null | false | Double press handler on the element | | onLongPress | Function | null | false | Long press handler on the element | | longPressDelay | Number | 700 | false | Delay in ms before triggering long press | | doublePressDelay | Number | 400 | false | Delay in ms before triggering double press, should always be less than longPressDelay |

onSinglePress(event, gestureState)

The single press handler on the component.

onDoublePress(event, gestureState)

The double press handler on the component.

onLongPress(event, gestureState)

The long press handler on the component.

Quirks & Limitations

• For this component to work as intended longPressDelay should always be greater than doublePressDelay.
• You might notice a slight delay in ms before onSinglePress is invoked. The delay is exactly equal to the value of doublePressDelay. This is because the single press event is queued using a timeout and is delayed till doublePressDelay duration is elapsed, so as to trigger the double press event if it receives one.