Tip

If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.

Usage

The TouchableWithoutFeedback component is a wrapper that captures touch events without providing any visual feedback. It is ideal for handling touch events on components that don't need to display any visual feedback.

Warning

Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.

function MyComponent(props: MyComponentProps) {
  return (
    <View
      {...props}
      style={{
        flex: 1,
        backgroundColor: '$semantic.color.surface.container.secondary',
      }}
    >
      <Text>My Component</Text>
    </View>
  );
}

<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableWithoutFeedback>;

Example

Best Practices

• Use Sparingly: Only use TouchableWithoutFeedback when no visual feedback is required or desired. If feedback is expected, use Pressable or TouchableOpacity instead.
• Visual Feedback: Ensure the child components provide sufficient visual feedback, even if TouchableWithoutFeedback does not.
• Invisible Buttons: Consider accessibility implications if TouchableWithoutFeedback is used to create invisible or hidden touch areas.

Considerations

• Number of Children: TouchableWithoutFeedback only supports one child. If you wish to have several child components, wrap them in a View.
• Prop Spread: TouchableWithoutFeedback Does not handle touch events directly, it clones its child and applies responder props to the clone. Therefore it is important that any intermediary components pass props through to the underlying React Native component.

Accessibility Considerations

• Keyboard Navigation: Ensure the component is accessible via keyboard and focusable if needed.
• Screen Reader Labels: If touchable areas are hidden or provide no feedback, ensure the interactive area is described accurately for screen readers.

TouchableWithoutFeedback Classes

Class Name	Description
abyss-touchable-without-feedback-root	TouchableWithoutFeedback root element.

TouchableWithoutFeedback Props

Extends React Native - TouchableWithoutFeedbackopens in a new window props.

Name	Type	Default	Description
disableDefaultProviderProps	boolean | undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
hitSlop	Insets | Inset | null | undefined		This defines how far your touch can start away from the button. This is added to pressRetentionOffset when moving off of the button. NOTE The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
pressRetentionOffset	Insets | Inset | null | undefined		When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
rootTestID	string | undefined		Adds the passed in test ID to the root element of the component.
style	Style<"TouchableWithoutFeedback">		Style properties with Abyss token mapping
styles	Styles<TouchableWithoutFeedbackClasses> | undefined		Add custom styles to component by class name with Abyss token mapping
testID	string | undefined		Using this prop will append -abyss and the name of the element class at the end of the testID passed in. If you want to only use string passed in on the root element, use the rootTestID prop instead. Used to locate this view in end-to-end tests.