React Native Gesture Responder System Example 2021

                                   Gesture Responder System

                   Gesture Responder System is used for building the complex interaction like dragging.The Gesture Responder System gives us fine-grained control over which components should receive and respond to touch events.Each time the user touches the screen, moves their finger, or lifts their finger, the operating system records an independent event called a “touch event.” Interpreting one or a greater amount of these touch events results in a gesture.A tap gesture may consist of the user touching the screen and lifting their finger immediately. A drag gesture may consist of a user touching the screen, moving their finger around the screen, and then lifting their finger. Touch events can interface in complex manners in versatile applications.The Gesture Response System gives us a set of callbacks which help us handle the right touch events from the right component.

 Responder Lifecycle :

             The responder system determines which view owns the global “interaction lock” at any given time.When granted the interaction lock, a view is known as the “responder”, since it responds to touch events. Generally the responder view should show visual feedback, such as highlighting or moving. While a touch gesture is occuring, the interaction lock may be transferred to an ancestor view of the responder. 

One of the following props will be called for the view requesting the interaction lock:

1. View.props.onResponderGrant: => {} - The request for the interaction lock was granted! The requesting view is now the responder. The view may want to respond to receiving the interaction lock in some way, e.g. by setting some state that renders a highlight.

2. View.props.onResponderReject: => {} - The request for the interaction lock was rejected. The view that owned the interaction lock refused to give it up. 

The responder view’s props will be called as the touch gesture continues:

1.View.props.onResponderMove: => {} - This is called whenever the user moves their finger.

2. View.props.onResponderRelease: => {} - This is called when the user lifts their finger.

3. View.props.onResponderTerminationRequest: => true - Another view has requested the interaction lock. Return false to retain the lock, or true to hand it off.

4. View.props.onResponderTerminate: => {} - The interaction lock has been taken away.

        When a touch starts, the onStartShouldSetResponder prop will be called for the inner-most view containing the touch. If the view returns false (or doesn’t implement the prop), then the parent’s onStartShouldSetResponder prop will be called.  

The portion of the responder lifecycle where touches are “captured” from top to bottom is called the capture phase. The portion of the lifecycle where touches are capture from bottom to top is called the bubble phase. 

Flow Chart :

 

 The same flow happens every time a touch moves, except that onMoveShouldSetResponder and onMoveShouldSetResponderCapture are called instead of onStartShouldSetResponder
and onStartShouldSetResponderCapture.

Touch event object :

            All of the responder function props are called with an event object. The event object contains the property nativeEvent which is an object containing:

1. locationX - The X position of the touch, relative to the responder view

2. locationY - The Y position of the touch, relative to the responder view

3. pageX - The X position of the touch, relative to the root view

4. pageY - The Y position of the touch, relative to the root view

5. timestamp - The time when the touch occurred

6. identifier - The id of the touch

7. target - The id of the view receiving the touch event

8. touches - Array of all current touches on the screen

9. changedTouches - Array of all touch events that have changed since the last event.