State manager

RNGH3 allows manually controlling the gestures' lifecycle by using GestureStateManager.

State management

Manual state management is based on handlerTag. There are two ways of manual state control. Some gestures also support manualActivation property, which blocks their automatic activation, even if they meet their activation criteria.

Inside gesture definition

If you want to manipulate gesture's state in its callbacks, you can get handlerTag from event parameter.

export default function App() {
const longPress = useLongPressGesture({
  onTouchesDown: (e) => {
    GestureStateManager.activate(e.handlerTag);
  },
  onActivate: () => {
    console.log('LongPress activated!');
  },

Outside gesture definition

If you want to control gesture lifecycle outside of it, you can use handlerTag from created gesture object.

note

The gestures can only be activated after they have begun, that is, after they have received touch events.

export default function App() {
const pan = usePanGesture({
  onActivate: () => {
    console.log('Pan activated!');
  },
});

const longPress = useLongPressGesture({
  onActivate: () => {
    GestureStateManager.activate(pan.handlerTag);
  },

manualActivation

When manualActivation property is set to true on a gesture, it will not activate automatically even if its activation criteria are met. Use GestureStateManager to manipulate its state manually.

In the example below, Pan gesture will not activate by simply panning on the blue box - using GestureStateManager is necessary.

export default function App() {
const pan = usePanGesture({
  onActivate: () => {
    console.log('Pan gesture activated');
  },
  manualActivation: true,
});

return (
  <GestureHandlerRootView style={styles.container}>
    <GestureDetector gesture={pan}>
      <View style={styles.box} />
    </GestureDetector>
  </GestureHandlerRootView>
);

GestureStateManager

GestureStateManager provides methods to manipulate gesture's state imperatively.

activate

activate: (handlerTag: number) => void;

Triggers onActivate callback on the gesture with the specified handlerTag.

deactivate

deactivate: (handlerTag: number) => void;

If the gesture had activated, it triggers the onDeactivate callback. It also triggers the onFinalize callback on the gesture with the specified handlerTag.

fail

fail: (handlerTag: number) => void;

Triggers onFinalize callback on the gesture with the specified handlerTag. If the gesture had activated, it will also trigger onDeactivate callback.