Summary - Gestures
- React Native course
- Intermediate
- Lesson 81/116
- 5 min
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.
Practice 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} />.
Starter code
import React, { useState } from 'react';
import { PanResponder, View } from 'react-native';
export default function Drag() {
const [pos, setPos] = useState({ x: 0, y: 0 });
// Add the move and release callbacks
return <View />;
}Sample 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} />;
}Practice Wrap with a TapGestureHandler
Wrap a <View /> with a <TapGestureHandler onHandlerStateChange={onTap}> and return it. onTap is defined.
Starter code
import React from 'react';
import { TapGestureHandler, View } from 'react-native-gesture-handler';
export default function Tap() {
const onTap = () => console.log('tap');
// Wrap with a TapGestureHandler
return <View />;
}Sample 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>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which callback runs when the finger is lifted?
- onPanResponderRelease Correct answer
- onPanResponderMove
- onMoveShouldSetPanResponder
- onLayout
Explanation: onPanResponderRelease is called when the finger is lifted.
2 Gesture summary
| Term | Meaning |
|---|---|
PanResponder |
Built-in gesture |
onPanResponderMove |
Drag |
onPanResponderRelease |
Release |
TapGestureHandler |
Tap |