---
title: "React Native Animations Revisited - Part III"
description: "Learn how to respond to screen gestures with PanResponder. Check the last part of our Callstack series on React Native animations!"
url: https://www.callstack.com/blog/react-native-animations-revisited-part-3-how-to-handle-gestures-with-panresponder
updated: 2026-10-24T08:39:35.415Z
---

# React Native Animations Revisited - Part III

Learn how to respond to screen gestures with PanResponder. Check the last part of our Callstack series on React Native animations!

_By Mike Chudziak, Head of Engineering @ Callstack · Published 2017-01-17 · Category: Animations_

#### **Pan Responder**

Animations are really important part of modern applications. But sometimes animation is not enough. If we want to respond to screen gestures, and apply some animation as well (i.e. create drag and drop component) — then we need to use **PanResponder**. It is designed to work with **Animated API**, and you can have stunning results after combining those two.

This is last part of series. Here you can check previous ones if you missed some:

- [Simple and pretty LayoutAnimation](https://www.callstack.com/blog/react-native-animations-revisited-part-1-simple-and-pretty-layoutanimation/)
- [Amazing Animated API](https://www.callstack.com/blog/react-native-animations-revisited-part-2-amazing-animated-api/)
- How to handle gestures with PanResponder

**PanResponder** might be quite complicated, especially if you’re on the beginning of your journey with React Native. I’ll try to show you simple usage of this API combined with **Animated API**. Let’s make our square from previous examples draggable. I would also like it scale to **150%** of its size when it’s being dragged. Just look at the image below.

![panresponder iphone 6 gif](https://www.callstack.com/assets/panresponder-iphone-6.gif)

And now let’s see how to do it. :)

Code might look a bit complicated now, but i’ll try to explain it step by step. First thing to look at is _constructor()_. Let’s see what happened there.

[GitHub Gist](https://gist.github.com/callstack-bot/dbba211351729e5749bbd7583541d27a)

We need to specify component’s initial position and width. When using PanResponder with Animations we should declare starting position in X and Y axis. We did take screen’s width and height and adjusted our square to be in the middle. Also we placed default value of scale animation. We want it to be at it’s normal size so **_Animated_**_.Value()_ is set to **1**.

[GitHub Gist](https://gist.github.com/callstack-bot/3887c16e9177d9dd1e6b0162ce6736ea)

Now it’s time to see what happens in _componentWillMount()_ hook. We need to create **PanResponder** here. First two functions are just used to ask to be responder, _onPanResponderGrant()_ is invoked when responder is granted to our component, _onPanResponderMove()_ is called every time component moves, and in _onPanResponderRelease()_ you can tell what to do after finger is released.

And i think all of the hard work is done. Now we only need to clear responder when unmounting component, and attach animation styles (which we already know!) to our component.

## Summary

I hope that makes all the stuff related to animations a bit easier for you. Don’t worry if it’s not clear for you at the moment. Just try playing around with my examples and you will catch it in no time.