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	() => void	Called when a mouse enters the Pressable	-
onHoverOut	() => void	Called when a mouse leaves the Pressable	-
onFocus	() => void	Called when Pressable receives focus	-
onBlur	() => void	Called when Pressable loses focus	-
_hover	Omit<IPressableProps<IPressableProps<unknown>>, "_hover">	Style props to be applied when hovered	-
_pressed	Omit<IPressableProps<IPressableProps<unknown>>, "_pressed">	Style props to be applied when pressed	-
_focus	Omit<IPressableProps<IPressableProps<unknown>>, "_focus">	Style props to be applied when focus	-
_disabled	Omit<IPressableProps<IPressableProps<unknown>>, "_disabled">	Style props to be applied when disabled	-
_focusVisible	Omit<IPressableProps<IPressableProps<unknown>>, "_focusVisible">	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, LayoutProps, BorderProps, TypographyProps, ShadowProps, PositionProps, FlexProps, BackgroundProps, PlatformProps