Introduction to User Interface and User Interaction

Every application requires interactivity elements apart from visual aesthetics. For mobile application users, interactivity elements such as a click or a press are the primary means of interaction. Users employ a combination of actions such as tapping, scrolling, and zooming to interact with an application. Let’s briefly summarize each component that provides interactivity in React Native applications.

Button

The Button component is a mandatory part of almost every mobile application. It is used for communicating directly with the system or application to get the output of the actions performed. For example, a button can be used to trigger an action inside an application or to send an email.

Touchables

Touchables provide better interactivity and recognition, such as scrolling, zooming, and pressing. They act similarly to the Button component. The touchables in React Native, such as TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, and TouchableWithoutFeedback, can be used to record tapping gestures and show feedback when a gesture is identified.

Switch

In React Native, the Switch component is a boolean control component that sets its value to true or false. It allows users to choose one of two values. For example, Switch can be used to toggle between light and dark modes inside the mobile application.

Gesture responder system

Gesture responder system is a feature in React Native that allows us to track and respond to gestures made by the user on our application’s screen. This can be useful for detecting gestures and responding accordingly. Gestures inside an application transform through various lifecycle methods or stages. These stages must be tracked so the application knows what the user wants to do. Examples of touches include scrolling and sliding. These touches can even change. For instance, let’s say the user clicks a button and then immediately slides their finger down the screen. Such actions need tracking. This is where the gesture responder system comes in. It manages the lifecycle of the gestures performed by users inside an application.