Button and Touchables

Handling User Taps

Buttons are how users interact with your app. In React Native, you have several options for handling taps: the basic Button component, and more flexible touchable components like TouchableOpacity and Pressable.

The built-in Button is simple but limited in styling. For most real-world apps, you'll use TouchableOpacity or Pressable because they give you full control over how the button looks.

Basic Button

The simplest way to add a button is using React Native's built-in Button component:

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

function SimpleButton() {
  return (
    <View>
      <Button
        title="Press Me"
        onPress={() => Alert.alert('Button Pressed!')}
        color="#2196F3"
      />
    </View>
  );
}

export default SimpleButton;

The Button component takes a title (the text shown), an onPress handler (what happens when tapped), and an optional color. It's simple and works for prototypes, but you can't change the font, size, or add icons.

TouchableOpacity

For more control, use TouchableOpacity. It wraps any content and makes it tappable, with a nice fade effect when pressed.

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

function CustomButton() {
  return (
    <TouchableOpacity
      style={styles.button}
      onPress={() => console.log('Pressed!')}
      activeOpacity={0.7}
    >
      <Text style={styles.buttonText}>Custom Button</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#4CAF50',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default CustomButton;

TouchableOpacity lets you put anything inside — Text, Images, Views, or combinations. The activeOpacity controls how much the content fades when pressed (0.7 means 70% opacity). This is the most commonly used touchable component in React Native apps.

Pressable (Modern Approach)

React Native's newer Pressable component is the recommended way to handle taps going forward. It's more flexible and provides better control over press states.

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

function ModernButton() {
  return (
    <Pressable
      style={({ pressed }) => [
        styles.button,
        pressed && styles.buttonPressed,
      ]}
      onPress={() => console.log('Pressed!')}
    >
      {({ pressed }) => (
        <Text style={[styles.text, pressed && styles.textPressed]}>
          {pressed ? 'Pressed!' : 'Press Me'}
        </Text>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: { padding: 15, borderRadius: 8, backgroundColor: '#2196F3' },
  buttonPressed: { backgroundColor: '#1976D2' },
  text: { color: 'white', textAlign: 'center', fontSize: 16 },
  textPressed: { fontWeight: 'bold' },
});

export default ModernButton;

Pressable gives you a function as children that receives the pressed state, letting you change anything — text, colors, animations — based on whether it's being pressed. It's the most flexible option and the one you'll likely use most in modern React Native apps.