Pressable

Atom
The touchable primitive: wraps content, fires onPress, and exposes the press state to its style for feedback.
src/atoms/pressable
View in Layout

Playground

Every control sets a real prop of PressableProps. The JSX below updates as you go.
Pressable surface
Props
children
string
disabled
boolean
JSX · PressableProps
<Pressable><Text>Pressable surface</Text></Pressable>

Variants

2 examples from src/atoms/pressable/pressable.md, each rendered live from its own JSX.
Press and hold
Opacity
The style function dims the whole surface to 50% opacity while pressed.
<Pressable style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>
<Text style={{ color: tokens.foreground }}>Press and hold</Text>
</Pressable>
Disabled
Disabled
A disabled Pressable ignores presses.
<Pressable disabled style={{ padding: 12, borderRadius: 8, backgroundColor: tokens.muted, opacity: 0.5 }}>
<Text style={{ color: tokens.foreground }}>Disabled</Text>
</Pressable>

States

Hover, focus and press are pinned so they can be compared side by side; the rest are real props.
Pressable surface
default
Pressable surface
hover
Pressable surface
pressed
Pressable surface
focus
Pressable surface
disabled

Anatomy

Pressable surface
1
Hit area
2
Content
Dimmed parts appear only in some states or variants.

Props

A React Native primitive, re-exported as is.
Accepts every React Native Pressable prop unchanged. Canvas re-exports it so every component is built from the same primitive.

Accessibility and keyboard

Keyboard
Enter
Activates
Space
Activates
Tab
Moves focus on
Semantics
No role of its own in source; it reads as the content it renders.
Below the platform minimum, the touch area grows to 44 pt on iOS and 48 dp on Android without moving the layout.
From the docs
Pass focusable={false} for a surface only a pointer should reach, such as a row whose keyboard path is a button inside it: it still presses, and it leaves the tab order on the web too, where react-native-web's own Pressable would keep it a tab stop. A Pressable with the link role presses on Enter (and not on Space), as a link does, on the web too: react-native-web's own Pressable leaves that key to the browser, which activates only a link that has an href.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Disabled
Web
control 10 · field 10 · card 16 · Instrument Sans
Disabled
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Disabled
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

Wire onPress to your own handler. The background dims while the button is held, straight from the ({ pressed }) => style function.
<Pressable style={({ pressed }) => ({ padding: 12, borderRadius: 8, backgroundColor: pressed ? alpha(tokens.primary, 0.8) : tokens.primary })}>
<Text style={{ color: tokens["primary-foreground"] }}>Press and hold</Text>
</Pressable>
The kit's interactive components (Button, plus the tappable Card, Stats, GridList, MediaObject, and StackedList rows) cover the common cases and keep branding consistent, so prefer them; Pressable stays for full flexibility when you need a custom interaction the kit doesn't provide. Its style prop accepts a function of the press state, ({ pressed }) => style, so you can show press feedback with no extra wrapper; style it with tokens to stay on-brand.
Pass focusable={false} for a surface only a pointer should reach, such as a row whose keyboard path is a button inside it: it still presses, and it leaves the tab order on the web too, where react-native-web's own Pressable would keep it a tab stop. A Pressable with the link role presses on Enter (and not on Space), as a link does, on the web too: react-native-web's own Pressable leaves that key to the browser, which activates only a link that has an href.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--ln
--sf2

Related components