How to add opacity to a Pressable component in React Native

Pressable component was introduced in 2020 as a core component wrapper that can be used instead of existing touchable components in React Native. These touchable components are TouchableOpacity, TouchableHighlight, and TouchableWithoutFeedback. These components include styles and effects that sometimes do not meet the desired outcome on individual platforms (Android and iOS).

The way I see using the Pressable component is that it can be customized in terms of style, appearance, and extended functionality by creating a custom wrapper/component around it. It also offers a lot of props such as onPressIn, onPressLong, hitSlop, delayLongPress and so on, that can be used to implement these extended functionalities.

At times, one thing I like to do is to add opacity feedback when the touch is active. It doesn't provide in the form of a prop directly. Something similar to what activeOpacity prop on TouchableOpacity does.

In this post, let's build a wrapper component that uses Pressable to add opacity feedback to the component.

Start by creating a custom Pressable component with no styles of its own so it can be a reusable component.

Copy
1// Pressable.js
2
3import React, { useCallback } from 'react';
4import { Pressable as RNPressable } from 'react-native';
5
6function Pressable({ children, style, ...otherProps }) {
7  const _style = useCallback(() => [style && style], [style]);
8
9  return (
10    <RNPressable style={_style} {...otherProps}>
11      {children}
12    </RNPressable>
13  );
14}
15
16export default Pressable;

So far, it accepts only two props:

• children that is used to add a label on the button (using like a Text component from React Native)
• ...otherProps is used to pass down all the props to the underlying Pressable component.

In this case, since the wrapper component, you are creating will only be responsible for handling opacity, other important props like onPress are left to be handled where this wrapper component is used. I have to use the Touch indicator on an iOS simulator to show that the button is pressed.

To use the wrapper component in its current state, import it:

Copy
1import { StyleSheet, Text, View } from 'react-native';
2
3import Pressable from './Pressable';
4
5export default function App() {
6  return (
7    <View style={styles.container}>
8      <Pressable
9        style={{ borderRadius: 4, backgroundColor: '#FF0063', padding: 8 }}
10      >
11        <Text style={styles.text}>Press me</Text>
12      </Pressable>
13    </View>
14  );
15}
16
17const styles = StyleSheet.create({
18  container: {
19    flex: 1,
20    backgroundColor: '#fff',
21    alignItems: 'center',
22    justifyContent: 'center'
23  },
24  text: {
25    fontSize: 24,
26    color: '#fff'
27  }
28});

Make sure to add some styles to the Text and the Pressable components.

Here is the output I get by running the code above. Notice that there is no visual feedback when I press the component on the app screen.

In some scenarios, you may want to add and use opacity as the feedback. For example, decrease the opacity to 0.5 when the button is being pressed.

You can extend the styles to accept a pressed argument. It is a boolean that tells whether the component is currently pressed or not. Using it, you can alter the value of the opacity property in styles.

In the wrapper component, add a new prop called activeOpacity. This prop accepts a number between 0 and 0.99. It is used conditionally on the opacity property and will only be true when the component is pressed.

When the component is not in a pressed state, the opacity value is 1.

Copy
1import React, { useCallback } from 'react';
2import { Pressable as RNPressable } from 'react-native';
3
4function Pressable({ children, style, activeOpacity, ...otherProps }) {
5  const _style = useCallback(
6    ({ pressed }) => [{ opacity: pressed ? activeOpacity : 1 }, style && style],
7    [style]
8  );
9
10  return (
11    <RNPressable style={_style} {...otherProps}>
12      {children}
13    </RNPressable>
14  );
15}
16
17export default Pressable;

The below code snippet modifies the previous example to add an activeOpacity value of 0.5:

Copy
1export default function App() {
2  return (
3    <View style={styles.container}>
4      <Pressable
5        style={{ borderRadius: 4, backgroundColor: '#FF0063', padding: 8 }}
6        activeOpacity={0.5}
7      >
8        <Text style={styles.text}>Press me</Text>
9      </Pressable>
10    </View>
11  );
12}

The output after this step confirms that the opacity is changing as expected.

The Pressable component has many props that can be used to write an extensive and customized wrapper that fulfills your app's requirements. It is preferred in the official React Native documentation and provides a future-proof way of handling touch-based events.