Pressable | NativeBase

3.4.x

Search

⌘

K

Introduction

Getting Started

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

NativeBase Factory

SafeAreaView Props

Theme

Customizing Theme

Customizing Fonts

Customizing Components

Making components dark mode compatible

Layout

VStack / Column

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

PresenceTransition

Others

ReactNative Components

KeyboardAvoidingView

Hooks

useBreakpointValue

useColorModeValue

useContrastText

useAccessibleColors

Examples

Community Integration

React Hook Forms

Recipes

Designs

Drawer Navigation

Forms

Form with Validation

Login/Signup Forms

Layout

Migration

Components Migration

More

If you are starting a new project, please try gluestack-ui for better performance and new design.

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
function Example() {
  return <Pressable onPress={() => Alert.alert("hello")} p={2} borderWidth={1} _light={{
    borderColor: "dark.200"
  }} _dark={{
    borderColor: "dark.600"
  }}>
      <Text>hello world</Text>
    </Pressable>;
}function Example() {
  return <Pressable onPress={() => Alert.alert("hello")} p={2} borderWidth={1} _light={{
    borderColor: "dark.200"
  }} _dark={{
    borderColor: "dark.600"
  }}>
      <Text>hello world</Text>
    </Pressable>;
}

Accessing events (hover, focus and pressed)

Pressable accepts a render prop children, which receives isHovered, isFocused and isPressed props.


Playground
function Example() {
  return <Pressable p={4} borderWidth={1} _light={{
    borderColor: "dark.200"
  }} _dark={{
    borderColor: "dark.600"
  }}>
      {({
      isHovered,
      isFocused,
      isPressed
    }) => {
      return <Text>
            Pressable is in state{" :: "}
            {isPressed ? "pressed" : isHovered ? "hovered" : isFocused ? "focused" : ""}
          </Text>;
    }}
    </Pressable>;
}function Example() {
  return <Pressable p={4} borderWidth={1} _light={{
    borderColor: "dark.200"
  }} _dark={{
    borderColor: "dark.600"
  }}>
      {({
      isHovered,
      isFocused,
      isPressed
    }) => {
      return <Text>
            Pressable is in state{" :: "}
            {isPressed ? "pressed" : isHovered ? "hovered" : isFocused ? "focused" : ""}
          </Text>;
    }}
    </Pressable>;
}

Props

Pressable

Pressable implements

,

,

,

,

,

,

,

,

,

,

BackgroundProps

,

,

,

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

Type:

IPressableProps

_pressed

Style props to be applied when pressed

Type:

IPressableProps

_focus

Style props to be applied when focus

Type:

IPressableProps

_disabled

Style props to be applied when disabled

Type:

IPressableProps

_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:

IPressableProps

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)

Quick Nav

Accessing events (hover, focus and pressed)

MadeWithNativeBase