onPanResponderRelease
- React Native course
- Intermediate
- Lesson 79/116
- 5 min
Learn release with onPanResponderRelease.
onPanResponderRelease
onPanResponderRelease is called when the finger is lifted from the screen. Here the component usually returns to its place or the final position is saved. This is the 'release' moment.
Example: onPanResponderRelease: () => setPos({ x: 0, y: 0 }) returns the component to the start when the finger is lifted. Or you do nothing to keep the last position.
Practice Reset on release
Create a PanResponder with onMoveShouldSetPanResponder: () => true and onPanResponderRelease: () => setPos({ x: 0, y: 0 }). The pos state is defined. 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 });
// Reset the position on release
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,
onPanResponderRelease: () => setPos({ x: 0, y: 0 }),
});
return <View {...pan.panHandlers} />;
}Release behaviour
At the release moment there are two common choices: return the component to its place, or leave it at the last position. To return it, use setPos({ x: 0, y: 0 }); to leave it, doing nothing is enough.
Some apps snap on release: the component jumps to the nearest corner or target. This is computed inside onPanResponderRelease and written to setPos.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When is onPanResponderRelease called?
- When the gesture starts
- On every move
- When the finger is lifted Correct answer
- During mount
Explanation: It is called when the finger is lifted.
2 Release callback
PanResponder.create({ ____: () => setPos({ x: 0, y: 0 }) });PanResponder.create({ onPanResponderRelease: () => setPos({ x: 0, y: 0 }) });Explanation: onPanResponderRelease captures the release moment.
3 Match the release concepts
| Term | Meaning |
|---|---|
onPanResponderRelease |
Release moment |
setPos |
Updates position |
dx |
Move amount |
panHandlers |
Spread to View |