Pressable

Overview

The Pressable component detects press interactions on any child component. 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

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

<Pressable
  className="bg-blue-500 px-6 py-3 rounded-lg active:opacity-80 focus:ring-2 focus:ring-blue-300"
  onPress={() => console.log('Pressed')}
>
  <Text className="text-white text-center font-semibold">Press me</Text>
</Pressable>

The focus: selector is particularly useful for TV apps (Apple TV and Android TV), where navigation is focus-based. Style the focused element to provide clear visual feedback.

Modal RefreshControl

⌘I

React Native components

Other components

Overview

Styling Convention

Uniwind Bindings

State Selectors

Usage Example

​Overview

​Styling Convention

​Uniwind Bindings

​State Selectors

​Usage Example

Overview

Styling Convention

Uniwind Bindings

State Selectors

Usage Example