Jetzt bringen wir alles zusammen: die geladenen Produkte aus dem letzten Kapitel als scrollbare Liste von ProductCard-Komponenten anzeigen. In HTML würden Sie eine <ul> mit einer .map()-Schleife über <li> bauen. In React Native gibt es dafür eine spezielle, performance-optimierte Komponente: FlatList.

Warum nicht einfach .map() in einer View?

Technisch könnten Sie {{produkte.map(p => <ProductCard key={{p.id}} ... />)}} in eine normale View schreiben – bei 10 Produkten funktioniert das auch. Bei 500 Produkten wäre das aber ein Performance-Problem: ALLE 500 Karten würden sofort erzeugt und im Speicher gehalten, auch die, die gar nicht sichtbar sind. FlatList rendert dagegen nur die Elemente, die gerade (oder bald) auf dem Bildschirm sichtbar sind, und recycelt die Speicherbereiche beim Scrollen – vergleichbar mit "virtuellem Scrollen", das Sie eventuell aus Web-Bibliotheken wie react-window kennen.

App.js aktualisieren: FlatList statt Zähler

Ersetzen Sie App.js ein weiteres Mal – der ProductCard-Import ist zurück, und statt nur die Anzahl der Produkte anzuzeigen, rendern wir jetzt die komplette Liste:

import { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet, ActivityIndicator } from 'react-native';
import { fetchProducts } from './api/magentoApi';
import ProductCard from './components/ProductCard';

export default function App() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadProducts() {
      try {
        const items = await fetchProducts();
        setProducts(items);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    }
    loadProducts();
  }, []);

  if (loading) {
    return <ActivityIndicator size="large" style={styles.loader} />;
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={products}
        keyExtractor={(item) => item.sku}
        renderItem={({ item }) => (
          <ProductCard
            name={item.name}
            price={item.price}
            imageUrl={item.imageUrl}
            onPress={() => console.log('Angeklickt:', item.name)}
          />
        )}
        ListEmptyComponent={<Text>Keine Produkte gefunden.</Text>}
      />
    </View>
  );
}

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

Speichern Sie und schauen Sie auf Ihr Handy: Sie sehen jetzt die echte, scrollbare Produktliste Ihres Shops, jede Zeile eine ProductCard mit eigenem Favoriten-Herz.

Die drei wichtigsten Props im HTML-Vergleich

keyExtractor ist wichtig, damit React beim Neuzeichnen genau weiß, welches Listenelement welchem Datenobjekt entspricht – ganz genau wie das key-Attribut bei .map()-Schleifen in normalem React für das Web. Fehlt es, nimmt FlatList standardmäßig den Index, was bei Sortier- oder Filteränderungen zu Anzeigefehlern führen kann.

Weitere nützliche Props (Vorschau)

• ListEmptyComponent – haben wir gerade schon verwendet, für den "Keine Produkte gefunden"-Fall
• ListHeaderComponent / ListFooterComponent – Elemente vor/nach der eigentlichen Liste, z. B. eine Überschrift oder ein "Mehr laden"-Button
• onRefresh + refreshing – aktiviert die "Pull-to-refresh"-Geste, die Nutzer von praktisch jeder mobilen App kennen
• horizontal – dreht die Scrollrichtung von vertikal auf horizontal, nützlich für Produktkarussells