Version: 3.2.1

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