9. Product details

Show a product, pick a variant, and add it to the cart.

On this page

In this step, you'll create the product detail screen that displays detailed information about a selected product.

You'll create the necessary components and utilities first, then implement the product detail screen and navigation.

Add Button Component

First, you'll create a button component that can be reused across the app.

Create the file components/ui/button.tsx with the following content:

tsx

tsxCopy

1import { Colors } from "@/constants/theme"
2import { useColorScheme } from "@/hooks/use-color-scheme"
3import React from "react"
4import {
5  ActivityIndicator,
6  StyleSheet,
7  Text,
8  TouchableOpacity,
9  TouchableOpacityProps,
10} from "react-native"
11
12interface ButtonProps extends TouchableOpacityProps {
13  title: string;
14  variant?: "primary" | "secondary";
15  loading?: boolean;
16}
17
18export function Button({
19  title,
20  variant = "primary",
21  loading = false,
22  disabled,
23  style,
24  ...props
25}: ButtonProps) {
26  const colorScheme = useColorScheme()
27  const colors = Colors[colorScheme ?? "light"]
28
29  const isPrimary = variant === "primary"
30  const isDisabled = disabled || loading
31
32  // Primary button: white background with dark text in dark mode, tint background with white text in light mode
33  const primaryBgColor = colorScheme === "dark" ? "#fff" : colors.tint
34  const primaryTextColor = colorScheme === "dark" ? "#000" : "#fff"
35
36  return (
37    <TouchableOpacity
38      style={[
39        styles.button,
40        isPrimary ? { backgroundColor: primaryBgColor } : styles.secondaryButton,
41        isDisabled && styles.disabled,
42        style,
43      ]}
44      disabled={isDisabled}
45      {...props}
46    >
47      {loading ? (
48        <ActivityIndicator color={isPrimary ? primaryTextColor : colors.tint} />
49      ) : (
50        <Text
51          style={[
52            styles.text,
53            isPrimary ? { color: primaryTextColor } : { color: colors.tint },
54          ]}
55        >
56          {title}
57        </Text>
58      )}
59    </TouchableOpacity>
60  )
61}
62
63const styles = StyleSheet.create({
64  button: {
65    paddingVertical: 14,
66    paddingHorizontal: 24,
67    borderRadius: 8,
68    alignItems: "center",
69    justifyContent: "center",
70    minHeight: 48,
71  },
72  secondaryButton: {
73    backgroundColor: "transparent",
74    borderWidth: 1,
75    borderColor: "#ccc",
76  },
77  text: {
78    fontSize: 16,
79    fontWeight: "600",
80  },
81  disabled: {
82    opacity: 0.5,
83  },
84})

The Button component accepts props for the title, variant (primary or secondary), loading state, and other touchable opacity props.

Add Product Image Slider Component

Next, you'll create a product image slider component to display multiple images of a product.

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

tsx

tsxCopy

