Menüs im Material-Design-Stil in React Native

Ein Dropdown-/Kontextmenü ("3-Punkte-Menü") ist in Material Design allgegenwärtig – React Native hat dafür keine eingebaute Komponente, aber das Muster lässt sich mit Modal und absoluter Positionierung selbst nachbauen.

1. Beschreibung

Der Trick: die Menü-Auswahlliste wird in einem transparenten, Vollbild-Modal gerendert, das über den restlichen Inhalt gelegt wird. Ein Tippen AUßERHALB des Menüs (auf den transparenten Hintergrund) schließt es – das übliche Verhalten von Kontextmenüs.

2. Kurzes Beispiel

<Modal transparent visible={offen} onRequestClose={() => setOffen(false)}>
  <Pressable style={{ flex: 1 }} onPress={() => setOffen(false)}>
    <View style={styles.menue}>{/* Menüpunkte */}</View>
  </Pressable>
</Modal>

3. Komplettes Projekt: Karten-Aktionsmenü

npx create-expo-app material-menu-demo
cd material-menu-demo

components/AktionsMenue.js

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

function AktionsMenue({ optionen }) {
  const [offen, setOffen] = useState(false);

  function optionAuswaehlen(option) {
    setOffen(false);
    option.onPress();
  }

  return (
    <>
      <TouchableOpacity onPress={() => setOffen(true)} style={styles.trigger}>
        <Text style={styles.punkte}>⋮</Text>
      </TouchableOpacity>

      <Modal transparent visible={offen} animationType="fade" onRequestClose={() => setOffen(false)}>
        <Pressable style={styles.hintergrund} onPress={() => setOffen(false)}>
          <View style={styles.menue}>
            {optionen.map((option) => (
              <TouchableOpacity
                key={option.label}
                style={styles.menuePunkt}
                onPress={() => optionAuswaehlen(option)}
              >
                <Text style={[styles.menueText, option.gefahr && styles.gefahrText]}>
                  {option.label}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </Pressable>
      </Modal>
    </>
  );
}

const styles = StyleSheet.create({
  trigger: { padding: 8 },
  punkte: { fontSize: 20 },
  hintergrund: { flex: 1, backgroundColor: 'rgba(0,0,0,0.2)', alignItems: 'flex-end', paddingTop: 100, paddingRight: 16 },
  menue: { backgroundColor: 'white', borderRadius: 8, elevation: 4, shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 6, minWidth: 160, paddingVertical: 4 },
  menuePunkt: { paddingVertical: 12, paddingHorizontal: 16 },
  menueText: { fontSize: 15 },
  gefahrText: { color: '#dc2626' },
});

export default AktionsMenue;

App.js

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

export default function App() {
  const optionen = [
    { label: 'Bearbeiten', onPress: () => Alert.alert('Bearbeiten ausgewählt') },
    { label: 'Teilen', onPress: () => Alert.alert('Teilen ausgewählt') },
    { label: 'Löschen', onPress: () => Alert.alert('Löschen ausgewählt'), gefahr: true },
  ];

  return (
    <View style={styles.header}>
      <Text style={styles.titel}>Meine Notizen</Text>
      <AktionsMenue optionen={optionen} />
    </View>
  );
}

const styles = StyleSheet.create({
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 60, paddingHorizontal: 16 },
  titel: { fontSize: 20, fontWeight: 'bold' },
});

4. Erklärung

transparent auf Modal sorgt dafür, dass der dahinterliegende Bildschirm SICHTBAR bleibt (abgedunkelt statt komplett verdeckt), statt eines eigenen Vollbild-Screens.
Der äußere Pressable deckt den GESAMTEN Bildschirm ab – Antippen an JEDER Stelle außerhalb des eigentlichen Menüs schließt es, ein Standardverhalten für Kontextmenüs/Dropdowns.
onRequestClose ist auf Android PFLICHT – es fängt den Zurück-Knopf/die Zurück-Geste ab und schließt das Menü, statt dass die App das Modal ignoriert.
Die optionen-Prop ist ein Array aus Objekten mit label/onPress/optionalem gefahr-Flag – die Komponente selbst kennt die konkreten Aktionen nicht, macht sie dadurch für JEDES Menü (nicht nur Notizen) wiederverwendbar.

5. Ausgaben

Ausgabe

Oben links Titel "Meine Notizen", oben rechts ein "⋮"-Symbol. Antippen öffnet ein weißes Menü mit Schatten unter dem Symbol, drei Einträge ("Bearbeiten", "Teilen", "Löschen" in Rot), Hintergrund leicht abgedunkelt. Antippen eines Eintrags schließt das Menü und öffnet eine native Alert-Box mit der Bestätigung.