Suchleiste in React Native

Eine Suchleiste ist im Kern ein TextInput mit Lupen-Icon, Live-Filterung der Liste bei jeder Eingabe und einem "Löschen"-Knopf – kein eigenes React-Native-API, sondern eine Komposition bereits bekannter Bausteine.

1. Beschreibung

Der Filtervorgang selbst ist reines JavaScript: bei jeder Änderung des Suchtexts wird die Originaldaten-Liste mit Array.prototype.filter() gegen den (kleingeschriebenen) Suchtext geprüft und das Ergebnis im State gespeichert – React Native selbst hat damit nichts zu tun.

2. Kurzes Beispiel

const [suche, setSuche] = useState('');
const gefiltert = orte.filter((o) =>
  o.toLowerCase().includes(suche.toLowerCase())
);

3. Komplettes Projekt: Städtesuche

npx create-expo-app searchbar-demo
cd searchbar-demo

App.js

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

const STAEDTE = [
  'Berlin', 'Hamburg', 'München', 'Köln', 'Frankfurt', 'Stuttgart',
  'Düsseldorf', 'Leipzig', 'Dortmund', 'Essen', 'Bremen', 'Dresden',
];

export default function App() {
  const [suche, setSuche] = useState('');

  const gefiltert = useMemo(
    () => STAEDTE.filter((stadt) => stadt.toLowerCase().includes(suche.toLowerCase())),
    [suche]
  );

  return (
    <View style={styles.container}>
      <View style={styles.suchleiste}>
        <Text style={styles.lupe}>????</Text>
        <TextInput
          style={styles.input}
          placeholder="Stadt suchen…"
          value={suche}
          onChangeText={setSuche}
          autoCapitalize="none"
          clearButtonMode="while-editing"
        />
        {suche.length > 0 && (
          <TouchableOpacity onPress={() => setSuche('')}>
            <Text style={styles.loeschen}>✕</Text>
          </TouchableOpacity>
        )}
      </View>
      <FlatList
        data={gefiltert}
        keyExtractor={(item) => item}
        renderItem={({ item }) => <Text style={styles.zeile}>{item}</Text>}
        ListEmptyComponent={<Text style={styles.leer}>Keine Stadt gefunden.</Text>}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
  suchleiste: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#f3f4f6', borderRadius: 10, paddingHorizontal: 12, marginBottom: 12 },
  lupe: { marginRight: 8 },
  input: { flex: 1, height: 44, fontSize: 16 },
  loeschen: { color: '#9ca3af', fontSize: 16, paddingHorizontal: 6 },
  zeile: { fontSize: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
  leer: { textAlign: 'center', marginTop: 24, color: '#9ca3af' },
});

4. Erklärung

useMemo(() => ..., [suche]) – berechnet die gefilterte Liste nur neu, wenn sich suche tatsächlich ändert, nicht bei jedem Re-Render der Komponente aus anderen Gründen.
toLowerCase() auf BEIDEN Seiten des Vergleichs – ohne das würde "berlin" (kleingeschrieben) "Berlin" nicht finden.
clearButtonMode="while-editing" ist iOS-spezifisch (nativer "×"-Knopf im Feld); der zusätzliche eigene TouchableOpacity-Löschen-Knopf sorgt für ein einheitliches Verhalten auch auf Android.
ListEmptyComponent aus dem FlatList-Kapitel wird hier für die "Keine Ergebnisse"-Meldung wiederverwendet.

5. Ausgaben

Ausgabe

Eine graue Suchleiste mit Lupen-Icon und Platzhaltertext "Stadt suchen…", darunter alle 12 Städte als Liste. Tippen von "m" filtert live auf "München", "Dortmund" und "Bremen" (alle enthalten "m"); ein "✕"-Knopf erscheint rechts sobald Text eingegeben wurde und leert das Feld bei Antippen.