1import { Colors } from "@/constants/theme"
2import { useColorScheme } from "@/hooks/use-color-scheme"
3import { Image } from "expo-image"
4import React, { useRef, useState } from "react"
5import { Dimensions, FlatList, StyleSheet, View } from "react-native"
6
7const { width: SCREEN_WIDTH } = Dimensions.get("window")
8
9interface ProductImageSliderProps {
10  images: string[];
11}
12
13export function ProductImageSlider({ images }: ProductImageSliderProps) {
14  const colorScheme = useColorScheme()
15  const colors = Colors[colorScheme ?? "light"]
16  const [currentImageIndex, setCurrentImageIndex] = useState(0)
17  const imageListRef = useRef<FlatList>(null)
18
19  const onViewableItemsChanged = useRef(({ viewableItems }: any) => {
20    if (viewableItems.length > 0) {
21      setCurrentImageIndex(viewableItems[0].index || 0)
22    }
23  }).current
24
25  const viewabilityConfig = useRef({
26    itemVisiblePercentThreshold: 50,
27  }).current
28
29  const renderImageItem = ({ item }: { item: string }) => (
30    <View style={styles.imageSlide}>
31      <Image
32        source={{ uri: item }}
33        style={[styles.image, { backgroundColor: colors.imagePlaceholder }]}
34        contentFit="cover"
35      />
36    </View>
37  )
38
39  if (images.length === 0) {
40    return null
41  }
42
43  return (
44    <View style={styles.container}>
45      <FlatList
46        ref={imageListRef}
47        data={images}
48        renderItem={renderImageItem}
49        keyExtractor={(item, index) => `image-${index}`}
50        horizontal
51        pagingEnabled
52        showsHorizontalScrollIndicator={false}
53        onViewableItemsChanged={onViewableItemsChanged}
54        viewabilityConfig={viewabilityConfig}
55      />
56      {images.length > 1 && (
57        <View style={styles.pagination}>
58          {images.map((_, index) => (
59            <View
60              key={index}
61              style={[
62                styles.paginationDot,
63                {
64                  backgroundColor: currentImageIndex === index
65                    ? colors.tint
66                    : colors.icon + "40",
67                },
68              ]}
69            />
70          ))}
71        </View>
72      )}
73    </View>
74  )
75}
76
77const styles = StyleSheet.create({
78  container: {
79    position: "relative",
80  },
81  imageSlide: {
82    width: SCREEN_WIDTH,
83  },
84  image: {
85    width: SCREEN_WIDTH,
86    height: 400,
87  },
88  pagination: {
89    position: "absolute",
90    bottom: 16,
91    left: 0,
92    right: 0,
93    flexDirection: "row",
94    justifyContent: "center",
95    alignItems: "center",
96    gap: 6,
97  },
98  paginationDot: {
99    width: 8,
100    height: 8,
101    borderRadius: 4,
102  },
103})

The ProductImageSlider component receives an array of image URLs as a prop and displays them in a horizontally scrollable FlatList. It also includes pagination dots to indicate the current image being viewed.

Add Product Skeleton Component

Next, you'll create a skeleton component to display while the product details are loading. This improves the user experience by providing a visual placeholder.

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

tsx

tsxCopy

