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.

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);
  },

Methods​

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.