Understanding Touchable Components in React Native

When building mobile apps with React Native, handling user interactions like taps and presses is crucial. Over time, React Native has introduced different components to support this. This article explores the journey from Button to TouchableOpacity and finally to Pressable, highlighting their features, usage, and differences through practical examples.

---

Evolution of Touchable Components

1. Button: Basic and Limited

Button is the most straightforward way to handle press events. It offers quick setup but minimal styling or customization.

2. TouchableOpacity and TouchableHighlight: More Styling Flexibility

These components came to give developers more control. They allow you to wrap any view and make it interactive, enabling custom visuals and layouts.

3. Pressable: Modern and Versatile

Pressable is the latest and most flexible option. It supports various press states and enables dynamic styling depending on the interaction state.

Component Comparison

---

Props Overview

Button

• title: Text label

• onPress: Function to call on press

• color: Button color

• disabled: Disables interaction

TouchableOpacity

• onPress, onLongPress: Tap and hold handlers

• activeOpacity: Opacity on press

• disabled: Disables interaction

• style: Apply custom styles

Pressable

• onPress, onLongPress: Core interaction events

• onPressIn, onPressOut: Start and end of press

• onHoverIn, onHoverOut, onFocus: Web and TV support

• disabled: Disables interaction

• style: Dynamic styles based on press state

---

Code Examples

Example 1: Button

import { View, Button, StyleSheet } from 'react-native';

<View style={styles.wrapper}>
  <Button
    title="Click Me"
    onPress={() => alert('Button Pressed')}
    color="blue"
  />
</View>

const styles = StyleSheet.create({
  wrapper: {
    width: 200, // Width applied via wrapper
  },
});

Example 2: TouchableOpacity

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

<TouchableOpacity
  onPress={() => alert('TouchableOpacity Pressed')}
  onLongPress={() => alert('Long Pressed')}
  activeOpacity={0.6}
  style={styles.button}
  disabled={false}
>
  <Text style={styles.text}>Touch Me</Text>
</TouchableOpacity>

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'lightblue',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: 'black',
  },
});

Example 3: Pressable

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

<Pressable
  onPress={() => alert('Pressable Pressed')}
  onPressIn={() => console.log('Pressed In')}
  onPressOut={() => console.log('Pressed Out')}
  onLongPress={() => alert('Long Pressed')}
  disabled={false}
  style={({ pressed }) => [
    styles.button,
    { backgroundColor: pressed ? 'skyblue' : 'lightgray' },
  ]}
>
  <Text style={styles.text}>Press Me</Text>
</Pressable>

const styles = StyleSheet.create({
  button: {
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: 'black',
  },
});

Final Thoughts

React Native provides different touchable components to handle various levels of interaction and styling. Use Button for simple tasks, TouchableOpacity or TouchableHighlight when you need custom views with feedback, and Pressable for full control and modern experiences. For most new applications, Pressable is the go-to solution due to its flexibility and rich interaction capabilities.