React Native Pan Responder System Example 2021

                                                            Pan Responder

 

 

                      React Native provides a higher-level API called PanResponder. The touch event object contains raw values, such as the time and location of touches.Many interactions, however, will require the distance and velocity of the touches overtime.The PanResponder intercepts each responder function so that it can maintain a gesture State object containing the distance, velocity, and a few other computed properties. We can create a PanResponder with PanResponder. create(config), where the config object contains any of the following functions:

• onStartShouldSetPanResponder:(e,gestureState)=>{}
• onStartShouldSetPanResponderCapture:(e,gestureState)=>{}
• onMoveShouldSetPanResponder:(e,gestureState)=> {}
• onMoveShouldSetPanResponderCapture:(e,gestureState)=>{}
• onPanResponderReject:(e,gestureState)=>{}
• onPanResponderGrant:(e,gestureState)=>{}
• onPanResponderStart:(e,gestureState)=>{}
• onPanResponderEnd:(e,gestureState)=>{}
• onPanResponderRelease:(e,gestureState)=>{}
• onPanResponderMove:(e,gestureState)=>{}
• onPanResponderTerminate:(e,gestureState)=>{}
• onPanResponderTerminationRequest:(e,gestureState)=>{}
• onShouldBlockNativeResponder:(e,gestureState)=>{} 
  

Each of these wraps a responder function and then calls it with the gestureState object in addition to the original event object. For example, onPanResponderMove wraps onResponderMove.

The gestureState object contains the following properties:

• stateID- The id of the gestureState – persisted as long as there’s at least one touch on screen

• moveX- The latest screen coordinates of the most recently moved touch
  

• moveY- The latest screen coordinates of the most recently moved touch
  

• x0- The screen coordinates at the time the responder was granted

• y0- The screen coordinates at the time the responder was granted
  

• dx- Accumulated distance of the gesture since the touch started

• dy- Accumulated distance of the gesture since the touch started
  

• vx- Current velocity of the gesture
  

• vy- Current velocity of the gesture
  

• numberActiveTouches- Number of touches currently on screen

Wrapping up gesture handling:

 

We built a drag-and-drop gesture from scratch! what we did:

• We used a PanResponder to interact with the gesture responder system. We implemented the onStartShouldSetPanResponder handler to request the global interaction lock, and then we implemented onPanResponderGrant, onPanResponderMove, onPanResponderRelease, and onPanResponderTerminate to keep track of the state of the gesture. 

• We created a generic Draggable component that provides us with a simpler interface for handling the gesture data we care about when building drag-and-drop interactions: onTouchStart, onTouchMove, and onTouchEnd.

• We handled touches by looking at the offset from the first touch event to the current one, and deciding whether or not to move the object. We animated the scale of the object so that it feels like we’re lifting the object off of the board. We animated the position of the object using Animated.spring and Animated. parallel to snap it to a valid position on the board.

• If a new game state was passed in as a prop, we animated the pieces to reflect the latest state of the game board.

 Putting it all together, we were able to achieve an intuitive-feeling, cross-platform drag-and-drop gesture that performs smoothly even on lower-end devices.

 

few recommendations for building gestures:

 

1. Most gestures should use the PanResponder rather than using the underlying View responder props directly.This is because most gestures will need to use the values in the gestureState provided by the PanResponder, which are tricky to calculate on your own. 

 

2. It’s often helpful to separate gesture-related code into a separate component.This ensures we keep the state of the gestures separate from the state of the board. It can also help with performance: the Draggable component will re-render each time its state updates, but this is significantly less costly than if we had to re-render a more complex component like the Board. 

 

3. If possible, test your gestures on different devices as you build them.You may find that your intuition about what should perform better isn’t actually the case, and it’s much easier to work through performance issues one-at-a-time in isolation, rather than all at once when the gesture is finished.    

 

Using transform instead of top and left to avoid costly layout calculations.Using useNativeDriver to reduce the number of messages that must be passed between the native and JavaScript threads.Using PureComponent to prevent unnecessary component re-rendering.