Pressable | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
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.
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: any
onHoverOut
Called when a mouse leaves the Pressable
Type: any
onFocus
Called when Pressable receives focus
Type: any
onBlur
Called when Pressable loses focus
Type: any
_hover
Style props to be applied when hovered
_pressed
Style props to be applied when pressed
_focus
Style props to be applied when focus
_disabled
Style props to be applied when disabled
_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
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