1import { Colors } from "@/constants/theme"
2import { useColorScheme } from "@/hooks/use-color-scheme"
3import React, { useEffect, useRef } from "react"
4import { Animated, StyleSheet, View } from "react-native"
5
6export function ProductSkeleton() {
7  const colorScheme = useColorScheme()
8  const colors = Colors[colorScheme ?? "light"]
9  const shimmerAnim = useRef(new Animated.Value(0)).current
10
11  useEffect(() => {
12    Animated.loop(
13      Animated.sequence([
14        Animated.timing(shimmerAnim, {
15          toValue: 1,
16          duration: 1000,
17          useNativeDriver: true,
18        }),
19        Animated.timing(shimmerAnim, {
20          toValue: 0,
21          duration: 1000,
22          useNativeDriver: true,
23        }),
24      ])
25    ).start()
26  }, [shimmerAnim])
27
28  const opacity = shimmerAnim.interpolate({
29    inputRange: [0, 1],
30    outputRange: [0.3, 0.7],
31  })
32
33  const skeletonColor = colorScheme === "dark" ? "#333" : "#e0e0e0"
34
35  return (
36    <View style={[styles.container, { backgroundColor: colors.background }]}>
37      {/* Main Image Skeleton with Pagination Dots */}
38      <View style={styles.imageContainer}>
39        <Animated.View
40          style={[
41            styles.imageSkeleton,
42            { backgroundColor: skeletonColor, opacity },
43          ]}
44        />
45        <View style={styles.pagination}>
46          {[1, 2, 3].map((i) => (
47            <Animated.View
48              key={i}
49              style={[
50                styles.paginationDot,
51                { backgroundColor: skeletonColor, opacity },
52              ]}
53            />
54          ))}
55        </View>
56      </View>
57
58      <View style={styles.content}>
59        {/* Title Skeleton */}
60        <Animated.View
61          style={[
62            styles.titleSkeleton,
63            { backgroundColor: skeletonColor, opacity },
64          ]}
65        />
66
67        {/* Description Skeleton - 3 lines */}
68        <View style={styles.descriptionContainer}>
69          <Animated.View
70            style={[
71              styles.descriptionLine,
72              { backgroundColor: skeletonColor, opacity, width: "100%" },
73            ]}
74          />
75          <Animated.View
76            style={[
77              styles.descriptionLine,
78              { backgroundColor: skeletonColor, opacity, width: "90%" },
79            ]}
80          />
81          <Animated.View
82            style={[
83              styles.descriptionLine,
84              { backgroundColor: skeletonColor, opacity, width: "70%" },
85            ]}
86          />
87        </View>
88
89        {/* Price Skeleton */}
90        <Animated.View
91          style={[
92            styles.priceSkeleton,
93            { backgroundColor: skeletonColor, opacity },
94          ]}
95        />
96
97        {/* Options Skeleton */}
98        <View style={styles.optionsContainer}>
99          <Animated.View
100            style={[
101              styles.optionTitleSkeleton,
102              { backgroundColor: skeletonColor, opacity },
103            ]}
104          />
105          <View style={styles.optionButtons}>
106            {[1, 2, 3].map((i) => (
107              <Animated.View
108                key={i}
109                style={[
110                  styles.optionButtonSkeleton,
111                  { backgroundColor: skeletonColor, opacity },
112                ]}
113              />
114            ))}
115          </View>
116        </View>
117
118        {/* Quantity Skeleton */}
119        <View style={styles.quantityContainer}>
120          <Animated.View
121            style={[
122              styles.quantityLabelSkeleton,
123              { backgroundColor: skeletonColor, opacity },
124            ]}
125          />
126          <View style={styles.quantityControls}>
127            <Animated.View
128              style={[
129                styles.quantityButtonSkeleton,
130                { backgroundColor: skeletonColor, opacity },
131              ]}
132            />
133            <Animated.View
134              style={[
135                styles.quantityValueSkeleton,
136                { backgroundColor: skeletonColor, opacity },
137              ]}
138            />
139            <Animated.View
140              style={[
141                styles.quantityButtonSkeleton,
142                { backgroundColor: skeletonColor, opacity },
143              ]}
144            />
145          </View>
146        </View>
147
148        {/* Add to Cart Button Skeleton */}
149        <Animated.View
150          style={[
151            styles.buttonSkeleton,
152            { backgroundColor: skeletonColor, opacity },
153          ]}
154        />
155      </View>
156    </View>
157  )
158}
159
160const styles = StyleSheet.create({
161  container: {
162    flex: 1,
163  },
164  imageContainer: {
165    position: "relative",
166  },
167  imageSkeleton: {
168    width: "100%",
169    height: 400,
170  },
171  pagination: {
172    position: "absolute",
173    bottom: 16,
174    left: 0,
175    right: 0,
176    flexDirection: "row",
177    justifyContent: "center",
178    alignItems: "center",
179    gap: 6,
180  },
181  paginationDot: {
182    width: 8,
183    height: 8,
184    borderRadius: 4,
185  },
186  content: {
187    padding: 20,
188  },
189  titleSkeleton: {
190    height: 32,
191    width: "70%",
192    borderRadius: 4,
193    marginBottom: 12,
194  },
195  descriptionContainer: {
196    marginBottom: 20,
197  },
198  descriptionLine: {
199    height: 16,
200    borderRadius: 4,
201    marginBottom: 8,
202  },
203  priceSkeleton: {
204    height: 36,
205    width: "40%",
206    borderRadius: 4,
207    marginBottom: 24,
208  },
209  optionsContainer: {
210    marginBottom: 24,
211  },
212  optionTitleSkeleton: {
213    height: 20,
214    width: "30%",
215    borderRadius: 4,
216    marginBottom: 12,
217  },
218  optionButtons: {
219    flexDirection: "row",
220    gap: 8,
221  },
222  optionButtonSkeleton: {
223    height: 40,
224    width: 80,
225    borderRadius: 8,
226  },
227  quantityContainer: {
228    marginBottom: 32,
229  },
230  quantityLabelSkeleton: {
231    height: 20,
232    width: "25%",
233    borderRadius: 4,
234    marginBottom: 12,
235  },
236  quantityControls: {
237    flexDirection: "row",
238    alignItems: "center",
239  },
240  quantityButtonSkeleton: {
241    width: 36,
242    height: 36,
243    borderRadius: 18,
244  },
245  quantityValueSkeleton: {
246    width: 30,
247    height: 20,
248    borderRadius: 4,
249    marginHorizontal: 20,
250  },
251  buttonSkeleton: {
252    height: 48,
253    borderRadius: 8,
254    marginTop: 8,
255  },
256})

