---
title: "Pan Gesture — React Native Gestures and Animations"
url: https://daily.dev/posts/pan-gesture-react-native-gestures-and-animations-6ispfeitb
source_url: https://www.youtube.com/watch?v=fNfOCFslxOg
type: video:youtube
source: "William Candillon"
published: 2026-06-17T14:03:58.323Z
updated: 2026-06-17T14:04:21.244Z
tags: ["javascript", "react-native"]
reading_time: 13
upvotes: 1
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Pan Gesture — React Native Gestures and Animations

**[William Candillon](https://daily.dev/sources/wcandillon)** · 13 min read · 1 upvotes · 0 comments

## Summary

A tutorial on building pan gesture interactions in React Native using Reanimated 2. Covers wrapping a card in a PanGestureHandler, using useSharedValue for x/y translation, useAnimatedGestureHandler to track gesture state via a context object, and useAnimatedStyle to apply transforms. Also demonstrates adding momentum with withDecay animation and clamping card movement within container bounds.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.youtube.com/watch?v=fNfOCFslxOg>

---

Tags: [#javascript](https://daily.dev/tags/javascript), [#react-native](https://daily.dev/tags/react-native)

[View this post on daily.dev](https://daily.dev/posts/pan-gesture-react-native-gestures-and-animations-6ispfeitb)