Fetch Data From a Local JSON File in React Native

Not every data source comes from the network – app-internal configuration, translations, or demo data often live as a JSON file right inside the project. React Native loads these differently from a network URL: via require() instead of fetch().

1. Description

Metro (React Native's JavaScript bundler) automatically recognizes .json files and imports them as an already-parsed JavaScript object – no fetch(), no await, no error handling needed, since the file is embedded directly at build time.

2. Short example

import products from './data/products.json';

console.log(products[0].name); // available immediately, no loading needed

3. Complete project: an offline recipe book

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

data/recipes.json

[
  { "id": 1, "title": "Tomato Soup", "minutes": 25, "ingredients": ["Tomatoes", "Onion", "Stock"] },
  { "id": 2, "title": "Pancakes", "minutes": 15, "ingredients": ["Flour", "Milk", "Egg"] },
  { "id": 3, "title": "Vegetable Curry", "minutes": 35, "ingredients": ["Coconut Milk", "Curry", "Vegetables"] }
]

App.js

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

export default function App() {
  const [selectedId, setSelectedId] = useState(null);

  return (
    <FlatList
      contentContainerStyle={styles.list}
      data={recipes}
      keyExtractor={(item) => String(item.id)}
      renderItem={({ item }) => {
        const open = item.id === selectedId;
        return (
          <TouchableOpacity
            style={styles.card}
            onPress={() => setSelectedId(open ? null : item.id)}
          >
            <Text style={styles.title}>{item.title}</Text>
            <Text style={styles.time}>{item.minutes} minutes</Text>
            {open && (
              <Text style={styles.ingredients}>
                Ingredients: {item.ingredients.join(', ')}
              </Text>
            )}
          </TouchableOpacity>
        );
      }}
    />
  );
}

const styles = StyleSheet.create({
  list: { paddingTop: 60, paddingHorizontal: 16 },
  card: { backgroundColor: '#f3f4f6', padding: 14, borderRadius: 10, marginBottom: 10 },
  title: { fontSize: 16, fontWeight: 'bold' },
  time: { color: '#6b7280', marginTop: 2 },
  ingredients: { marginTop: 8, color: '#374151' },
});

4. Explanation

import recipes from './data/recipes.json' instead of fetch('./data/recipes.json') – the latter would NOT work in React Native, since there's no filesystem URL scheme like in a browser.
Because the data is already embedded at build time, there is no loading or error state – recipes is already fully available on the very first render.
Downside of this approach: the data is BAKED into the app bundle – updating it requires rebuilding and republishing the app, unlike network data (see the "Axios"/"Fetch" chapters).
The expand/collapse mechanism (selectedId state) follows the same pattern as the "Dumb Components" chapter – here inlined directly in the renderItem function instead of a separate component, since the logic is short enough.

5. Outputs

Ausgabe

Three recipe cards ("Tomato Soup – 25 minutes", "Pancakes – 15 minutes", "Vegetable Curry – 35 minutes"). Tapping a card expands the ingredient list below it ("Ingredients: Tomatoes, Onion, Stock"); tapping again collapses it.