10. Cart screen

Show line items, update quantities, and go to checkout.

On this page

In this step, you'll create a cart screen where users can view the items they've added to their cart, adjust quantities, and proceed to checkout.

You'll create the necessary components and utilities first, then implement the cart screen and add it to the navigation.

Add Cart Item Component

First, you'll create a cart item component to display individual items in the cart.

Create the file components/cart-item.tsx with the following content:

tsx

tsxCopy

1import { IconSymbol } from "@/components/ui/icon-symbol"
2import { Colors } from "@/constants/theme"
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 React from "react"
8import { StyleSheet, Text, TouchableOpacity, View } from "react-native"
9
10interface CartItemProps {
11  item: HttpTypes.StoreCartLineItem;
12  currencyCode?: string;
13  onUpdateQuantity: (quantity: number) => void;
14  onRemove: () => void;
15}
16
17export const CartItem = React.memo(function CartItem({ item, currencyCode, onUpdateQuantity, onRemove }: CartItemProps) {
18  const colorScheme = useColorScheme()
19  const colors = Colors[colorScheme ?? "light"]
20
21  const thumbnail = item.thumbnail || item.variant?.product?.thumbnail
22  const total = item.subtotal || 0
23
24  return (
25    <View style={[styles.container, { borderBottomColor: colors.icon + "30" }]}>
26      <Image
27        source={{ uri: thumbnail || "https://placehold.co/80" }}
28        style={[styles.image, { backgroundColor: colors.imagePlaceholder }]}
29        contentFit="cover"
30      />
31      <View style={styles.content}>
32        <View style={styles.info}>
33          <Text style={[styles.title, { color: colors.text }]} numberOfLines={2}>
34            {item.product_title || item.title}
35          </Text>
36          {item.variant_title && (
37            <Text style={[styles.variant, { color: colors.icon }]}>
38              {item.variant_title}
39            </Text>
40          )}
41          <Text style={[styles.price, { color: colors.text }]}>
42            {formatPrice(total, currencyCode)}
43          </Text>
44        </View>
45        <View style={styles.actions}>
46          <View style={styles.quantityContainer}>
47            <TouchableOpacity
48              style={[styles.quantityButton, { borderColor: colors.icon }]}
49              onPress={() => onUpdateQuantity(Math.max(1, item.quantity - 1))}
50            >
51              <Text style={[styles.quantityButtonText, { color: colors.text }]}>-</Text>
52            </TouchableOpacity>
53            <Text style={[styles.quantity, { color: colors.text }]}>
54              {item.quantity}
55            </Text>
56            <TouchableOpacity
57              style={[styles.quantityButton, { borderColor: colors.icon }]}
58              onPress={() => onUpdateQuantity(item.quantity + 1)}
59            >
60              <Text style={[styles.quantityButtonText, { color: colors.text }]}>+</Text>
61            </TouchableOpacity>
62          </View>
63          <TouchableOpacity onPress={onRemove} style={styles.removeButton}>
64            <IconSymbol size={20} name="trash" color={colors.text} />
65          </TouchableOpacity>
66        </View>
67      </View>
68    </View>
69  )
70})
71
72const styles = StyleSheet.create({
73  container: {
74    flexDirection: "row",
75    padding: 16,
76    borderBottomWidth: 1,
77  },
78  image: {
79    width: 80,
80    height: 80,
81    borderRadius: 8,
82  },
83  content: {
84    flex: 1,
85    marginLeft: 12,
86    justifyContent: "space-between",
87  },
88  info: {
89    flex: 1,
90  },
91  title: {
92    fontSize: 14,
93    fontWeight: "600",
94    marginBottom: 4,
95  },
96  variant: {
97    fontSize: 12,
98    marginBottom: 4,
99  },
100  price: {
101    fontSize: 14,
102    fontWeight: "700",
103    marginTop: 4,
104  },
105  actions: {
106    flexDirection: "row",
107    alignItems: "center",
108    justifyContent: "space-between",
109    marginTop: 8,
110  },
111  quantityContainer: {
112    flexDirection: "row",
113    alignItems: "center",
114  },
115  quantityButton: {
116    width: 28,
117    height: 28,
118    borderRadius: 14,
119    borderWidth: 1,
120    alignItems: "center",
121    justifyContent: "center",
122  },
123  quantityButtonText: {
124    fontSize: 16,
125    fontWeight: "600",
126  },
127  quantity: {
128    marginHorizontal: 12,
129    fontSize: 14,
130    fontWeight: "600",
131    minWidth: 20,
132    textAlign: "center",
133  },
134  removeButton: {
135    padding: 4,
136  },
137})