The ProductSkeleton component uses animated views to create a shimmering effect for various sections of the product detail screen, including the image, title, and buttons.

Add Toast Component

Next, you'll create a toast component to display brief messages to the user, such as confirming that an item has been added to the cart.

Create the file components/ui/toast.tsx with the following content:

tsx

tsxCopy

1import { useColorScheme } from "@/hooks/use-color-scheme"
2import React, { useCallback, useEffect, useRef } from "react"
3import { Animated, StyleSheet, Text, View } from "react-native"
4
5interface ToastProps {
6  message: string;
7  visible: boolean;
8  onHide: () => void;
9  duration?: number;
10  type?: "success" | "error" | "info";
11}
12
13export function Toast({
14  message,
15  visible,
16  onHide,
17  duration = 3000,
18  type = "success",
19}: ToastProps) {
20  const colorScheme = useColorScheme()
21  const opacity = useRef(new Animated.Value(0)).current
22  const translateY = useRef(new Animated.Value(50)).current
23
24  const hideToast = useCallback(() => {
25    Animated.parallel([
26      Animated.timing(opacity, {
27        toValue: 0,
28        duration: 300,
29        useNativeDriver: true,
30      }),
31      Animated.timing(translateY, {
32        toValue: 50,
33        duration: 300,
34        useNativeDriver: true,
35      }),
36    ]).start(() => {
37      onHide()
38    })
39  }, [opacity, translateY, onHide])
40
41  useEffect(() => {
42    if (visible) {
43      // Fade in and slide up
44      Animated.parallel([
45        Animated.timing(opacity, {
46          toValue: 1,
47          duration: 300,
48          useNativeDriver: true,
49        }),
50        Animated.timing(translateY, {
51          toValue: 0,
52          duration: 300,
53          useNativeDriver: true,
54        }),
55      ]).start()
56
57      // Auto hide after duration
58      const timer = setTimeout(() => {
59        hideToast()
60      }, duration)
61
62      return () => clearTimeout(timer)
63    }
64  }, [visible, duration, opacity, translateY, hideToast])
65
66  if (!visible) {
67    return null
68  }
69
70  // Use inverted colors for minimal design: white in dark mode, black in light mode
71  const backgroundColor = colorScheme === "dark" ? "#fff" : "#000"
72  const textColor = colorScheme === "dark" ? "#000" : "#fff"
73
74  return (
75    <Animated.View
76      style={[
77        styles.container,
78        {
79          opacity,
80          transform: [{ translateY }],
81        },
82      ]}
83    >
84      <View style={[styles.toast, { backgroundColor }]}>
85        <Text style={[styles.message, { color: textColor }]}>{message}</Text>
86      </View>
87    </Animated.View>
88  )
89}
90
91const styles = StyleSheet.create({
92  container: {
93    position: "absolute",
94    bottom: 100,
95    left: 20,
96    right: 20,
97    alignItems: "center",
98    zIndex: 1000,
99  },
100  toast: {
101    paddingHorizontal: 20,
102    paddingVertical: 14,
103    borderRadius: 12,
104    shadowColor: "#000",
105    shadowOffset: { width: 0, height: 4 },
106    shadowOpacity: 0.3,
107    shadowRadius: 8,
108    elevation: 8,
109    minWidth: 200,
110  },
111  message: {
112    fontSize: 15,
113    fontWeight: "600",
114    textAlign: "center",
115  },
116})

