Floating Action Button in React Native

Ein Floating Action Button (FAB) ist ein runder Button, der fest über dem restlichen Inhalt "schwebt" – aus Material Design bekannt, häufig für die wichtigste Aktion eines Screens ("Neuer Eintrag", "Neue Nachricht").

1. Beschreibung

Technisch ist ein FAB ein absolut positioniertes, kreisförmiges TouchableOpacity am unteren rechten Bildschirmrand, mit elevation (Android) bzw. shadow*-Eigenschaften (iOS) für den charakteristischen Schatten, der es vom Inhalt darunter abhebt.

2. Kurzes Beispiel

<TouchableOpacity style={{
  position: 'absolute', right: 24, bottom: 24,
  width: 56, height: 56, borderRadius: 28,
  backgroundColor: '#2563eb', alignItems: 'center', justifyContent: 'center',
}}>
  <Text style={{ color: 'white', fontSize: 28 }}>+</Text>
</TouchableOpacity>

3. Komplettes Projekt: Notizliste mit FAB

npx create-expo-app fab-demo
cd fab-demo

App.js

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

let naechsteId = 1;

export default function App() {
  const [notizen, setNotizen] = useState([]);

  function neueNotizHinzufuegen() {
    setNotizen((liste) => [
      ...liste,
      { id: naechsteId++, text: `Notiz #${liste.length + 1}` },
    ]);
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={notizen}
        keyExtractor={(item) => String(item.id)}
        renderItem={({ item }) => (
          <View style={styles.notiz}>
            <Text>{item.text}</Text>
          </View>
        )}
        ListEmptyComponent={<Text style={styles.leer}>Noch keine Notizen. Tippe auf +.</Text>}
        contentContainerStyle={styles.liste}
      />
      <TouchableOpacity style={styles.fab} onPress={neueNotizHinzufuegen}>
        <Text style={styles.fabIcon}>+</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60 },
  liste: { paddingHorizontal: 16 },
  notiz: { backgroundColor: '#f3f4f6', padding: 14, borderRadius: 10, marginBottom: 10 },
  leer: { textAlign: 'center', marginTop: 40, color: '#9ca3af' },
  fab: {
    position: 'absolute', right: 24, bottom: 24,
    width: 56, height: 56, borderRadius: 28,
    backgroundColor: '#2563eb', alignItems: 'center', justifyContent: 'center',
    elevation: 6,
    shadowColor: '#000', shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3, shadowRadius: 4,
  },
  fabIcon: { color: 'white', fontSize: 28, lineHeight: 30 },
});

4. Erklärung

position: 'absolute' mit right/bottom löst den Button aus dem normalen Flexbox-Fluss und heftet ihn relativ zum nächsten positionierten Vorfahren (hier der container) an die untere rechte Ecke.
elevation ist eine ANDROID-only-Eigenschaft für Material-Schatten; shadowColor/shadowOffset/shadowOpacity/shadowRadius sind das iOS-Äquivalent – beide Sätze gemeinsam angeben, damit der Schatten auf beiden Plattformen erscheint.
borderRadius: 28 bei width/height: 56 (= die Hälfte) erzeugt einen exakten Kreis – dieselbe Formel wie im "Avatar"-Thema.
Der FAB ist als LETZTES Kind im JSX platziert, damit er (bei überlappenden Elementen ohne explizites zIndex) über der FlatList gerendert wird.

5. Ausgaben

Ausgabe

Eine leere Liste mit Hinweistext "Noch keine Notizen. Tippe auf +.", unten rechts ein blauer, runder Button mit weißem Plus-Symbol und Schlagschatten. Jedes Antippen fügt eine neue Notiz-Karte oben in die Liste ein ("Notiz #1", "Notiz #2", ...).