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

Prop Name	Type	Default	Description
activeOpacity	Abyss.Opacity	-	Defines what the opacity of the wrapped view should be when touch is active
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<"TouchableHighlight">	-	Object or array of objects defining the style of the TouchableHighlight component with design tokens
underlayColor	Abyss.Color	-	The color of the underlay that will show through when the touch is active