Crafting a Custom Button Component in React Native

Introduction

React Native, a powerful framework for building native apps for iOS and Android using JavaScript, often requires developers to create custom UI components, like a custom button. This article will guide you through creating a custom button in React Native, focusing on different touchable components and explaining why Pressable might be a preferable choice.

Differences Between Touchable Components

In React Native, a button can be created using the built-in Button component or through TouchableOpacity, TouchableHighlight, and Pressable. While Button offers simplicity by providing basic styling, TouchableOpacity and TouchableHighlight provide more options for customization. However, Pressable, introduced in React Native 0.63, is more flexible and nowadays the recommended option to handle touch-based input.

TouchableOpacity

• Feedback: Diminishes the opacity of the button on press.
• Use Case: Suitable for most cases where a button or an area needs to be clickable.

TouchableHighlight

• Feedback: Displays a "highlight" or a different background color on press.
• Use Case: Useful when a visual feedback of a color change is needed.

Pressable

• Feedback: Highly customizable, can define any kind of visual feedback.
• Advantages:
  • More extensive customization options for touch interactions.
  • Includes features like onPressIn, onPressOut, and onLongPress.
  • Handles hover and focus in addition to press states, making it more suitable for a variety of devices.
  • Allows to define a HitRect area via the hitSlop prop to widen the area a press is registered without increasing the size of the button. Essentially, hitSlop specifies how far the touch area extends beyond the bounds of the visual element.
• Use Case: Recommended for new React Native projects due to its versatility and comprehensive feature set.

Creating a Custom Button

We will now create a new customizable button component, called AppButton:

import { Pressable, StyleSheet, Text } from "react-native";

const AppButton = (props) => {
  return (
    <Pressable
      style={({ pressed }) => [
        {
          backgroundColor: props.disabled
            ? "#ccc"
            : pressed
            ? "#aa0000"
            : props.color || "red",
        },
        styles.container,
        props.buttonStyles,
      ]}
      disabled={props.disabled}
      onPress={props.onPress}
      accessible
      accessibilityLabel={props.accessibilityLabel || "A Button"}
    >
      <Text style={[styles.text, props.textStyles]}>
        {props.children || "Press Me"}
      </Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 8,
    alignItems: "center",
    borderRadius: 8,
  },
  text: { color: "white" },
});

export default AppButton;

The AppButton has one required prop, which is the onPress function. It's styles can be adjusted by passing textStyles or buttonStyles. For this component, style can be passed as a function instead of an object. We use this to create a press effect by changing the background color on the press of a finger
for a short time. If the button is disabled we deactivate that effect and set it to a shade of gray to indicate this to the user visually. Last but not least, accessible and accessibilityLabel are set so that people who use VoiceOver or TalkBack know what element they have selected. A screen reader will verbalize this string when the associated element is selected.

You can find an online version of the button here.

Advanced Options

• Adding Icons: Icons can be added to the button by using libraries like react-native-vector-icons.
• Animations: Animations like changing the background color can be added by using Animated or LayoutAnimation.

Conclusion

Creating a custom button in React Native is a straightforward process and can significantly enhance an app's user experience. By customizing styles and adding features like icons and animations, a button that perfectly fits an app's design can be created. The Pressable component, with its extensive customization options, provides a versatile, future-proof and comprehensive solution for touchable interactions.