Navigating to the Detail Screen With React Navigation

The product list is in place – now let's connect it to a second screen: the product detail screen, which we'll fill with all product data starting in chapter 10.

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ProductListScreen from './screens/ProductListScreen';
import ProductDetailScreen from './screens/ProductDetailScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="ProductList"
          component={ProductListScreen}
          options={{ title: 'Products' }}
        />
        <Stack.Screen
          name="ProductDetail"
          component={ProductDetailScreen}
          options={{ title: 'Product Details' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Unlike React Router (URL-based, with a :sku parameter in the path), React Navigation passes parameters via a params object at the navigation call – we pass the SKU there instead of in a URL.

components/ProductCard.js

import { Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function ProductCard({ product }) {
  const navigation = useNavigation();

  return (
    <TouchableOpacity
      style={styles.row}
      onPress={() => navigation.navigate('ProductDetail', { sku: product.sku })}
    >
      <Text style={styles.name}>{product.name}</Text>
      <Text>{product.price} €</Text>
    </TouchableOpacity>
  );
}

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

useNavigation() gives access to the navigation object WITHOUT having to pass it down as a prop – useful for components like ProductCard that are nested DEEPER than the actual screen.

ProductListScreen.js: using ProductCard

screens/ProductListScreen.js

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

export default function ProductListScreen() {
  const [products, setProducts] = useState([]);
  const [page, setPage] = useState(1);
  const [pageCount, setPageCount] = useState(1);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);

  useEffect(() => {
    async function loadFirstPage() {
      const result = await fetchProducts({ page: 1 });
      setProducts(result.products);
      setPageCount(result.pageCount);
      setPage(1);
      setLoading(false);
    }
    loadFirstPage();
  }, []);

  async function loadNextPage() {
    if (loadingMore || page >= pageCount) {
      return;
    }
    setLoadingMore(true);
    const nextPage = page + 1;
    const result = await fetchProducts({ page: nextPage });
    setProducts((previous) => [...previous, ...result.products]);
    setPage(nextPage);
    setLoadingMore(false);
  }

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

  return (
    <FlatList
      data={products}
      keyExtractor={(product) => product.sku}
      renderItem={({ item }) => <ProductCard product={item} />}
      onEndReached={loadNextPage}
      onEndReachedThreshold={0.5}
      ListFooterComponent={loadingMore ? <ActivityIndicator /> : null}
    />
  );
}

const styles = StyleSheet.create({
  centered: { flex: 1, justifyContent: 'center' },
});

screens/ProductDetailScreen.js: a preliminary skeleton

screens/ProductDetailScreen.js

import { Text, View } from 'react-native';

export default function ProductDetailScreen({ route }) {
  const { sku } = route.params;

  return (
    <View style={{ padding: 16 }}>
      <Text>Details for SKU: {sku}</Text>
    </View>
  );
}

route.params is React Navigation's counterpart to useParams() from the React web tutorial – the values passed at the navigation.navigate(...) call end up here.

Tipp: Now tap a product in the running app – React Navigation should switch to the detail screen (including the native back gesture/back arrow), and the still-simple detail page should correctly show the SKU. EXACTLY this data flow is the foundation for chapter 10.

Navigating to the Detail Screen With React Navigation

Navigating to the Detail Screen With React Navigation

Setting up React Navigation in App.js

components/ProductCard.js: a tappable product card

ProductListScreen.js: using ProductCard

screens/ProductDetailScreen.js: a preliminary skeleton