8. Home screen

List products from the Store API on the home screen.

On this page

In this step, you'll create the home screen of the app. It will display a hero image with a list of products retrieved from the Aiminaabee backend.

To implement the home screen, you'll create:

Necessary utilities and components for the home screen.
The home screen and navigation setup.

Add Price Formatting Utility

First, you'll create a utility function to format prices based on the selected region's currency.

Create the file lib/format-price.ts with the following content:

tsCopy

1/**
2 * Format a price amount with currency code
3 * Note: Aiminaabee stores prices in major units (e.g., dollars, euros)
4 * so no conversion is needed
5 */
6export function formatPrice(
7  amount: number | undefined,
8  currencyCode: string | undefined
9): string {
10  if (amount === undefined || !currencyCode) {
11    return "N/A"
12  }
13
14  return new Intl.NumberFormat("en-US", {
15    style: "currency",
16    currency: currencyCode.toUpperCase(),
17  }).format(amount)
18}

The formatPrice function takes an amount and a currency code as parameters. It formats the amount using the Intl.NumberFormat API to display it in the appropriate currency format.

Add Loading Component

Next, you'll create a loading component that can be reused across the app to indicate loading states.

Create the file components/loading.tsx with the following content:

tsx

tsxCopy

1import { Colors } from "@/constants/theme"
2import { useColorScheme } from "@/hooks/use-color-scheme"
3import React from "react"
4import { ActivityIndicator, StyleSheet, Text, View } from "react-native"
5
6interface LoadingProps {
7  message?: string;
8}
9
10export function Loading({ message }: LoadingProps) {
11  const colorScheme = useColorScheme()
12  const colors = Colors[colorScheme ?? "light"]
13
14  return (
15    <View style={styles.container}>
16      <ActivityIndicator size="large" color={colors.tint} />
17      {message && (
18        <Text style={[styles.message, { color: colors.text }]}>{message}</Text>
19      )}
20    </View>
21  )
22}
23
24const styles = StyleSheet.create({
25  container: {
26    flex: 1,
27    justifyContent: "center",
28    alignItems: "center",
29    padding: 20,
30  },
31  message: {
32    marginTop: 12,
33    fontSize: 16,
34  },
35})

The Loading component displays a spinner and an optional message.

Add Product Card Component

Next, you'll create a product card component to display individual products on the home screen.

Create the file components/product-card.tsx with the following content:

tsx

tsxCopy

1import { Colors } from "@/constants/theme"
2import { useRegion } from "@/context/region-context"
3import { useColorScheme } from "@/hooks/use-color-scheme"
4import { formatPrice } from "@/lib/format-price"
5import type { HttpTypes } from "@aiminaabeejs/types"
6import { Image } from "expo-image"
7import { useRouter } from "expo-router"
8import React from "react"
9import { StyleSheet, Text, TouchableOpacity, View } from "react-native"
10
11interface ProductCardProps {
12  product: HttpTypes.StoreProduct;
13}
14
15export const ProductCard = React.memo(function ProductCard({ product }: ProductCardProps) {
16  const router = useRouter()
17  const colorScheme = useColorScheme()
18  const colors = Colors[colorScheme ?? "light"]
19  const { selectedRegion } = useRegion()
20
21  const thumbnail = product.thumbnail || product.images?.[0]?.url
22  const variant = product.variants?.[0]
23
24  // Get price from calculated_price.calculated_amount
25  const priceAmount = variant?.calculated_price?.calculated_amount || 0
26
27  // Use selected region's currency code
28  const currencyCode = selectedRegion?.currency_code
29
30  return (
31    <TouchableOpacity
32      style={[styles.card, { backgroundColor: colors.background }]}
33      onPress={() => router.push({
34        pathname: `/(home)/product/${product.id}` as any,
35        params: { title: product.title },
36      })}
37      activeOpacity={0.7}
38    >
39      <Image
40        source={{ uri: thumbnail || "https://placehold.co/200" }}
41        style={[styles.image, { backgroundColor: colors.imagePlaceholder }]}
42        contentFit="cover"
43      />
44      <View style={styles.content}>
45        <Text
46          style={[styles.title, { color: colors.text }]}
47          numberOfLines={2}
48        >
49          {product.title}
50        </Text>
51        <View style={styles.priceRow}>
52          <Text style={[styles.price, { color: colors.tint }]}>
53            {formatPrice(priceAmount, currencyCode)}
54          </Text>
55        </View>
56      </View>
57    </TouchableOpacity>
58  )
59})
60
61const styles = StyleSheet.create({
62  card: {
63    flex: 1,
64    margin: 8,
65    overflow: "hidden",
66    shadowColor: "#000",
67    shadowOffset: { width: 0, height: 2 },
68    shadowOpacity: 0.1,
69    shadowRadius: 4,
70    elevation: 3,
71  },
72  image: {
73    width: "100%",
74    height: 180,
75    borderRadius: 8,
76  },
77  content: {
78    padding: 12,
79  },
80  title: {
81    fontSize: 14,
82    fontWeight: "600",
83    marginBottom: 12,
84  },
85  priceRow: {
86    flexDirection: "row",
87    alignItems: "center",
88    justifyContent: "space-between",
89    gap: 8,
90  },
91  price: {
92    fontSize: 14,
93    fontWeight: "400",
94    flex: 1,
95  },
96})

