The Ultimate Showdown: React Native Touchableopacity vs. Pressable

User interaction is a fundamental aspect of mobile application development. In React Native, developers have access to various components to create interactive elements that respond to user input. Two such components are the touchable components and the pressable component.

The touchable components, such as TouchableOpacity and TouchableHighlight, have been the go-to options for handling touch events in React Native for a long time. However, the introduction of the Pressable component has provided developers with a more extensive and future-proof alternative for creating UI elements that respond to touch.

Copy
1
2
3
4
5
6
7
8
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

const App = () => (
  <TouchableOpacity onPress={() => console.log('Pressed')}>
    <Text>Click Me</Text>
  </TouchableOpacity>
);

In this article, we will delve into the react native touchableopacity vs pressable debate, examining the basic functionalities, visual feedback, and how each component can be used to handle touch based input effectively.

Exploring Touchable Components in React Native

The Role of TouchableOpacity and TouchableHighlight

Touchable components in React Native, such as TouchableOpacity and TouchableHighlight, provide basic functionalities like handling onpress events and offering visual feedback through opacity changes. The TouchableOpacity effect in React Native dims the element when pressed, giving users automatic feedback that their press gesture has been registered.

Copy
1
2
3
4
5
6
7
8
import React from 'react';
import { TouchableHighlight, Text } from 'react-native';

const App = () => (
  <TouchableHighlight underlayColor="#DDDDDD" onPress={() => alert('Pressed')}>
    <Text>Press Me</Text>
  </TouchableHighlight>
);

Opacity Changes and Visual Feedback in Touchable Components

Opacity changes are a common form of visual feedback in touchable components. When a user interacts with a touchable opacity element, the opacity animation signifies that the element has been activated. This default experience is crucial in preventing accidental activation and ensuring that the user knows they have pressed the correct element.

What is a Pressable in React Native?

Core Features of the Pressable Component

The Pressable component in React Native is a core component designed to handle user interaction more extensively than the traditional touchable components. It includes features like custom feedback, where developers can define what happens when an element is pressed, including Android ripple effect, opacity changes, and more.

Copy
1
2
3
4
5
6
7
8
9
10
11
import { Pressable, Text } from 'react-native';

const App = () => (
  <Pressable onPress={() => console.log('Pressed')}>
    {({ pressed }) => (
      <Text style={{ opacity: pressed ? 0.5 : 1 }}>
        {pressed ? 'Pressed!' : 'Press Me'}
      </Text>
    )}
  </Pressable>
);

Pressable vs. Touchable: A Comparison

When comparing react native touchableopacity vs pressable, it's important to note that Pressable is a more versatile and future-proof component. It allows for a wider range of custom feedback options and is part of the pressability API, which is the current state-of-the-art solution for handling press interactions in React Native.

React Native TouchableOpacity vs Pressable

Basic Functionalities and User Experience Differences

The basic functionalities of TouchableOpacity and Pressable may seem similar at first glance, as both components respond to user presses. However, Pressable offers a more extensive API, allowing for a more customized interaction. It can detect multiple stages of a press interaction, not just the onpress event, and provides a default experience that can be easily customized or replaced with custom feedback.

Opacity Animation and Android Ripple Effect in TouchableOpacity

TouchableOpacity provides a simple opacity animation that gives users visual feedback by changing the opacity value of the component when pressed. For Android users, it also supports the native ripple effect, which can be enabled by setting the background prop to TouchableNativeFeedback.SelectableBackground().

Copy
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';

const App = () => (
  <TouchableOpacity activeOpacity={0.7}>
    <View>
      <Text>Tap me!</Text>
    </View>
  </TouchableOpacity>
);

Pressable: A Future Proof and Better Alternative?

Pressable is often considered a better alternative to TouchableOpacity due to its flexibility and the ability to provide automatic feedback and custom feedback. It is designed to be future-proof, with the React Native team recommending its use over older touchable components.

Enhancing User Interaction with Pressable Components

Creating Interactive Elements with Pressable

Creating interactive elements with Pressable components is straightforward. By importing React and the Pressable API, developers can begin by defining the styles and handling the press interactions with a function that provides feedback to the user. This can be done by changing the styles or triggering an animation attached to the press gesture.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

const App = () => {
  const handlePress = () => {
    // Handle the press interaction
    console.log('Element pressed!');
  };

  return (
    <Pressable style={styles.button} onPress={handlePress}>
      <Text style={styles.text}>Press Me</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  button: {
    padding: 10,
    backgroundColor: '#DDDDDD',
  },
  text: {
    textAlign: 'center',
  },
});

Handling Press Interactions and Providing Custom Feedback

The Pressable component allows developers to provide custom feedback by using the pressed state. This state can be used to change the style prop of the component dynamically, giving users a clear sign that their interaction has been activated.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

const App = () => (
  <Pressable
    onPress={() => console.log('Pressed')}
    style={({ pressed }) => [
      {
        backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white'
      },
      styles.wrapperCustom
    ]}>
    {({ pressed }) => (
      <Text style={styles.text}>
        {pressed ? 'Pressed!' : 'Press Me'}
      </Text>
    )}
  </Pressable>
);

const styles = StyleSheet.create({
  wrapperCustom: {
    borderRadius: 8,
    padding: 6
  },
  text: {
    fontSize: 16
  }
});