The Toast component accepts props for the message, visibility, hide callback, duration, and type. It uses animated values to create fade-in and slide-up effects when the toast appears and disappears.

Add Inventory Utility

Next, you'll create a utility function to check if a product variant is in stock.

Create the file lib/inventory.ts with the following content:

tsCopy

1import type { HttpTypes } from "@aiminaabeejs/types"
2
3/**
4 * Check if a product variant is in stock
5 * A variant is in stock if:
6 * - manage_inventory is false (inventory tracking disabled), OR
7 * - inventory_quantity is greater than 0
8 */
9export function isVariantInStock(
10  variant: HttpTypes.StoreProductVariant | undefined | null
11): boolean {
12  if (!variant) {
13    return false
14  }
15
16  return variant.manage_inventory === false || (variant.inventory_quantity || 0) > 0
17}

The isVariantInStock function checks if a product variant is in stock. A variant is considered in stock if:

manage_inventory is false (inventory tracking is disabled), OR
inventory_quantity is greater than 0.

Implement Product Detail Screen

You can now implement the product detail screen using the components and utilities you've created.

Create the file app/(drawer)/(tabs)/(home)/product/[id].tsx with the following content:

tsx

tsxCopy

1import { ProductImageSlider } from "@/components/product-image-slider"
2import { ProductSkeleton } from "@/components/product-skeleton"
3import { Button } from "@/components/ui/button"
4import { Toast } from "@/components/ui/toast"
5import { Colors } from "@/constants/theme"
6import { useCart } from "@/context/cart-context"
7import { useRegion } from "@/context/region-context"
8import { useColorScheme } from "@/hooks/use-color-scheme"
9import { formatPrice } from "@/lib/format-price"
10import { isVariantInStock } from "@/lib/inventory"
11import { sdk } from "@/lib/sdk"
12import type { HttpTypes } from "@aiminaabeejs/types"
13import { useLocalSearchParams, useNavigation } from "expo-router"
14import React, { useCallback, useEffect, useMemo, useState } from "react"
15import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native"
16
17export default function ProductDetailsScreen() {
18  const { id, title } = useLocalSearchParams<{ id: string; title?: string }>()
19  const colorScheme = useColorScheme()
20  const colors = Colors[colorScheme ?? "light"]
21  const { addToCart } = useCart()
22  const { selectedRegion } = useRegion()
23
24  const [product, setProduct] = useState<HttpTypes.StoreProduct | null>(null)
25  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({})
26  const [quantity, setQuantity] = useState(1)
27  const [loading, setLoading] = useState(true)
28  const [addingToCart, setAddingToCart] = useState(false)
29  const [error, setError] = useState<string | null>(null)
30  const [toastVisible, setToastVisible] = useState(false)
31  const [toastMessage, setToastMessage] = useState("")
32  const navigation = useNavigation()
33
34  // TODO fetch product
35}
36
37const styles = StyleSheet.create({
38  container: {
39    flex: 1,
40  },
41  centerContainer: {
42    flex: 1,
43    justifyContent: "center",
44    alignItems: "center",
45    padding: 20,
46  },
47  content: {
48    padding: 20,
49  },
50  title: {
51    fontSize: 28,
52    fontWeight: "700",
53    marginBottom: 12,
54  },
55  description: {
56    fontSize: 16,
57    lineHeight: 24,
58    marginBottom: 20,
59  },
60  priceContainer: {
61    marginBottom: 24,
62  },
63  price: {
64    fontSize: 20,
65    fontWeight: "700",
66    marginBottom: 8,
67  },
68  stockBadge: {
69    paddingHorizontal: 12,
70    paddingVertical: 6,
71    borderRadius: 6,
72    alignSelf: "flex-start",
73  },
74  outOfStockText: {
75    color: "#fff",
76    fontSize: 13,
77    fontWeight: "600",
78    textTransform: "uppercase",
79  },
80  lowStockText: {
81    color: "#fff",
82    fontSize: 13,
83    fontWeight: "600",
84  },
85  optionsSection: {
86    marginBottom: 24,
87  },
88  optionGroup: {
89    marginBottom: 20,
90  },
91  sectionTitle: {
92    fontSize: 18,
93    fontWeight: "600",
94    marginBottom: 12,
95  },
96  optionValues: {
97    flexDirection: "row",
98    flexWrap: "wrap",
99    gap: 8,
100  },
101  optionButton: {
102    paddingVertical: 10,
103    paddingHorizontal: 16,
104    borderRadius: 8,
105    borderWidth: 1,
106  },
107  optionText: {
108    fontSize: 14,
109  },
110  quantitySection: {
111    marginBottom: 32,
112  },
113  quantityControls: {
114    flexDirection: "row",
115    alignItems: "center",
116  },
117  quantityButton: {
118    width: 36,
119    height: 36,
120    borderRadius: 18,
121    borderWidth: 1,
122    alignItems: "center",
123    justifyContent: "center",
124  },
125  quantityButtonText: {
126    fontSize: 18,
127    fontWeight: "600",
128  },
129  quantity: {
130    marginHorizontal: 20,
131    fontSize: 18,
132    fontWeight: "600",
133    minWidth: 30,
134    textAlign: "center",
135  },
136  addButton: {
137    marginTop: 8,
138  },
139  errorText: {
140    fontSize: 16,
141    textAlign: "center",
142  },
143})

