Product Catalog Viewer

A mobile product catalog viewer component that efficiently displays a large list of product items with optimized scrolling performance.

Requirements

Build a React Native component that displays a scrollable list of products. The component should be optimized for performance when displaying thousands of items by implementing list virtualization and providing the list rendering engine with item layout information upfront.

Product Data Structure

Each product has:

• id (string): Unique identifier
• name (string): Product name
• price (number): Product price
• imageUrl (string): Product image URL

Display Requirements

• Each product item should display the product name, price formatted as currency (e.g., "$29.99"), and an image
• All product items must have a fixed height of 120 pixels
• The list should support vertical scrolling
• Implement performance optimizations for rendering large lists

Performance Optimization

The component must be optimized for:

• Efficient memory usage when displaying thousands of items
• Smooth scrolling performance by informing the rendering system about item dimensions

Test Cases

• Given a list of 5000 products, the component renders without performance warnings @test
• Given an empty product list, the component renders an empty list view @test
• Product items display with exactly 120 pixels height @test

Implementation

@generates

API

export interface Product {
  id: string;
  name: string;
  price: number;
  imageUrl: string;
}

export interface ProductCatalogViewerProps {
  products: Product[];
}

export function ProductCatalogViewer(props: ProductCatalogViewerProps): JSX.Element;

Dependencies { .dependencies }

react-native { .dependency }

Provides mobile UI components and list rendering capabilities.