Lokale JSON-Datei laden in React Native

Nicht jede Datenquelle kommt aus dem Netzwerk – App-interne Konfigurationen, Übersetzungen oder Demo-Daten liegen oft als JSON-Datei direkt im Projekt. React Native lädt diese anders als eine Netzwerk-URL: über require() statt fetch().

1. Beschreibung

Der Metro-Bundler (React Natives JavaScript-Bundler) erkennt .json-Dateien automatisch und importiert sie als fertig geparstes JavaScript-Objekt – kein fetch(), kein await, keine Fehlerbehandlung nötig, da die Datei zur Build-Zeit fest eingebettet wird.

2. Kurzes Beispiel

import produkte from './daten/produkte.json';

console.log(produkte[0].name); // sofort verfügbar, kein Laden nötig

3. Komplettes Projekt: Offline-Rezeptbuch

npx create-expo-app local-json-demo
cd local-json-demo

daten/rezepte.json

[
  { "id": 1, "titel": "Tomatensuppe", "minuten": 25, "zutaten": ["Tomaten", "Zwiebel", "Brühe"] },
  { "id": 2, "titel": "Pfannkuchen", "minuten": 15, "zutaten": ["Mehl", "Milch", "Ei"] },
  { "id": 3, "titel": "Gemüsecurry", "minuten": 35, "zutaten": ["Kokosmilch", "Curry", "Gemüse"] }
]

App.js

import { useState } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import rezepte from './daten/rezepte.json';

export default function App() {
  const [ausgewaehlteId, setAusgewaehlteId] = useState(null);

  return (
    <FlatList
      contentContainerStyle={styles.liste}
      data={rezepte}
      keyExtractor={(item) => String(item.id)}
      renderItem={({ item }) => {
        const offen = item.id === ausgewaehlteId;
        return (
          <TouchableOpacity
            style={styles.karte}
            onPress={() => setAusgewaehlteId(offen ? null : item.id)}
          >
            <Text style={styles.titel}>{item.titel}</Text>
            <Text style={styles.zeit}>{item.minuten} Minuten</Text>
            {offen && (
              <Text style={styles.zutaten}>
                Zutaten: {item.zutaten.join(', ')}
              </Text>
            )}
          </TouchableOpacity>
        );
      }}
    />
  );
}

const styles = StyleSheet.create({
  liste: { paddingTop: 60, paddingHorizontal: 16 },
  karte: { backgroundColor: '#f3f4f6', padding: 14, borderRadius: 10, marginBottom: 10 },
  titel: { fontSize: 16, fontWeight: 'bold' },
  zeit: { color: '#6b7280', marginTop: 2 },
  zutaten: { marginTop: 8, color: '#374151' },
});

4. Erklärung

import rezepte from './daten/rezepte.json' statt fetch('./daten/rezepte.json') – Letzteres würde in React Native NICHT funktionieren, da es kein Dateisystem-URL-Schema wie im Browser gibt.
Weil die Daten schon zur Build-Zeit eingebettet sind, gibt es keinen Lade- oder Fehlerzustand – rezepte ist beim ersten Rendern bereits vollständig vorhanden.
Nachteil dieses Ansatzes: die Daten sind FEST im App-Paket – zum Aktualisieren muss die App neu gebaut und veröffentlicht werden, anders als bei Netzwerk-Daten (siehe Kapitel "Axios"/"Fetch").
Der Auf-/Zuklapp-Mechanismus (ausgewaehlteId-State) folgt demselben Muster wie das "Dumb Components"-Kapitel – hier direkt in der renderItem-Funktion statt in einer ausgelagerten Komponente, weil die Logik kurz genug ist.

5. Ausgaben

Ausgabe

Drei Rezeptkarten ("Tomatensuppe – 25 Minuten", "Pfannkuchen – 15 Minuten", "Gemüsecurry – 35 Minuten"). Antippen einer Karte klappt darunter die Zutatenliste aus ("Zutaten: Tomaten, Zwiebel, Brühe"); erneutes Antippen klappt sie wieder ein.