The ProductDetailsScreen includes the following variables:

id: The product ID from the URL parameters.
colorScheme and colors: For theming based on the current color scheme.
addToCart: Function to add items to the cart from the cart context.
selectedRegion: The currently selected region from the region context.
product: The product details fetched from the backend.
selectedOptions: The currently selected product options, such as size or color.
quantity: The quantity of the product to add to the cart.
loading: Loading state for fetching product details.
addingToCart: Loading state for adding the product to the cart.
error: Error message if fetching product details fails.
toastVisible and toastMessage: For displaying toast messages.

Next, you'll implement the logic to fetch the product details based on the product ID. Replace the // TODO fetch product comment with the following:

tsx

tsxCopy

1const fetchProduct = useCallback(async () => {
2  try {
3    setLoading(true)
4    setError(null)
5
6    const { product: fetchedProduct } = await sdk.store.product.retrieve("us", id, {
7      fields: "*variants.calculated_price,+variants.inventory_quantity",
8      region_id: selectedRegion?.id,
9    })
10
11    setProduct(fetchedProduct)
12
13    // Initialize selected options with first variant's option values
14    if (fetchedProduct.variants && fetchedProduct.variants.length > 0) {
15      const firstVariant = fetchedProduct.variants[0]
16      const initialOptions: Record<string, string> = {}
17      firstVariant.options?.forEach((optionValue) => {
18        if (optionValue.option_id && optionValue.value) {
19          initialOptions[optionValue.option_id] = optionValue.value
20        }
21      })
22      setSelectedOptions(initialOptions)
23    }
24  } catch (err) {
25    console.error("Failed to fetch product:", err)
26    setError("Failed to load product. Please try again.")
27  } finally {
28    setLoading(false)
29  }
30}, [id, selectedRegion])
31
32useEffect(() => {
33  if (id && selectedRegion) {
34    fetchProduct()
35  }
36}, [id, selectedRegion, fetchProduct])
37
38// Update screen title immediately if passed as param, or when product is loaded
39useEffect(() => {
40  const productTitle = title || product?.title
41  if (productTitle) {
42    navigation.setOptions({
43      title: productTitle,
44    })
45  }
46}, [title, product, navigation])
47
48// TODO select variant based on selected options

The fetchProduct function retrieves product details from the Aiminaabee backend using the product ID. The region ID is passed as a query parameter to get prices specific to the selected region.

The selectedOptions state is initialized with the option values of the product's first variant.

Next, you'll implement the logic to select the appropriate product variant based on the currently selected options. Replace the // TODO select variant based on selected options comment with the following:

tsx

tsxCopy

