Skip to main content

Pressable

Pressable is a wrapper around the React Native Pressable component which allows you use Pearl style props. It can be used to easily create components which require user interactions, eg. Buttons, Links, etc.

Import#

import { Pressable } from "pearl-ui";

Usage#

<Pressable  onPress={() => {    console.log("I was pressed!");  }}  p="m"  backgroundColor="primary.500">  <Text>Press me!</Text></Pressable>

Android Ripple effect#

In order to preserve the native ripple effect on Android devices, Pressable provides a default ripple effect that should work for most scenarios. However:

  • this effect can be further customized using the androidRippleConfig prop,
  • or disabled altogether using isDisabledAndroidRipple, as per your design requirements (Refer to the props section for more).
// The ripple effect can be customized by passing in a config object<Pressable  onPress={() => {    console.log("I was pressed!");  }}  p="m"  backgroundColor="primary.500"  androidRippleConfig={{ color: "primary.800" }}>  <Text>Press me!</Text></Pressable>
// Or the ripple effect can be disabled altogether<Pressable  onPress={() => {    console.log("I was pressed!");  }}  p="m"  backgroundColor="primary.500"  isDisabledAndroidRipple>  <Text>Press me!</Text></Pressable>

Example#

Accessibility#

  • Pressable has the role of button.
  • Pressable has the default label set as 'Press me!'. A custom label can be specified using the accessibilityLabel prop.
  • Pressable expects an actionDescription prop to specify the intented outcome of interacting with the component eg. 'Closes modal', 'Go to the homepage', etc.

Props#

Supported style props#

You can pass all Box related props to Pressable, in addition to the following.

Additional props#

NameRequiredTypeDefaultDescription
onPressfalse({ nativeEvent: PressEvent }) => voidFunction to call when the component is pressed.
onPressInfalse({ nativeEvent: PressEvent }) => voidCalled immediately when a touch is engaged, before onPressOut and onPress.
onPressInDelayfalsenumbernullDuration (in milliseconds) to wait after press down before calling onPressIn.
onPressOutfalse({ nativeEvent: PressEvent }) => voidCalled when a touch is released.
onLongPressfalse({ nativeEvent: PressEvent }) => voidCalled if the time after onPressIn lasts longer than 500 milliseconds. This time period can be customized with delayLongPress
delayLongPressfalsenumber500Duration (in milliseconds) from onPressIn before onLongPress is called
hitSlopfalseRect | numberSets additional distance outside of element in which a press can be detected.
pressRetentionOffsetfalseRect | number{ bottom: 30, left: 20, right: 20, top: 20 }Additional distance outside of this view in which a touch is considered a press before onPressOut is triggered.
isDisabledfalsebooleanfalseWhether the press behavior is disabled.
isDisabledAndroidSoundfalsebooleanfalseIf true, doesn't play Android system sound on press.
androidRippleConfigfalse{ color: PearlTheme["palette"], borderless: boolean, radius: number, foreground: boolean }{ color: "#E4E9F2", borderless: false }Ripple effect configuration for the android_ripple property.
isDisabledAndroidRipplefalsebooleanfalseEnables the Android ripple effect and configures its properties.
actionDescriptionfalsestringA short description of the action that occurs when this element is interacted with (Used for accessibility).
activeOpacityfalsenumber1The opacity of the element when it is pressed.
activeBackgroundColorfalsePearlTheme["palette"]The background color of the element when it is pressed.