Product Details: Reading All of a Product's Data

EXACTLY as in the React web tutorial: a single Magento product object carries CONSIDERABLY more data than just name and price – and much of it lives in custom_attributes, a flat array.

fetchProductBySku() in the API client

api/magentoApi.js

// ... BASE_URL, ACCESS_TOKEN, PAGE_SIZE, magentoFetch(), fetchProducts() as in chapter 8 ...

export async function fetchProductBySku(sku) {
  const product = await magentoFetch(`/products/${encodeURIComponent(sku)}`);
  return product;
}

Safely reading custom_attributes: a helper function

api/magentoApi.js

// ... previous code ...

export function readCustomAttribute(product, attributeCode) {
  const attribute = product.custom_attributes?.find(
    (a) => a.attribute_code === attributeCode
  );
  return attribute?.value ?? null;
}

This helper function and the data structure are IDENTICAL to the React web tutorial – if you've already built magentoApi.js there, you already know this code.

ProductDetailScreen.js: displaying all data

screens/ProductDetailScreen.js

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

export default function ProductDetailScreen({ route }) {
  const { sku } = route.params;
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    async function load() {
      const data = await fetchProductBySku(sku);
      setProduct(data);
      setLoading(false);
    }
    load();
  }, [sku]);

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

  const description = readCustomAttribute(product, 'description');

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>{product.name}</Text>
      <Text>SKU: {product.sku}</Text>
      <Text>{product.price} €</Text>
      {description && <Text style={styles.description}>{description}</Text>}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  centered: { flex: 1, justifyContent: 'center' },
  container: { padding: 16 },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 8 },
  description: { marginTop: 16 },
});

Achtung: Unlike the React web tutorial, we deliberately do NOT use a dangerouslySetInnerHTML equivalent HERE – React Native fundamentally renders NO HTML. If description from Magento contains HTML tags (common with content from the WYSIWYG editor), those tags show up here as VISIBLE text. A production-ready solution would need a library like react-native-render-html, deliberately left out of this focused tutorial – the plain text data in <Text> is enough to demonstrate the API's principle.

More commonly used custom_attributes

short_description – short description.
meta_title/meta_description – the product's SEO metadata.
special_price – a discounted price, if set in the admin.
weight – weight, relevant for shipping calculations.