Pressable

Pressable is a lower level primitive if you need more flexibility than a button and access to hover, pressed and focus events.

Examples

Basic

Pressable accepts most of the utility style system props.

Accessing events (hover, focus and pressed)

Pressable accepts a render prop children, which receives isHovered, isFocused and isPressed props.

Props

Pressable

Name	Type	Description	Default
onHoverIn	any	Called when a mouse enters the Pressable	-
onHoverOut	any	Called when a mouse leaves the Pressable	-
onFocus	any	Called when Pressable receives focus	-
onBlur	any	Called when Pressable loses focus	-
_hover	IPressableProps	Style props to be applied when hovered	-
_pressed	IPressableProps	Style props to be applied when pressed	-
_focus	IPressableProps	Style props to be applied when focus	-
_disabled	IPressableProps	Style props to be applied when disabled	-
_focusVisible	IPressableProps	Style props to be applied when focus visible. These styles will be only applied when user is interacting the app using a keyboard. (Web only)	-
children	ReactNode | (({ isPressed, isHovered, isFocused, }: { isPressed: boolean; isHovered: boolean; isFocused: boolean; }) => any)	Either children or a render prop that receives a boolean reflecting whether the component is currently pressed.	-

Pressable implements Pressable, View, ColorProps, BackgroundProps, LayoutProps, FlexProps, PositionProps, BorderProps, ExtraProps, OutlineProps, ShadowProps, SafeAreaProps, TransformProps, PlatformProps