Designing Buttons in React Native

Unlike the "Button Component" topic (the built-in, barely customizable Button component), this is about custom-styled buttons – the usual approach in real apps to achieve a consistent design of your own.

1. Description

A custom-styled button is technically nothing more than TouchableOpacity/Pressable with your own View and Text inside – full control over color, roundness, shadow, icon combination, and different "variants" (primary, secondary, outlined).

2. Short example

<TouchableOpacity style={styles.primaryButton} onPress={handlePress}>
  <Text style={styles.primaryButtonText}>Continue</Text>
</TouchableOpacity>

3. Complete project: a button library with three variants

npx create-expo-app buttons-demo
cd buttons-demo

components/AppButton.js

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

function AppButton({ title, variant = 'primary', onPress, disabled = false }) {
  return (
    <TouchableOpacity
      style={[
        styles.base,
        styles[variant],
        disabled && styles.disabled,
      ]}
      onPress={onPress}
      disabled={disabled}
      activeOpacity={0.7}
    >
      <Text style={[styles.text, styles[`${variant}Text`]]}>{title}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  base: { paddingVertical: 12, paddingHorizontal: 24, borderRadius: 8, alignItems: 'center', marginBottom: 12 },
  text: { fontSize: 16, fontWeight: '600' },
  primary: { backgroundColor: '#2563eb' },
  primaryText: { color: '#fff' },
  secondary: { backgroundColor: '#e5e7eb' },
  secondaryText: { color: '#111827' },
  outline: { backgroundColor: 'transparent', borderWidth: 1, borderColor: '#2563eb' },
  outlineText: { color: '#2563eb' },
  disabled: { opacity: 0.4 },
});

export default AppButton;

App.js

import { View, Alert, StyleSheet } from 'react-native';
import AppButton from './components/AppButton';

export default function App() {
  return (
    <View style={styles.container}>
      <AppButton title="Order Now" variant="primary" onPress={() => Alert.alert('Ordered!')} />
      <AppButton title="Cancel" variant="secondary" onPress={() => Alert.alert('Cancelled')} />
      <AppButton title="Learn More" variant="outline" onPress={() => Alert.alert('Info')} />
      <AppButton title="Unavailable" disabled />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', paddingHorizontal: 24 },
});

4. Explanation

variant = 'primary' – default value for the prop if no variant is given when used.
styles[variant] – dynamic object access: looks up styles.primary, styles.secondary, or styles.outline at runtime, based on the given string.
activeOpacity={{0.7}} – controls how much TouchableOpacity darkens on tap (1 = no effect, 0 = almost invisible).
disabled={{disabled}} AND styles.disabled (reduced opacity) together – functional AND visual disabling always belong together.

5. Outputs

Ausgabe

Four stacked buttons: a filled blue "Order Now", a filled gray "Cancel", a transparent, blue-outlined "Learn More", and a grayed-out, untappable "Unavailable".