O'Reilly logo

Mastering React Native by Jacob Friedmann, Eric Masiello

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using PanResponder with the Animated API

To round out our animation chapter, we'll explore one more very powerful way to leverage animation. PanResponder is a React Native API for tracking simple gestures. We can use PanResponder to track the user dragging their finger across the screen as a way to transition from panel to panel. As usual, we'll begin by importing PanResponder at the top of our file:

import { 
  StyleSheet, 
  View, 
  LayoutAnimation, 
  Animated, 
  PanResponder 
} from 'react-native'; 

PanResponder needs to track the value of state.pan as it updates. We'll do this by adding a componentWillMount lifecycle method. Here, we'll listen to changes in state.pan by utilizing the addListener method. We'll also add a componentWillUnmount method to remove ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required