Skip to main content
Version: 3.x

State manager

RNGH3 allows to manually control 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.

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.

begin​

begin: (handlerTag: number) => void;

Triggers onBegin callback on gesture with specified handlerTag.

activate​

activate: (handlerTag: number) => void;

Triggers onActivate callback on gesture with specified handlerTag.

deactivate​

deactivate: (handlerTag: number) => void;

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

fail​

fail: (handlerTag: number) => void;

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