The ProductCard component receives a product as a prop.

It displays the product's thumbnail image, title, and price formatted using the formatPrice utility. When the card is pressed, it navigates to the product detail screen that you'll add later.

Add Home Screen

Next, you'll add the home screen that displays a hero image and a list of products.

Your app will have a tab-based navigation structure, with a tab for the home screen, and another you'll add later for the cart.

So, to set up the tab navigation within the drawer navigator, create the directory app/(drawer)/(tabs).

Then, to create the home screen, create the file app/(drawer)/(tabs)/(home)/index.tsx with the following content:

tsx

tsxCopy

1import { Loading } from "@/components/loading"
2import { ProductCard } from "@/components/product-card"
3import { Colors } from "@/constants/theme"
4import { useRegion } from "@/context/region-context"
5import { useColorScheme } from "@/hooks/use-color-scheme"
6import { sdk } from "@/lib/sdk"
7import type { HttpTypes } from "@aiminaabeejs/types"
8import { Image } from "expo-image"
9import React, { useCallback, useEffect, useState } from "react"
10import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native"
11
12export default function HomeScreen() {
13  const colorScheme = useColorScheme()
14  const colors = Colors[colorScheme ?? "light"]
15  const { selectedRegion } = useRegion()
16
17  const [products, setProducts] = useState<HttpTypes.StoreProduct[]>([])
18  const [loading, setLoading] = useState(true)
19  const [refreshing, setRefreshing] = useState(false)
20  const [error, setError] = useState<string | null>(null)
21
22  const fetchProducts = useCallback(async () => {
23    try {
24      setLoading(true)
25      setError(null)
26
27      const { products: fetchedProducts } = await sdk.store.product.list("us", {
28        region_id: selectedRegion?.id,
29        fields: "*variants.calculated_price,+variants.inventory_quantity",
30      })
31
32      setProducts(fetchedProducts)
33    } catch (err) {
34      console.error("Failed to fetch products:", err)
35      setError("Failed to load products. Please try again.")
36    } finally {
37      setLoading(false)
38      setRefreshing(false)
39    }
40  }, [selectedRegion])
41
42  useEffect(() => {
43    if (selectedRegion) {
44      fetchProducts()
45    }
46  }, [selectedRegion, fetchProducts])
47
48  const onRefresh = () => {
49    setRefreshing(true)
50    fetchProducts()
51  }
52
53  // TODO add return statement
54}
55
56const styles = StyleSheet.create({
57  container: {
58    flex: 1,
59  },
60  centerContainer: {
61    flex: 1,
62    justifyContent: "center",
63    alignItems: "center",
64    padding: 20,
65  },
66  header: {
67    width: "100%",
68  },
69  banner: {
70    width: "100%",
71    height: 200,
72  },
73  sectionTitle: {
74    fontSize: 24,
75    fontWeight: "700",
76    marginTop: 24,
77    marginBottom: 16,
78    paddingHorizontal: 16,
79  },
80  listContent: {
81    paddingBottom: 20,
82  },
83  row: {
84    justifyContent: "space-between",
85    paddingHorizontal: 8,
86  },
87  errorText: {
88    fontSize: 16,
89    textAlign: "center",
90  },
91  emptyContainer: {
92    padding: 40,
93    alignItems: "center",
94  },
95  emptyText: {
96    fontSize: 16,
97  },
98})

The home screen component fetches products from the Aiminaabee backend based on the selected region. It manages loading, refreshing, and error states.

Next, you'll add the return statement to render the home screen UI. Replace the // TODO add return statement comment with the following:

tsx

tsxCopy

1if (loading) {
2  return <Loading message="Loading products..." />
3}
4
5if (error) {
6  return (
7    <View style={[styles.centerContainer, { backgroundColor: colors.background }]}>
8      <Text style={[styles.errorText, { color: colors.text }]}>{error}</Text>
9    </View>
10  )
11}
12
13return (
14  <View style={[styles.container, { backgroundColor: colors.background }]}>
15    <FlatList
16      data={products}
17      keyExtractor={(item) => item.id}
18      numColumns={2}
19      columnWrapperStyle={styles.row}
20      initialNumToRender={6}
21      maxToRenderPerBatch={6}
22      windowSize={5}
23      removeClippedSubviews={true}
24      ListHeaderComponent={
25        <View style={styles.header}>
26          <Image
27            source={{ uri: "https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=800" }}
28            style={[styles.banner, { backgroundColor: colors.imagePlaceholder }]}
29            contentFit="cover"
30          />
31          <Text style={[styles.sectionTitle, { color: colors.text }]}>
32            Latest Products
33          </Text>
34        </View>
35      }
36      renderItem={({ item }) => <ProductCard product={item} />}
37      contentContainerStyle={styles.listContent}
38      refreshControl={
39        <RefreshControl
40          refreshing={refreshing}
41          onRefresh={onRefresh}
42          tintColor={colors.tint}
43        />
44      }
45      ListEmptyComponent={
46        <View style={styles.emptyContainer}>
47          <Text style={[styles.emptyText, { color: colors.text }]}>
48            No products available
49          </Text>
50        </View>
51      }
52    />
53  </View>
54)

