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 the listener once the component is unmounted:

componentWillMount() { 
  this.dragPosition = 0; 
  this.panListener = this.state.pan.addListener((value) => { 
    this.dragPosition = value.value; 
  }); 
} 
 
componentWillUnmount...