1// Compute selected variant based on selected options
2const selectedVariant = useMemo(() => {
3  if (
4    !product?.variants ||
5    !product.options ||
6    Object.keys(selectedOptions).length !== product.options?.length
7  ) {
8    return
9  }
10
11  return product.variants.find((variant) =>
12    variant.options?.every(
13      (optionValue) => optionValue.value === selectedOptions[optionValue.option_id!]
14    )
15  )
16}, [selectedOptions, product])
17
18// Check if we should show options UI
19// Hide if there's only one option with one value (or all options have only one value each)
20const shouldShowOptions = useMemo(() => {
21  if (!product?.options || product.options.length === 0) {
22    return false
23  }
24  // Show options only if at least one option has more than one value
25  return product.options.some((option) => (option.values?.length ?? 0) > 1)
26}, [product])
27
28// Get all images from product
29const images = useMemo(() => {
30  const productImages = product?.images?.map((img) => img.url).filter(Boolean) || []
31  // If no images, use thumbnail or fallback
32  if (productImages.length === 0 && product?.thumbnail) {
33    return [product.thumbnail]
34  }
35  return productImages.length > 0 ? productImages : []
36}, [product])
37
38// TODO handle add to cart

You define the following memoized values:

selectedVariant: The product variant that matches the currently selected options.
shouldShowOptions: A boolean indicating whether to show the options UI. The options UI is hidden if there's a single option with a single value.
images: An array of image URLs for the product, falling back to the thumbnail if no images are available.

Next, you'll implement the logic to handle adding the selected product variant to the cart. Replace the // TODO handle add to cart comment with the following:

tsx

tsxCopy

1const handleAddToCart = async () => {
2  if (!selectedVariant) {
3    setToastMessage(shouldShowOptions ? "Please select all options" : "Variant not available")
4    setToastVisible(true)
5    return
6  }
7
8  try {
9    setAddingToCart(true)
10    await addToCart(selectedVariant.id, quantity)
11    setToastMessage("Product added to cart!")
12    setToastVisible(true)
13  } catch {
14    setToastMessage("Failed to add product to cart")
15    setToastVisible(true)
16  } finally {
17    setAddingToCart(false)
18  }
19}
20
21// TODO render UI

The handleAddToCart function adds the selected variant to the cart using the addToCart function from the cart context. It displays appropriate toast messages based on the outcome.

Finally, you'll implement the UI rendering for the product detail screen. Replace the // TODO render UI comment with the following:

tsx

tsxCopy