The CartItem component receives the following props:

item: The cart line item to display.
currencyCode: The currency code for formatting prices.
onUpdateQuantity: Callback to update the quantity of the item.
onRemove: Callback to remove the item from the cart.

In the component, you display the item's image, title, variant name, and price. You also provide buttons to adjust the quantity and remove the item from the cart.

Add Cart Screen

Next, you'll implement the cart screen where users can view and manage their cart items.

As mentioned before, you'll have a tab for the cart screen. So, to create the cart screen, create the file app/(drawer)/(tabs)/(cart)/index.tsx with the following content:

tsx

tsxCopy

1import { CartItem } from "@/components/cart-item"
2import { Loading } from "@/components/loading"
3import { Button } from "@/components/ui/button"
4import { Colors } from "@/constants/theme"
5import { useCart } from "@/context/cart-context"
6import { useColorScheme } from "@/hooks/use-color-scheme"
7import { formatPrice } from "@/lib/format-price"
8import { useRouter } from "expo-router"
9import React from "react"
10import { FlatList, StyleSheet, Text, View } from "react-native"
11
12export default function CartScreen() {
13  const colorScheme = useColorScheme()
14  const colors = Colors[colorScheme ?? "light"]
15  const router = useRouter()
16  const { cart, updateItemQuantity, removeItem, loading } = useCart()
17
18  const isEmpty = !cart?.items || cart.items.length === 0
19
20  if (loading && !cart) {
21    return <Loading message="Loading cart..." />
22  }
23
24  if (isEmpty) {
25    return (
26      <View style={[styles.emptyContainer, { backgroundColor: colors.background }]}>
27        <Text style={[styles.emptyTitle, { color: colors.text }]}>Your cart is empty</Text>
28        <Text style={[styles.emptyText, { color: colors.icon }]}>
29          Add some products to get started
30        </Text>
31        <Button
32          title="Browse Products"
33          onPress={() => router.push("/")}
34          style={styles.browseButton}
35        />
36      </View>
37    )
38  }
39
40  return (
41    <View style={[styles.container, { backgroundColor: colors.background }]}>
42      <FlatList
43        data={cart.items}
44        keyExtractor={(item) => item.id}
45        renderItem={({ item }) => (
46          <CartItem
47            item={item}
48            currencyCode={cart.currency_code}
49            onUpdateQuantity={(quantity) => updateItemQuantity(item.id, quantity)}
50            onRemove={() => removeItem(item.id)}
51          />
52        )}
53        contentContainerStyle={styles.listContent}
54      />
55
56      <View style={[styles.footer, { backgroundColor: colors.background, borderTopColor: colors.icon + "30" }]}>
57        <View style={styles.totals}>
58          <View style={styles.totalRow}>
59            <Text style={[styles.totalLabel, { color: colors.text }]}>Subtotal</Text>
60            <Text style={[styles.totalValue, { color: colors.text }]}>
61              {formatPrice(cart.item_subtotal, cart.currency_code)}
62            </Text>
63          </View>
64          {cart.tax_total !== undefined && cart.tax_total > 0 && (
65            <View style={styles.totalRow}>
66              <Text style={[styles.totalLabel, { color: colors.text }]}>Tax</Text>
67              <Text style={[styles.totalValue, { color: colors.text }]}>
68                {formatPrice(cart.tax_total, cart.currency_code)}
69              </Text>
70            </View>
71          )}
72          {cart.shipping_total !== undefined && cart.shipping_total > 0 && (
73            <View style={styles.totalRow}>
74              <Text style={[styles.totalLabel, { color: colors.text }]}>Shipping</Text>
75              <Text style={[styles.totalValue, { color: colors.text }]}>
76                {formatPrice(cart.shipping_total, cart.currency_code)}
77              </Text>
78            </View>
79          )}
80          <View style={[styles.totalRow, styles.grandTotalRow, { borderTopColor: colors.border }]}>
81            <Text style={[styles.grandTotalLabel, { color: colors.text }]}>Total</Text>
82            <Text style={[styles.grandTotalValue, { color: colors.tint }]}>
83              {formatPrice(cart.total, cart.currency_code)}
84            </Text>
85          </View>
86        </View>
87        <Button
88          title="Proceed to Checkout"
89          onPress={() =>  {
90            // TODO navigate to checkout screen
91          }}
92          loading={loading}
93        />
94      </View>
95    </View>
96  )
97}
98
99const styles = StyleSheet.create({
100  container: {
101    flex: 1,
102  },
103  emptyContainer: {
104    flex: 1,
105    justifyContent: "center",
106    alignItems: "center",
107    padding: 40,
108  },
109  emptyTitle: {
110    fontSize: 24,
111    fontWeight: "700",
112    marginBottom: 12,
113  },
114  emptyText: {
115    fontSize: 16,
116    textAlign: "center",
117    marginBottom: 32,
118  },
119  browseButton: {
120    minWidth: 200,
121  },
122  listContent: {
123    paddingBottom: 20,
124  },
125  footer: {
126    padding: 16,
127    borderTopWidth: 1,
128  },
129  totals: {
130    marginBottom: 20,
131  },
132  totalRow: {
133    flexDirection: "row",
134    justifyContent: "space-between",
135    alignItems: "center",
136    marginBottom: 12,
137  },
138  totalLabel: {
139    fontSize: 14,
140  },
141  totalValue: {
142    fontSize: 14,
143    fontWeight: "500",
144  },
145  grandTotalRow: {
146    marginTop: 8,
147    paddingTop: 12,
148    borderTopWidth: 1,
149  },
150  grandTotalLabel: {
151    fontSize: 18,
152    fontWeight: "700",
153  },
154  grandTotalValue: {
155    fontSize: 20,
156    fontWeight: "700",
157  },
158})