Styling and Extending Pressable Components

Pressable components can be styled using the style prop, similar to any other view component in React Native. Additionally, they can be extended with child components, allowing for more complex and nested interactive elements within your app.

Implementing Pressable in Your React Native App

Import React and Pressable API: Getting Started

To start using the Pressable component, you must first import React and the Pressable API from the React Native library. This is the initial step before you can create a pressable element within your application.

Copy
1
2
import React from 'react';
import { Pressable } from 'react-native';

Share Components Utilizing Pressable: Code Examples

Sharing components utilizing Pressable is an excellent way to maintain consistency across your application. Here's an example of a reusable button component that uses Pressable:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';

const CustomButton = ({ onPress, title }) => (
  <Pressable style={styles.button} onPress={onPress}>
    <Text style={styles.text}>{title}</Text>
  </Pressable>
);

const styles = StyleSheet.create({
  button: {
    padding: 10,
    backgroundColor: '#1E6738',
  },
  text: {
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

export default CustomButton;

Handling Touch Based Input and Press Gestures

Handling touch based input and press gestures is crucial for creating an intuitive user experience. The Pressable component provides a straightforward way to handle these interactions, allowing developers to define what should happen when a user touches the screen.

Advanced Features of Pressable in React Native

Adjusting the Activation Area and Z Index with Pressable

The activation area of a pressable element can be adjusted using the hitSlop prop, which increases the touchable area without changing the element's visual size. The z-index prop can be used to control the stack order of the pressable components, ensuring the correct element is targeted during user interaction.

Copy
1
2
3
4
5
6
<Pressable
  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
  style={{ zIndex: 1 }}
  onPress={() => console.log('Pressed with extended hitSlop')}>
  <Text>Press Me</Text>
</Pressable>

Adding Animation Attached to Press Interactions

Animation attached to press interactions can enhance the user experience by providing more dynamic feedback. React Native's Animated API can be used in conjunction with Pressable to create engaging animations.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React, { useState } from 'react';
import { Pressable, Animated, Text } from 'react-native';

const AnimatedPressable = () => {
  const [scale] = useState(new Animated.Value(1));

  const handlePressIn = () => {
    Animated.spring(scale, {
      toValue: 0.8,
      useNativeDriver: true,
    }).start();
  };

  const handlePressOut = () => {
    Animated.spring(scale, {
      toValue: 1,
      friction: 5,
      tension: 40,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Pressable onPressIn={handlePressIn} onPressOut={handlePressOut}>
      <Animated.View style={{ transform: [{ scale }] }}>
        <Text>Press Me</Text>
      </Animated.View>
    </Pressable>
  );
};

This code snippet demonstrates how to use the Animated API to scale down the button when it is pressed and scale it back up when the press is released, providing a tactile feedback effect.

Customizing Pressable with Style Prop and Child Components

Customizing the Pressable component with the style prop and child components allows developers to create unique UI elements tailored to their app's design. The style prop can be used to apply styles directly, while child components can be nested inside Pressable for more complex layouts.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react';
import { Pressable, View, Text, StyleSheet } from 'react-native';

const CustomPressable = () => (
  <Pressable style={styles.button}>
    <View style={styles.innerContainer}>
      <Text style={styles.text}>Custom Pressable</Text>
    </View>
  </Pressable>
);

const styles = StyleSheet.create({
  button: {
    padding: 10,
    backgroundColor: '#007AFF',
    borderRadius: 5,
  },
  innerContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
  },
});

Troubleshooting Common Issues with Pressable and TouchableOpacity

Avoiding Accidental Activation and Targeting the Wrong Element

Accidental activation and targeting the wrong element can be frustrating for users. To mitigate these issues, developers can use the hitSlop prop to increase the touchable area and ensure that the Pressable component has enough padding and margin to prevent overlapping with other elements.

Ensuring Consistent Interaction Across Android and iOS

Ensuring consistent interaction across Android and iOS platforms is essential for a seamless user experience. Developers should test their Pressable and TouchableOpacity components on both platforms to ensure that features like the Android ripple effect and opacity changes behave as expected.

Best Practices for Using Pressable and TouchableOpacity in React Native

When to Use Each Component for Optimal User Experience

In most cases, Pressable is the recommended component for handling press interactions due to its extensive API and customization options. However, TouchableOpacity may still be used for simple use cases where the default opacity animation is sufficient.

Optimizing Performance and Avoiding Redundant Renders

To optimize performance and avoid redundant renders, developers should use the React.memo or React.PureComponent for their Pressable and TouchableOpacity components. Additionally, they should avoid creating new functions or objects within the render method.

Conclusion: Choosing the Right Component for Your React Native App

In conclusion, when choosing between TouchableOpacity and Pressable for your React Native app, consider the level of customization and user interaction required. Pressable offers a more robust and future-proof solution with its pressability API and ability to provide custom feedback. However, TouchableOpacity remains a viable option for simple interactions where the default opacity effect is adequate.

By understanding the react native touchableopacity vs pressable differences and their respective features, developers can make an informed decision on which component to use, ensuring a positive user experience and a high-quality app.

Ready to unlock the full potential of React development?

Building React applications can be an exciting yet time-consuming endeavor. DhiWise React Builder empowers you to achieve more in less time.

Sign up for your DhiWise account today and experience the future of building React applications.