Search⌘ K
AI Features
Home
Courses
Getting Started with Mobile App Development with React Native

Touchables

Explore how to implement various React Native touchable components such as TouchableHighlight, TouchableOpacity, and TouchableNativeFeedback. Understand how to customize styling and manage events like onPress and onLongPress to enhance user interaction in your mobile apps.

We'll cover the following...

In React Native, touchable components capture tapping gestures and display feedback when a gesture is recognized. These components do not come with any default styling. Therefore, we must put in some extra effort to customize them and make them aesthetically pleasing.

React Native provides four touchable components. We can select any of the components based on the kind of feedback we want. These components are:

  • TouchableHighlight: This component can be used to create buttons that respond to touch events. When the TouchableHighlight component is pressed, its opacity is decreased. This causes the underlying child component’s style to get highlighted. It should be noted that this component only supports one child component. If there is more than one, we should wrap all of them inside a single View component.

  • TouchableNativeFeedback: This is an Android-specific component that can be used to generate a ripple effect. It allows us to make our component act specifically on a specific touch event. ...