You define the CartScreen component that uses the useCart hook to access the cart state and actions. It handles three main states:

Loading: Displays a loading indicator while fetching the cart.
Empty Cart: Displays a message and a button to browse products if the cart is empty.
Cart with Items: Renders a list of cart items using the CartItem component, along with cart totals.

You also provide a button to proceed to checkout. Right now, the button does nothing. You'll change it to navigate to the checkout screen later.

Next, you'll add stack navigation for the cart screen.

Create the file app/(drawer)/(tabs)/(cart)/_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 CartStackLayout() {
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: "Cart",
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    </Stack>
36  )
37}

You show the cart screen with a header that includes a button to open the drawer navigation.

Add Cart Tab to Navigation

Finally, you'll add the cart tab to the main tab navigator.

In app/(drawer)/(tabs)/_layout.tsx, add the following import at the top of the file:

tsx

tsxCopy

1import { useCart } from "@/context/cart-context"

Then, in the TabLayout component, add the following before the return statement:

tsx

tsxCopy

1const { cart } = useCart()
2
3const itemCount = cart?.items?.length || 0

You access the cart from the cart context to get the number of items in the cart.

Finally, replace the // TODO add cart tab comment in the return statement with the following:

tsx

tsxCopy

1<Tabs.Screen
2  name="(cart)"
3  options={{
4    title: "Cart",
5    tabBarIcon: ({ color }) => <IconSymbol size={28} name="cart.fill" color={color} />,
6    tabBarBadge: itemCount > 0 ? itemCount : undefined,
7    tabBarBadgeStyle: {
8      backgroundColor: Colors[colorScheme ?? "light"].tint,
9    },
10    headerShown: false, // Let the cart stack manage its own headers
11  }}
12/>

You add a new tab to the tab navigator for the cart screen. The tab displays a badge with the number of items in the cart.

Test Cart Screen

To test out the cart screen, run your Aiminaabee application and Expo app.

Then, add some products to your cart from the product detail screen. You can open the cart by clicking its tab in the bottom navigation.

Cart screen with items in it

You can update an item's quantity or remove an item, and the cart will be updated accordingly.

Next: 11. Checkout