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

Light

Embed not loading? Click here

Dark

Embed not loading? Click here

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

Name	Required	Type	Default	Description
onPress	false	({ nativeEvent: PressEvent }) => void		Function to call when the component is pressed.
onPressIn	false	({ nativeEvent: PressEvent }) => void		Called immediately when a touch is engaged, before onPressOut and onPress.
onPressInDelay	false	number	null	Duration (in milliseconds) to wait after press down before calling onPressIn.
onPressOut	false	({ nativeEvent: PressEvent }) => void		Called when a touch is released.
onLongPress	false	({ nativeEvent: PressEvent }) => void		Called if the time after onPressIn lasts longer than 500 milliseconds. This time period can be customized with delayLongPress
delayLongPress	false	number	500	Duration (in milliseconds) from onPressIn before onLongPress is called
hitSlop	false	Rect | number		Sets additional distance outside of element in which a press can be detected.
pressRetentionOffset	false	Rect | 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.
isDisabled	false	boolean	false	Whether the press behavior is disabled.
isDisabledAndroidSound	false	boolean	false	If true, doesn't play Android system sound on press.
androidRippleConfig	false	{ color: PearlTheme['palette'] | ColorModeColor, borderless: boolean, radius: number, foreground: boolean }	{ color: "#E4E9F2", borderless: false }	Ripple effect configuration for the android_ripple property.
isDisabledAndroidRipple	false	boolean	false	Enables the Android ripple effect and configures its properties.
actionDescription	false	string		A short description of the action that occurs when this element is interacted with (Used for accessibility).
activeOpacity	false	number	1	The opacity of the element when it is pressed.
activeBackgroundColor	false	PearlTheme["palette"] | ColorModeColor		The background color of the element when it is pressed.