Version: 3.0.6

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