Theory

The TouchableOpacity component provides touch feedback to the user. It's a wrapper that detects taps or clicks and provides a visual response. This component is commonly used to create interactive elements like buttons. Here's how we can work with it:

Why Use TouchableOpacity

• Touchable Feedback: It provides a visual response (opacity change) when the user presses the component, giving feedback that their touch has been recognized;
• Touchable Area: Defines an area that responds to touches, making it suitable for creating interactive elements like buttons;
• Consistent Behavior: Ensures a consistent touch experience across different devices.

Working with TouchableOpacity

• We wrap the content we want to make touchable inside the TouchableOpacity component;
• The onPress prop is used to specify the function that should be executed when the component is pressed.

Example

We created a button that displays "Press Me". When pressed, it triggers an alert saying "Button pressed".

Result

In Practice