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.

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 - TouchableWithoutFeedback Props

Prop Name	Type	Default	Description
hitSlop	Inset | Insets	-	This defines how far a touch event can start away from the view.
pressRetentionOffset	Inset | Insets	-	Additional distance outside of this view in which a touch is considered a press before onPressOut is triggered.
style	Abyss.Style<"TouchableWithoutFeedback">	-	Object or array of objects defining the style of the TouchableWithoutFeedback component with design token support.