Mastering React Native

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