React Native Button Component Guide

Last update: 2025-04-24

Type

Quick Win

Membership

🆓

Tech

JavaScript

React Native provides several ways to create interactive buttons in your mobile applications. In this quick win, we’ll explore different button implementations, from the basic Button component to custom touchable components.

Basic Button Component

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';

const BasicButton = () => {
	const handlePress = () => {
		Alert.alert('Button Pressed!');
	};

	return (
		<View>
			<Button onPress={handlePress} title="Press Me" color="#841584" />
		</View>
	);
};

The basic Button component is simple but has limited customization options. It only allows you to change the title, color, and whether it’s enabled or disabled.

Custom Touchable Button

For more styling flexibility, you can create a custom button using TouchableOpacity:

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

const CustomButton = ({ onPress, title, style }) => {
	return (
		<TouchableOpacity style={[styles.button, style]} onPress={onPress} activeOpacity={0.7}>
			<Text style={styles.buttonText}>{title}</Text>
		</TouchableOpacity>
	);
};

const styles = StyleSheet.create({
	button: {
		backgroundColor: '#007AFF',
		padding: 15,
		borderRadius: 10,
		alignItems: 'center',
		marginVertical: 10
	},
	buttonText: {
		color: 'white',
		fontSize: 16,
		fontWeight: '600'
	}
});

This custom button offers more styling options and a nice opacity effect when pressed. The activeOpacity prop controls how transparent the button becomes when touched.

Button with Loading State

Here’s how to create a button that shows a loading indicator while processing:

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

const LoadingButton = ({ onPress, title }) => {
	const [isLoading, setIsLoading] = useState(false);

	const handlePress = async () => {
		setIsLoading(true);
		try {
			await onPress();
		} finally {
			setIsLoading(false);
		}
	};

	return (
		<TouchableOpacity style={styles.button} onPress={handlePress} disabled={isLoading}>
			{isLoading ? (
				<ActivityIndicator color="white" />
			) : (
				<Text style={styles.buttonText}>{title}</Text>
			)}
		</TouchableOpacity>
	);
};

const styles = StyleSheet.create({
	button: {
		backgroundColor: '#007AFF',
		padding: 15,
		borderRadius: 10,
		alignItems: 'center',
		minWidth: 150
	},
	buttonText: {
		color: 'white',
		fontSize: 16,
		fontWeight: '600'
	}
});

This button component shows a loading spinner while processing an async action, preventing multiple presses during the operation.

Icon Button

Here’s an example of a button with an icon, using React Native Vector Icons:

import React from 'react';
import { TouchableOpacity, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const IconButton = ({ onPress, name, size = 24, color = '#007AFF' }) => {
	return (
		<TouchableOpacity style={styles.iconButton} onPress={onPress} activeOpacity={0.7}>
			<Icon name={name} size={size} color={color} />
		</TouchableOpacity>
	);
};

const styles = StyleSheet.create({
	iconButton: {
		padding: 10,
		borderRadius: 50,
		backgroundColor: '#F0F0F0'
	}
});

This creates a circular icon button that’s perfect for actions like favorites, sharing, or navigation. Remember to install the react-native-vector-icons package first.

Usage Examples

Here’s how to use these different button components in your app:

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

const ButtonExample = () => {
	return (
		<View style={styles.container}>
			<CustomButton title="Primary Button" onPress={() => console.log('Pressed!')} />

			<LoadingButton
				title="Save Changes"
				onPress={async () => {
					// Simulate API call
					await new Promise((resolve) => setTimeout(resolve, 2000));
				}}
			/>

			<IconButton name="heart" onPress={() => console.log('Favorite!')} />
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		padding: 20,
		alignItems: 'center'
	}
});

These button components provide a solid foundation for building interactive user interfaces in React Native. Choose the appropriate button type based on your specific needs and customize the styles to match your app’s design system.

Simon Grimm