Loading the Product List With FlatList

With the integration token safely stored, let's build the app's centerpiece: a central API client and the first product list screen with REAL Magento data, displayed with FlatList.

api/magentoApi.js: a central API client

ALL of the app's Magento calls go through ONE file – EXACTLY the same principle as the React web tutorial, just with process.env.EXPO_PUBLIC_... instead of import.meta.env.VITE_...:

api/magentoApi.js

const BASE_URL = process.env.EXPO_PUBLIC_MAGENTO_BASE_URL;
const ACCESS_TOKEN = process.env.EXPO_PUBLIC_MAGENTO_ACCESS_TOKEN;

async function magentoFetch(path) {
  const response = await fetch(`${BASE_URL}${path}`, {
    headers: {
      Authorization: `Bearer ${ACCESS_TOKEN}`,
    },
  });

  if (!response.ok) {
    throw new Error(`Magento API error: ${response.status}`);
  }

  return response.json();
}

export async function fetchProducts() {
  const data = await magentoFetch('/products?searchCriteria[pageSize]=12');
  return data;
}

screens/ProductListScreen.js: first version

screens/ProductListScreen.js

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

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

  useEffect(() => {
    async function load() {
      const data = await fetchProducts();
      setProducts(data.items);
      setLoading(false);
    }
    load();
  }, []);

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

  return (
    <FlatList
      data={products}
      keyExtractor={(product) => product.sku}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text style={styles.name}>{item.name}</Text>
          <Text>{item.price} €</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  centered: { flex: 1, justifyContent: 'center' },
  row: { padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee' },
  name: { fontWeight: 'bold', marginBottom: 4 },
});

App.js

import ProductListScreen from './screens/ProductListScreen';

export default function App() {
  return <ProductListScreen />;
}

Restart npx expo start (because of the .env changes from chapter 6) and open the app – you should now see a SIMPLE but REAL, efficiently rendered list of your Magento product names and prices.

Tipp: keyExtractor plays the same role for FlatList as the key prop for .map() in the React web tutorial – React Native needs a unique key per item to re-render lists efficiently. The SKU is JUST AS suitable for this as on the web.