Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The TouchableOpacity component wraps views to make them respond properly to touches with opacity feedback. 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 color): Use the accent- prefix (e.g., colorClassName="accent-blue-500").

​
Uniwind Bindings

​
className
string
Maps to the style prop. Use any Tailwind utility classes.

​
State Selectors

TouchableOpacity 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 { TouchableOpacity, Text } from 'react-native'

<TouchableOpacity
  onPress={() => console.log('Pressed')}
  activeOpacity={0.7}
  className="bg-blue-500 rounded-lg p-4 m-2 focus:ring-2 focus:ring-blue-300"
>
  <Text className="text-white font-bold text-center">
    Press Me
  </Text>
</TouchableOpacity>