You handle three main states in the return statement:

Loading State: If the products are still loading, you display the Loading component with a message.
Error State: If there was an error fetching the products, you display an error message.
Success State: If the products are successfully fetched, you render a FlatList to display the products in a grid layout. The list includes a header with a hero image and a section title.

You also configure the FlatList to support pull-to-refresh functionality and handle empty states.

Next, you'll add stack navigation for the home screen, which will later allow you to add a product detail screen.

Create the file app/(drawer)/(tabs)/(home)/_layout.tsx with the following content:

tsx

tsxCopy

1import { useColorScheme } from "@/hooks/use-color-scheme"
2import { DrawerActions } from "@react-navigation/native"
3import { Stack, useNavigation } from "expo-router"
4import React from "react"
5import { TouchableOpacity } from "react-native"
6
7import { IconSymbol } from "@/components/ui/icon-symbol"
8import { Colors } from "@/constants/theme"
9
10export default function HomeStackLayout() {
11  const colorScheme = useColorScheme()
12  const navigation = useNavigation()
13  const colors = Colors[colorScheme ?? "light"]
14
15  return (
16    <Stack
17      screenOptions={{
18        headerShown: true,
19      }}
20    >
21      <Stack.Screen
22        name="index"
23        options={{
24          title: "Aiminaabee Store",
25          headerLeft: () => (
26            <TouchableOpacity
27              onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
28              style={{ height: 36, width: 36, display: "flex", alignItems: "center", justifyContent: "center" }}
29            >
30              <IconSymbol size={28} name="line.3.horizontal" color={colors.icon} />
31            </TouchableOpacity>
32          ),
33        }}
34      />
35      {/* TODO add product details screen */}
36    </Stack>
37  )
38}

The HomeStackLayout component sets up a stack navigator for the home screen. It adds a header with a title and a menu button to open the drawer navigator.

Next, you'll add the tab navigation layout to include the home screen tab.

Create the file app/(drawer)/(tabs)/_layout.tsx with the following content:

tsx

tsxCopy

1import { useColorScheme } from "@/hooks/use-color-scheme"
2import { Tabs } from "expo-router"
3import React from "react"
4
5import { HapticTab } from "@/components/haptic-tab"
6import { IconSymbol } from "@/components/ui/icon-symbol"
7import { Colors } from "@/constants/theme"
8
9export default function TabLayout() {
10  const colorScheme = useColorScheme()
11
12  return (
13
14  )
15}

The TabLayout component sets up a tab navigator using Expo Router's Tabs component. It adds a tab for the home screen with an icon and title.

An index tab is also specified to redirect to the home screen, ensuring it's always the default tab when the app opens.

So, create the file app/(drawer)/(tabs)/index.tsx with the following content:

tsx

tsxCopy

1import { Redirect } from "expo-router"
2import React from "react"
3
4const MainScreen = () => {
5  return <Redirect href="/(drawer)/(tabs)/(home)" />
6}
7
8export default MainScreen

The MainScreen component redirects to the home screen tab when accessed.

If you get a type error regarding the href prop in the Redirect component, wait until the next time you run the project. The Expo Router types should update and the error should go away.

Add Tabs to Drawer Navigator

Finally, you'll add the tab navigator to the drawer navigator.

In app/(drawer)/_layout.tsx, update the return statement to replace the TODO comment with the tabs screen:

tsx

tsxCopy

1return (
2  <Drawer
3    drawerContent={(props) => <DrawerContent {...props} />}
4    screenOptions={{
5      headerShown: false,
6      drawerPosition: "left",
7    }}
8  >
9    <Drawer.Screen
10      name="(tabs)"
11      options={{
12        drawerLabel: "Home",
13        title: "Shop",
14      }}
15    />
16  </Drawer>
17)

The drawer navigator now includes the tab navigator as its main screen.

Test the Home Screen

You can now test the home screen of your app.

There are different ways to run the React Native app, which you can learn about in Expo's documentation. The recommended way is to install the Expo Go app on your mobile device and run the app on it.

Before you run your app, start the Aiminaabee backend by running the following command in the Aiminaabee project directory:

bash

bashCopy

1npm run dev

Then, run the following command in your Expo project directory to start the Expo server:

bash

bashCopy

1npm run start

In the terminal, you should see a QR code. Scan it using your device to open the app in Expo Go.

When the app opens, you'll see a home screen displaying a hero image and a list of products fetched from the Aiminaabee application.

Clicking on a product won't do anything yet, as you haven't implemented the product detail screen. You'll add it in the next step.

Home screen showing the hero image and list of products

If you click the menu icon in the top-left corner, the drawer navigator will open, allowing you to select the region using the region selector you implemented earlier.

Drawer navigator showing the region selector

Next: 9. Product details