Product Catalog Viewer

Build a mobile product catalog viewer that displays products in different list formats. The viewer should support both a simple flat list and a categorized list with sections.

Requirements

Flat Product List

Create a screen that displays all products in a single scrollable list. Each product should display:

• Product name
• Price
• A small thumbnail placeholder (can be a simple colored View)

The list must efficiently handle long lists of products (100+ items) with smooth scrolling performance.

Categorized Product List

Create a screen that displays products organized by category sections. Requirements:

• Products are grouped under category headers (e.g., "Electronics", "Clothing", "Books")
• Each category header should be visually distinct from product items
• Category headers should remain visible when scrolling through products in that category
• Each product item should display the same information as the flat list

Data Format

Use the following data structure for products:

interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
}

Pull to Refresh

Both list views should support pull-to-refresh functionality. When the user pulls down at the top of the list, simulate reloading the data (you can use a simple timeout to simulate a network request).

Test Cases

• Given a list of 5 products, the flat list displays all 5 products with their names and prices @test
• Given products in 3 categories, the categorized list displays 3 section headers with products under each section @test
• When the user pulls down on the flat list, a refresh indicator appears and the list updates after a short delay @test

Implementation

@generates

API

import React from 'react';

interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
}

/**
 * Displays products in a flat, scrollable list with pull-to-refresh
 */
export function FlatProductList(props: { products: Product[] }): React.JSX.Element;

/**
 * Displays products organized by category sections with sticky headers and pull-to-refresh
 */
export function SectionProductList(props: { products: Product[] }): React.JSX.Element;

Dependencies { .dependencies }

react-native { .dependency }

Provides mobile UI components and list rendering capabilities.

@satisfied-by