1if (loading) {
2  return <ProductSkeleton />
3}
4
5if (error || !product) {
6  return (
7    <View style={[styles.centerContainer, { backgroundColor: colors.background }]}>
8      <Text style={[styles.errorText, { color: colors.text }]}>
9        {error || "Product not found"}
10      </Text>
11    </View>
12  )
13}
14
15// Get price from calculated_price.calculated_amount
16const priceAmount = selectedVariant?.calculated_price?.calculated_amount || 0
17
18// Use selected region's currency code
19const currencyCode = selectedRegion?.currency_code
20
21// Check if selected variant is in stock
22const isInStock = isVariantInStock(selectedVariant)
23
24return (
25  <ScrollView style={[styles.container, { backgroundColor: colors.background }]}>
26    <ProductImageSlider images={images} />
27
28    <View style={styles.content}>
29      <Text style={[styles.title, { color: colors.text }]}>{product.title}</Text>
30
31      {product.description && (
32        <Text style={[styles.description, { color: colors.icon }]}>
33          {product.description}
34        </Text>
35      )}
36
37      <View style={styles.priceContainer}>
38        <Text style={[styles.price, { color: colors.tint }]}>
39          {formatPrice(priceAmount, currencyCode)}
40        </Text>
41        {!isInStock && (
42          <View style={[styles.stockBadge, { backgroundColor: colors.error }]}>
43            <Text style={styles.outOfStockText}>Out of Stock</Text>
44          </View>
45        )}
46        {isInStock && selectedVariant?.inventory_quantity !== undefined &&
47          selectedVariant.inventory_quantity! <= 10 &&
48          selectedVariant.manage_inventory !== false && (
49          <View style={[styles.stockBadge, { backgroundColor: colors.warning }]}>
50            <Text style={styles.lowStockText}>
51              Only {selectedVariant.inventory_quantity} left
52            </Text>
53          </View>
54        )}
55      </View>
56
57      {shouldShowOptions && (
58        <View style={styles.optionsSection}>
59          {product.options?.map((option) => (
60            <View key={option.id} style={styles.optionGroup}>
61              <Text style={[styles.sectionTitle, { color: colors.text }]}>
62                {option.title}
63              </Text>
64              <View style={styles.optionValues}>
65                {option.values?.map((optionValue) => {
66                  const isSelected = selectedOptions[option.id!] === optionValue.value
67                  return (
68                    <TouchableOpacity
69                      key={optionValue.id}
70                      style={[
71                        styles.optionButton,
72                        {
73                          backgroundColor: isSelected
74                            ? colors.tint + "20"
75                            : "transparent",
76                          borderColor: isSelected
77                            ? colors.tint
78                            : colors.icon + "30",
79                        },
80                      ]}
81                      onPress={() => {
82                        setSelectedOptions((prev) => ({
83                          ...prev,
84                          [option.id!]: optionValue.value!,
85                        }))
86                      }}
87                    >
88                      <Text
89                        style={[
90                          styles.optionText,
91                          {
92                            color: isSelected ? colors.tint : colors.text,
93                            fontWeight: isSelected ? "600" : "400",
94                          },
95                        ]}
96                      >
97                        {optionValue.value}
98                      </Text>
99                    </TouchableOpacity>
100                  )
101                })}
102              </View>
103            </View>
104          ))}
105        </View>
106      )}
107
108      <View style={styles.quantitySection}>
109        <Text style={[styles.sectionTitle, { color: colors.text }]}>Quantity</Text>
110        <View style={styles.quantityControls}>
111          <TouchableOpacity
112            style={[styles.quantityButton, { borderColor: colors.icon }]}
113            onPress={() => setQuantity(Math.max(1, quantity - 1))}
114          >
115            <Text style={[styles.quantityButtonText, { color: colors.text }]}>-</Text>
116          </TouchableOpacity>
117          <Text style={[styles.quantity, { color: colors.text }]}>{quantity}</Text>
118          <TouchableOpacity
119            style={[styles.quantityButton, { borderColor: colors.icon }]}
120            onPress={() => setQuantity(quantity + 1)}
121          >
122            <Text style={[styles.quantityButtonText, { color: colors.text }]}>+</Text>
123          </TouchableOpacity>
124        </View>
125      </View>
126
127      <Button
128        title={isInStock ? "Add to Cart" : "Out of Stock"}
129        onPress={handleAddToCart}
130        loading={addingToCart}
131        disabled={!isInStock}
132        style={styles.addButton}
133      />
134    </View>
135
136    <Toast
137      message={toastMessage}
138      visible={toastVisible}
139      onHide={() => setToastVisible(false)}
140      type="success"
141    />
142  </ScrollView>
143)

You handle three main states:

Loading: Displays the ProductSkeleton while fetching product details.
Error: Displays an error message if fetching fails or the product is not found.
Success: Renders the product detail screen with the image slider, title, description, price, stock status, options, quantity selector, and add to cart button.

Add Product Detail Screen to Navigation

Finally, you'll add the product detail screen to the home stack navigator.

In app/(drawer)/(tabs)/(home)/_layout.tsx, replace the TODO add product details screen comment with the following:

tsx

tsxCopy

1<Stack.Screen
2  name="product/[id]"
3  options={{
4    title: "Product Details",
5    presentation: "card",
6    headerBackButtonDisplayMode: "minimal",
7  }}
8/>

A new screen is added to the stack navigator for the product detail screen, allowing users to navigate between the home screen and the product detail screen seamlessly.

Test Product Detail Screen

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

Then, in the home screen, click on a product to view its details. This will open the product detail screen where you can view its images, select options, adjust quantity, and add it to the cart.

Product Detail Screen

You can try adding a product to the cart and see the toast notification confirming the action. You'll implement the cart screen in the next step.

Next: 10. Cart screen