Buttons gestalten in React Native

Anders als im Thema "Button-Komponente" (die eingebaute, kaum anpassbare Button-Komponente) geht es hier um selbst gestaltete Buttons – der übliche Weg in echten Apps, um ein konsistentes eigenes Design zu erreichen.

1. Beschreibung

Ein individuell gestalteter Button ist technisch nichts anderes als TouchableOpacity/Pressable mit eigenem View und Text darin – volle Kontrolle über Farbe, Rundung, Schatten, Icon-Kombination, und verschiedene "Varianten" (primär, sekundär, umrandet).

2. Kurzes Beispiel

<TouchableOpacity style={styles.primaerButton} onPress={handlePress}>
  <Text style={styles.primaerButtonText}>Weiter</Text>
</TouchableOpacity>

3. Komplettes Projekt: eine Button-Bibliothek mit drei Varianten

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

components/AppButton.js

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

function AppButton({ titel, variante = 'primaer', onPress, deaktiviert = false }) {
  return (
    <TouchableOpacity
      style={[
        styles.basis,
        styles[variante],
        deaktiviert && styles.deaktiviert,
      ]}
      onPress={onPress}
      disabled={deaktiviert}
      activeOpacity={0.7}
    >
      <Text style={[styles.text, styles[`${variante}Text`]]}>{titel}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  basis: { paddingVertical: 12, paddingHorizontal: 24, borderRadius: 8, alignItems: 'center', marginBottom: 12 },
  text: { fontSize: 16, fontWeight: '600' },
  primaer: { backgroundColor: '#2563eb' },
  primaerText: { color: '#fff' },
  sekundaer: { backgroundColor: '#e5e7eb' },
  sekundaerText: { color: '#111827' },
  umrandet: { backgroundColor: 'transparent', borderWidth: 1, borderColor: '#2563eb' },
  umrandetText: { color: '#2563eb' },
  deaktiviert: { 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 titel="Bestellen" variante="primaer" onPress={() => Alert.alert('Bestellt!')} />
      <AppButton titel="Abbrechen" variante="sekundaer" onPress={() => Alert.alert('Abgebrochen')} />
      <AppButton titel="Mehr erfahren" variante="umrandet" onPress={() => Alert.alert('Info')} />
      <AppButton titel="Nicht verfügbar" deaktiviert />
    </View>
  );
}

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

4. Erklärung

variante = 'primaer' – Standardwert für die Prop, falls beim Verwenden keine Variante angegeben wird.
styles[variante] – dynamischer Objektzugriff: greift zur Laufzeit auf styles.primaer, styles.sekundaer oder styles.umrandet zu, je nach übergebenem String.
activeOpacity={{0.7}} – steuert, wie stark TouchableOpacity beim Antippen abdunkelt (1 = kein Effekt, 0 = fast unsichtbar).
disabled={{deaktiviert}} UND styles.deaktiviert (reduzierte Deckkraft) zusammen – funktionale UND visuelle Deaktivierung gehören immer zusammen.

5. Ausgaben

Ausgabe

Vier untereinander angeordnete Buttons: ein blau gefüllter "Bestellen", ein grau gefüllter "Abbrechen", ein blau umrandeter, transparenter "Mehr erfahren", und ein ausgegrauter, nicht antippbarer "Nicht verfügbar".