TouchableWithoutFeedback

TouchableWithoutFeedback is a component in React Native that enables a view to respond to touch events without providing built-in visual feedback. It acts as a wrapper around a single child element and is useful when you want to detect a tap while preserving the wrapped content’s visual style, such as tapping on a text or image to trigger an action.

Unlike other touchable components, such as TouchableOpacity or TouchableHighlight, TouchableWithoutFeedback does not alter the appearance of its child when pressed. It forwards touch events to handlers like onPress, onPressIn, onPressOut, and onLongPress. A disabled property can disable interaction, and hitSlop can extend the interactive area beyond the visible bounds to improve usability.

Design and usage considerations include the need to provide clear feedback through accessibility hints since there is no visual change on touch. Developers should ensure that interactive elements are identifiable to users, using accessibilityRole and accessibilityLabel where appropriate. The component must contain a single child, and it is often used for custom controls or when the visual feedback is provided by other means outside the touchable wrapper.

When to use it: choose TouchableWithoutFeedback when you require touch handling without default visual feedback, and when you want to apply custom feedback or styling independently. For most cases where visual feedback is desired, other touchable components or the newer Pressable API may be more suitable.

See also: TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, and Pressable.