Mastering Touchable and Pressable Components in React Native

Touchable Components

Touchable components are the original way to handle user gestures in React Native. They come with pre-built feedback animations, making it easy to create interactive UI elements quickly. There are four types of touchable components:

• TouchableOpacity: Reduces opacity when pressed.
• TouchableHighlight: Changes background color when pressed.
• TouchableWithoutFeedback: No visual feedback when pressed.
• TouchableNativeFeedback: Displays the platform’s ripple effect (Android only).

Here’s an example of using TouchableOpacity:

import React from 'eact';
import { TouchableOpacity, Text } from 'eact-native';

const Button = () => {
  return (
    <TouchableOpacity>
      <Text>Press Me</Text>
    </TouchableOpacity>
  );
};

Pressable Components

Pressable components were introduced in React Native 0.63 as a more flexible alternative to touchable components. They provide a single, unified way to handle user gestures and allow for custom feedback animations.

Here’s an example of using Pressable:

import React from 'eact';
import { Pressable, Text } from 'eact-native';

const Button = () => {
  return (
    <Pressable>
      {({ pressed }) => (
        <Text style={{ opacity: pressed? 0.5 : 1 }}>Press Me</Text>
      )}
    </Pressable>
  );
};

Comparison and Use Cases

Touchable components are ideal for simple, quick interactions where the default feedback animations suffice. Pressable components offer more flexibility and customization options, making them suitable for complex, custom interactions.

Best Practices

• Use touchable components for simple interactions where default feedback animations are sufficient.
• Use pressable components for custom, complex interactions where high customization is required.
• Avoid overusing feedback animations, as they can reduce app quality.
• Keep feedback animations minimal and in line with your application’s theme.

By mastering touchable and pressable components, you can create interactive, engaging mobile applications that respond effectively to user gestures. Choose the right component for your use case, and don’t hesitate to experiment with custom feedback animations to enhance the user experience.