Day 2: Building the Product Listing and Detail Pages

Today, you’ll build the product listing and product detail pages. The listing page will display all available products, and the detail page will show more information about each product. Data will be fetched from Firebase Firestore, which you set up yesterday.

Table of Contents

What You Will Do Today:

Create a Product List screen to fetch and display products.
Create a Product Detail screen to show more information about each product.
Set up navigation between the two screens.

Step 1: Installing React Navigation

Install React Navigation to navigate between screens:

   npm install @react-navigation/native @react-navigation/stack
   npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

Initialize navigation by creating a stack navigator in your app.

   // App.js
   import React from 'react';
   import { NavigationContainer } from '@react-navigation/native';
   import { createStackNavigator } from '@react-navigation/stack';
   import ProductList from './screens/ProductList';
   import ProductDetail from './screens/ProductDetail';

   const Stack = createStackNavigator();

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

Step 2: Creating the Product List Screen

In the screens folder, create a file called ProductList.js.

   // screens/ProductList.js
   import React, { useEffect, useState } from 'react';
   import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
   import firestore from '@react-native-firebase/firestore';

   function ProductList({ navigation }) {
     const [products, setProducts] = useState([]);

     useEffect(() => {
       const fetchProducts = async () => {
         const productsList = [];
         const snapshot = await firestore().collection('products').get();
         snapshot.forEach(doc => {
           productsList.push({ id: doc.id, ...doc.data() });
         });
         setProducts(productsList);
       };

       fetchProducts();
     }, []);

     const renderItem = ({ item }) => (
       <TouchableOpacity
         style={styles.productItem}
         onPress={() => navigation.navigate('ProductDetail', { productId: item.id })}
       >
         <Text style={styles.productName}>{item.name}</Text>
         <Text style={styles.productPrice}>${item.price.toFixed(2)}</Text>
       </TouchableOpacity>
     );

     return (
       <View style={styles.container}>
         <FlatList
           data={products}
           renderItem={renderItem}
           keyExtractor={(item) => item.id}
         />
       </View>
     );
   }

   const styles = StyleSheet.create({
     container: {
       flex: 1,
       padding: 16,
     },
     productItem: {
       padding: 16,
       marginVertical: 8,
       backgroundColor: '#f9f9f9',
       borderRadius: 8,
       borderWidth: 1,
       borderColor: '#ddd',
     },
     productName: {
       fontSize: 18,
       fontWeight: 'bold',
     },
     productPrice: {
       fontSize: 16,
       color: '#888',
     },
   });

   export default ProductList;

Step 3: Creating the Product Detail Screen

In the screens folder, create a file called ProductDetail.js.

   // screens/ProductDetail.js
   import React, { useEffect, useState } from 'react';
   import { View, Text, StyleSheet } from 'react-native';
   import firestore from '@react-native-firebase/firestore';

   function ProductDetail({ route }) {
     const { productId } = route.params;
     const [product, setProduct] = useState(null);

     useEffect(() => {
       const fetchProduct = async () => {
         const doc = await firestore().collection('products').doc(productId).get();
         if (doc.exists) {
           setProduct({ id: doc.id, ...doc.data() });
         }
       };

       fetchProduct();
     }, [productId]);

     if (!product) {
       return (
         <View style={styles.container}>
           <Text>Loading...</Text>
         </View>
       );
     }

     return (
       <View style={styles.container}>
         <Text style={styles.productName}>{product.name}</Text>
         <Text style={styles.productPrice}>${product.price.toFixed(2)}</Text>
         <Text style={styles.productDescription}>{product.description}</Text>
       </View>
     );
   }

   const styles = StyleSheet.create({
     container: {
       flex: 1,
       padding: 16,
     },
     productName: {
       fontSize: 24,
       fontWeight: 'bold',
       marginBottom: 8,
     },
     productPrice: {
       fontSize: 20,
       color: '#888',
       marginBottom: 8,
     },
     productDescription: {
       fontSize: 16,
       color: '#555',
     },
   });

   export default ProductDetail;

Step 4: Testing the Screens

Run your app:

   npx react-native run-android

You should see a Product List screen displaying a list of products from Firestore.
Tapping on any product should navigate you to the Product Detail screen, displaying detailed information about the selected product.

Summary

Today, you built the Product List and Product Detail screens for your e-commerce app. You also set up navigation between these screens, fetching and displaying product data from Firebase Firestore.

Tomorrow, you’ll add user authentication with Firebase, enabling users to log in with Google or Facebook.

Post Views: 67