Skip to main content

​
Overview

The TouchableHighlight component provides visual feedback by underlaying a color when pressed. Uniwind provides className prop support for styling this component.

​
Styling Convention

For style props: Use regular Tailwind classes directly (e.g., className="p-4").For non-style props (like underlayColor): Use the accent- prefix (e.g., underlayColorClassName="accent-gray-200").
Since 1.6.2: Passing a className without the accent- prefix to a color prop will log a warning to the development console.

​
Uniwind Bindings

​
className
string
Maps to the style prop. Use any Tailwind utility classes.
​
underlayColorClassName
string
Maps to the underlayColor prop. Requires accent- prefix for color values.

​
State Selectors

TouchableHighlight supports active:, disabled:, and focus: state selectors:
SelectorTrigger
active:When the component is being pressed
disabled:When the disabled prop is true
focus:When the component has focus (especially useful for TV navigation)

​
Usage Example

import { TouchableHighlight, Text } from 'react-native'

<TouchableHighlight
  className="bg-blue-500 px-6 py-3 rounded-lg focus:ring-2 focus:ring-blue-300"
  underlayColorClassName="accent-blue-600 dark:accent-blue-700"
  onPress={() => console.log('Pressed')}
>
  <Text className="text-white text-center font-semibold">Press me</Text>
</TouchableHighlight>