Gesture Responder System

Unlike web applications, users interact with mobile applications using a touchscreen. Users can interact on a mobile phone using gestures, and React Native’s gestures responder system allows us to track and respond to gestures made by the user on our app’s screen. Besides touch, swiping is one of the most common gestures. In this lesson, we’ll cover the following gestures:

• Scrolling

• Swiping

• Responsive touch feedback

Scrolling

Gestures control everything on a mobile phone on the screen. Scrolling on a web application is done by either dragging the scrollbar back and forth or spinning the mouse wheel. On mobile phones, everything is controlled by gestures. For example, to scroll on a mobile screen, we physically pull the content by moving our fingers on the screen.

Implementing scroll capability is not easy, especially when adding velocity and drag motion, but thanks to React Native, we don’t have to do it ourselves. Most of this stuff is handled by React Native’s gesture response system.

The ScrollView component handles most of this complex task. We have already learned about ScrollView and how it works in this lesson.

Note: Low-level parts of the UI can be accessed using gesture lifecycle methods. They are sparingly used inside the React Native application, but you can read more about them here.