Pressable

In this article, we will learn about the Pressable component in React Native, how it works, what props it accepts, and how to use it in your projects. We will also see some examples of Pressable in action and compare it with other touchable components in React Native.

What is Pressable Component in React Native?

Pressable is a core component in React Native that can detect various types of interactions with the user’s finger-touch, such as press, long press, hover, focus, and blur. It can also provide visual feedback to the user when they interact with it, such as changing the opacity, color, or size of the element.

Pressable is a low-level component that gives you more control and flexibility over how your touchable elements look and behave. You can use it to create custom buttons, cards, icons, or any other interactive element that responds to user input.

How does it Work?

Pressable works by wrapping any child component or element inside a View component that handles the touch events and feedback effects. You can pass various props to the Pressable component to customize its appearance and functionality.

The most important prop of Pressable is onPress, which is a function that gets called when the user presses the element. You can use this prop to perform any action or logic when the user interacts with your element.

Another important prop of Pressable is style, which is a function that returns a style object based on the current state of the element. The state object has four boolean properties: pressed, hovered, focused, and disabled. You can use these properties to change the style of your element depending on its state.

For example, you can change the background color of your element when it is pressed by using the pressed property in the style function:

You can also use other props of Pressable to customize its behavior and appearance, such as onLongPress, delayLongPress, onPressIn, onPressOut, android_ripple, hitSlop, disabled, accessibilityLabel, accessibilityRole, accessibilityState, and testID.

Props

Some of the common props of Pressable components for both Android and iOS are:

• onPress: a function that gets called when the user presses the element.
• onLongPress: a function that gets called when the user presses the element for a long time.
• onPressIn: a function that gets called when the user starts pressing the element.
• onPressOut: a function that gets called when the user stops pressing the element.
• style: a function that returns a style object based on the current state of the element.
• hitSlop: an object that specifies how far from the element’s bounds should be considered as part of the touchable area.
• disabled: a boolean value that specifies whether the element should be disabled or not.
• accessibilityLabel: a string that describes the element for screen readers and other accessibility tools.
• accessibilityRole: a string that defines the role of the element for accessibility purposes.
• accessibilityState: an object that describes the state of the element for accessibility purposes.
• testID: a string that identifies the element for testing purposes.

For detailed information on props, refer to the official documentation: Pressable in React Native

Props for Android

Pressable has some props that are specific to Android platform, such as android_ripple and android_disableSound. These props let you customize the ripple effect and the sound effect that occur when the user presses the element.

The android_ripple prop takes an object that has three properties: color, borderless, and radius. The color property specifies the color of the ripple effect. The borderless property specifies whether the ripple effect should be clipped by the element’s border or not. The radius property specifies the radius of the ripple effect.

For example, you can create a circular button with a red ripple effect by using the android_ripple prop:

The android_disableSound prop takes a boolean value that specifies whether the sound effect should be disabled or not when the user presses the element. By default, this prop is false.

Props for iOS

Pressable has some props that are specific to iOS platform, such as pressRetentionOffset and rejectResponderTermination. These props let you customize how the element responds to touch events and gestures on iOS devices.

The pressRetentionOffset prop takes an object that has four properties: top, left, bottom, and right. These properties specify how far from the element’s bounds should be considered as part of the touchable area. By default, this prop is {top: 20, left: 20, right: 20, bottom: 30}.

The rejectResponderTermination** prop takes a boolean value that specifies whether the element should prevent other elements from becoming the responder when a gesture is performed on it. By default, this prop is true.

Type Definitions (RippleConfig)

The RippleConfig type defines the shape of the object that can be passed to the android_ripple prop of Pressable. It has the following properties:

• color: string | number | undefined: The color of the ripple effect. If undefined, the default ripple color is used.
• borderless: boolean | undefined: Whether the ripple effect should be clipped by the element’s border or not. If undefined, the default value is false.
• radius: number | undefined: The radius of the ripple effect. If undefined, the default value is 0, which means the ripple effect covers the whole element.

Advantages and Disadvantages

Advantages

• Flexible and expressive:

  It is more flexible and expressive than other touchable components, such as TouchableOpacity, TouchableHighlight, or Button. You can use Pressable to wrap any kind of child element, not just text or images. You can also use it to create custom buttons or other interactive UI elements with your own styles and animations.

• Consistent and Reliable:

  It is more consistent and reliable across different platforms and devices. Pressable handles the differences in touch behavior and feedback between iOS and Android automatically. It also supports hover events on web and desktop platforms. You don’t have to worry about the compatibility issues or edge cases that may arise with other touchable components.

• Performant and Efficient:

  It is more performant and efficient than other touchable components. Pressable uses the native Pressability API, which is optimized for handling touch events and minimizing re-renders. It also avoids creating unnecessary views or layers that may affect the app’s performance or memory usage.

• Accessible and User-friendly:

  It is more accessible and user-friendly than other touchable components. Pressable supports accessibility features such as screen readers, keyboard navigation, and TalkBack/VoiceOver. It also provides visual feedback for different press states, such as ripple effects on Android or opacity changes on iOS. You can also adjust the hit area and press area of the Pressable component to make it easier for users to interact with it.

Disadvantages

• Less intuitive and familiar:

  It is less intuitive and familiar than other touchable components. Pressable has a different syntax and API than other touchable components, which may require some learning curve or adjustment for developers who are used to them. It also has some props that are specific to Android or web platforms, which may not be obvious or relevant for iOS developers.

• Less documented:

  It is less documented and supported than other touchable components. Pressable is a relatively new component that was introduced in React Native version 0.63. It may not have as much documentation, examples, tutorials, or community resources as other touchable components that have been around longer. It may also have some bugs or limitations that are not yet fixed or addressed by the React Native team or contributors.

• Less compatible with customizations:

  It is less compatible and customizable than other touchable components. Pressable may not work well with some third-party libraries or components that rely on or extend from other touchable components. It may also have some restrictions or trade-offs in terms of how you can style or animate the Pressable component or its children. For example, you cannot use a custom background color for the ripple effect on Android, or you cannot use a custom transition for the opacity change on iOS.

• Less versatile:

  It is less versatile than other touchable components. Pressable only supports press gestures, not swipe, pinch, zoom, rotate, or other complex gestures that may be useful for some apps or scenarios. It also only supports one child element, not multiple children or nested elements that may be needed for some layouts or designs.

Best Practices

Some best practices when using Pressable components in react native are:

1. Use the onPress prop to handle the user interaction when the component is pressed. You can also use the onLongPress prop to handle a long press event.
2. Use the children's prop to render the content of the component. You can pass either a React node or a function that receives a boolean reflecting whether the component is currently pressed.
3. Use the style prop to customize the appearance of the component. You can pass either a style object or a function that receives a boolean reflecting whether the component is currently pressed.
4. Use the android_ripple prop (Android only) to enable and configure the ripple effect on the component. You can pass an object with color, borderless, and radius properties.
5. Use the hitSlop prop to set an additional distance outside of the element in which a press can be detected. You can pass either a number or an object with top, left, bottom, and right properties.
6. Use the pressRetentionOffset prop to set how far a touch can move off of the element before deactivating the press. You can pass either a number or an object with top, left, bottom, and right properties.
7. Use the disabled prop to disable the press behavior of the component. You can pass either a boolean or a function that returns a boolean.