TouchableHighlight

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:

Selector	Trigger
`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>

TextInput TouchableNativeFeedback

⌘I

​Overview

​Styling Convention

​Uniwind Bindings

​State Selectors

​Usage Example

Overview

Styling Convention

Uniwind Bindings

State Selectors

Usage Example