Tip

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

Usage

TouchableHighlight is a wrapper for handling pressEvents of a View. While pressing down, the opacity of the wrapped view is decreased, allowing the underlay color to show through.

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

<TouchableHighlight
  activeOpacity="$core.opacity.lg"
  underlayColor="$semantic.color.surface.interactive.standards.active.secondary"
  onPress={() => alert('Pressed!')}
>
  <MyComponent />
</TouchableHighlight>;

Considerations

• Visual Artifacts: The underlay comes from wrapping the child in a View component. This can sometimes cause unwanted visual artifacts and affect layout if not used correctly. For example, if the backgroundColor of the wrapped View is not explicitly set to an opaque color.
• Children: TouchableHighlight can only have a single child. If you wish to have several children, wrap them in a View.

Accessibility Considerations

• Feedback for Users: Ensure that the visual feedback (underlayColor color) is noticeable for users with visual impairments.
• Screen Reader Support: Label the component appropriately for screen readers so users understand the interaction.
• Keyboard Focus: Ensure the component can be focused and activated using a keyboard for accessibility.

TouchableHighlight Classes

Class Name	Description
abyss-touchable-highlight-root	TouchableHighlight root element

TouchableHighlight Props

Extends React Native - TouchableHighlight props.

Name	Type	Default	Required	Description
activeOpacity	Abyss.Opacity | undefined	-	-	Determines what the opacity of the wrapped view should be when touch is active
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.
style	Abyss.Style<"TouchableHighlight">	-	-	TouchableHighlight style properties with Abyss token mapping
underlayColor	Abyss.Color | undefined	-	-	The color of the underlay that will show through when the touch is active