Summary - Gestures

Combine PanResponder and gesture handler to write a draggable card.

Summary - Gestures

We learned two paths for gestures: the built-in PanResponder and the react-native-gesture-handler library. PanResponder uses three main callbacks: onMoveShouldSetPanResponder (start), onPanResponderMove (drag), onPanResponderRelease (release).

gestureState.dx and dy give the move amount. The library uses the native engine with ready-made components like TapGestureHandler and PanGestureHandler; it is smoother.

Exercise PanResponder: move and release

Create a PanResponder with onMoveShouldSetPanResponder: () => true, onPanResponderMove: (e, g) => setPos({ x: g.dx, y: g.dy }) and onPanResponderRelease: () => setPos({ x: 0, y: 0 }). Return <View {...pan.panHandlers} />.

Show example solution

import React, { useState } from 'react';
import { PanResponder, View } from 'react-native';

export default function Drag() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const pan = PanResponder.create({
    onMoveShouldSetPanResponder: () => true,
    onPanResponderMove: (e, g) => setPos({ x: g.dx, y: g.dy }),
    onPanResponderRelease: () => setPos({ x: 0, y: 0 }),
  });
  return <View {...pan.panHandlers} />;
}

Exercise Wrap with a TapGestureHandler

Wrap a <View /> with a <TapGestureHandler onHandlerStateChange={onTap}> and return it. onTap is defined.

Show example solution

import React from 'react';
import { TapGestureHandler, View } from 'react-native-gesture-handler';

export default function Tap() {
  const onTap = () => console.log('tap');
  return (
    <TapGestureHandler onHandlerStateChange={onTap}>
      <View />
    </TapGestureHandler>
  );
}

Test yourself

Which callback runs when the finger is lifted?
- onPanResponderRelease
- onPanResponderMove
- onMoveShouldSetPanResponder
- onLayout
Show answer

onPanResponderRelease — onPanResponderRelease is called when the finger is lifted.
Gesture summary

PanResponder

Built-in gesture
onPanResponderMove

Drag
onPanResponderRelease

Release
TapGestureHandler

Tap

Next lesson: Light/dark theme

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies