TouchableOpacity

TouchableOpacity is a component in React Native that provides a built-in press feedback by dimming the opacity of its child content when pressed. It is commonly used to make views and content respond visually to user interaction without requiring a custom animation.

As a wrapper component, it responds to touch events such as onPress, onLongPress, onPressIn, and onPressOut. The visual feedback is controlled by the activeOpacity prop, which sets the opacity applied while the component is pressed (default is 0.2). The opacity transition is animated to create a smooth feedback effect during touch interactions.

Key props include onPress, onLongPress, onPressIn, onPressOut, activeOpacity, delayPressIn, delayLongPress, delayPressOut, disabled, style, and various accessibility-related props. These options allow developers to customize both the interaction behavior and the visual presentation, while maintaining accessibility support.

Usage notes: TouchableOpacity can wrap any single child element, such as text, an image, or a composite view. For complex layouts, wrap the content in an inner View. It works on both iOS and Android. On Android, the default feedback is an opacity fade rather than a native ripple; for ripple effects, other components like TouchableNativeFeedback or libraries offering ripple implementations can be used.

Related components include TouchableHighlight, which provides a highlight color on press, and TouchableWithoutFeedback, which handles presses without any visual feedback. TouchableOpacity remains a lightweight option when a simple, unobtrusive press cue is desired.