onPanResponderRelease

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.

Exercise 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} />.

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,
    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.

Test yourself

When is onPanResponderRelease called?
- When the gesture starts
- On every move
- When the finger is lifted
- During mount
Show answer

When the finger is lifted — It is called when the finger is lifted.

Release callback

PanResponder.create({ ____: () => setPos({ x: 0, y: 0 }) });

Show answer

PanResponder.create({ onPanResponderRelease: () => setPos({ x: 0, y: 0 }) });

Match the release concepts

onPanResponderRelease

Release moment
setPos

Updates position
dx

Move amount
panHandlers

Spread to View

Next lesson: react-native-gesture-handler

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies