Pressable | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
Pressable
Pressable is a lower level primitive if you need more flexibility than a button and access to hover, pressed and focus events.
Show Code
Playground
Examples
Basic
Pressable accepts most of the utility style system props.
Playground
Accessing events (hover, focus and pressed)
Pressable accepts a render prop children, which receives isHovered, isFocused and isPressed props.
Playground
Props
Pressable
onHoverIn
Called when a mouse enters the Pressable
Type: () => void
onHoverOut
Called when a mouse leaves the Pressable
Type: () => void
onFocus
Called when Pressable receives focus
Type: () => void
onBlur
Called when Pressable loses focus
Type: () => void
_hover
Style props to be applied when hovered
Type: Omit<Partial<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<...>>>>>>>>>>>>, "_hover">
_pressed
Style props to be applied when pressed
Type: Omit<Partial<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<...>>>>>>>>>>>>, "_pressed">
_focus
Style props to be applied when focus
Type: Omit<Partial<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<...>>>>>>>>>>>>, "_focus">
_disabled
Style props to be applied when disabled
Type: Omit<Partial<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<...>>>>>>>>>>>>, "_disabled">
isDisabled
If true, the p will be disabled.
Type: boolean
isHovered
If true, the p will be hovered.
Type: boolean
isPressed
If true, the p will be pressed.
Type: boolean
isFocused
If true, the p will be focused.
Type: boolean
isFocusVisible
If true, the focus ring will be visible .
Type: boolean
_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)
Type: Omit<Partial<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<InterfacePressableProps<...>>>>>>>>>>>>, "_focusVisible">
children
Either children or a render prop that receives a boolean reflecting whether the component is currently pressed.
Type: ReactNode | (({ isPressed, isHovered, isFocused, }: { isPressed: boolean; isHovered: boolean; isFocused: boolean; }) => any)
Nativebase logo
MadeWithNativeBase