TouchableOpacity and Pressable are both components in React Native that allow you to create touchable elements, but they have some differences in terms of features and usage.

TouchableOpacity:

  1. Visual Feedback:
  • TouchableOpacity provides a simple touchable element that decreases the opacity of the wrapped view when it is touched.
  • It automatically handles the visual feedback by adjusting the opacity.
  1. Behavior:
  • It’s a straightforward touchable component with a focus on opacity change during touch.
  • Suitable for scenarios where you want a subtle touch feedback without much customization.
  1. Usage:
  • <TouchableOpacity> is a separate component.
  1. Example:
   import React from 'react';
   import { TouchableOpacity, Text } from 'react-native';

   const MyButton = ({ onPress }) => (
     <TouchableOpacity onPress={onPress}>
       <Text>Click me!</Text>
     </TouchableOpacity>
   );

   export default MyButton;

Pressable:

  1. Visual Feedback:
  • Pressable is a more flexible touchable component that allows you to customize the visual feedback using the android_ripple and style props.
  • It can be configured to provide different visual feedback on Android using the android_ripple prop.
  1. Behavior:
  • It provides a more customizable API, allowing you to define various states and visual feedback for those states.
  • Suitable for scenarios where you need more control over the touchable behavior and visual feedback.
  1. Usage:
  • <Pressable> is a render prop component, which means it uses a function as its child to provide more customization options.
  1. Example:
   import React from 'react';
   import { Pressable, Text } from 'react-native';

   const MyButton = ({ onPress }) => (
     <Pressable
       onPress={onPress}
       android_ripple={{ color: 'lightgray', borderless: false }}
       style={({ pressed }) => ({
         backgroundColor: pressed ? 'lightgray' : 'white',
       })}
     >
       <Text>Click me!</Text>
     </Pressable>
   );

   export default MyButton;

Choosing Between Them:

  • Flexibility:
  • If you need more customization options and control over the touchable behavior, Pressable provides a more powerful and flexible API.
  • If you want a simple touchable element with automatic opacity change, TouchableOpacity is sufficient.
  • Android Ripple:
  • If you want to use the Android ripple effect, Pressable allows you to specify the android_ripple prop.
  • Render Prop vs. Separate Component:
  • Pressable uses a render prop approach, which allows you to define complex UI and behavior within the function.
  • TouchableOpacity is a standalone component that automatically handles opacity changes.

In summary, choose between TouchableOpacity and Pressable based on your specific requirements for touchable elements. If you need more customization and control, go for Pressable. If a simple touchable element with automatic opacity change is sufficient, TouchableOpacity might be more straightforward.

React, React Native

Tagged in: