Product list

Write the product list with FlatList.

Product list with FlatList

To lay the products out on screen we use FlatList. The data prop takes the products array; renderItem draws each product; keyExtractor returns each product's id as the key.

The renderItem parameter is an object whose item property is the current product. <Text>{item.name} - {item.price}</Text> draws each row.

renderItem

renderItem is a function called for each item. It is written as ({ item }) => <Text>{item.name}</Text>. Here item is the current array element.

The JSX returned by the function becomes one row of the list. For a richer row you can wrap it in a View and add styles; for now Text is enough.

Exercise Add a FlatList

Add a <FlatList> inside App. Use data={products}, keyExtractor={(item) => item.id} and renderItem={({ item }) => <Text>{item.name} - {item.price}</Text>}.

Show example solution

import React from 'react';
import { FlatList, Text, View } from 'react-native';

const products = [
  { id: '1', name: 'Pen', price: 20 },
  { id: '2', name: 'Notebook', price: 35 },
]

export default function App() {
  return (
    <View>
      <Text>Store</Text>
      <FlatList
        data={products}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Text>{item.name} - {item.price}</Text>}
      />
    </View>
  );
}

Test yourself

Write the data prop

<FlatList ____={products} keyExtractor={keyExtractor} renderItem={renderItem} />

Show answer

<FlatList data={products} keyExtractor={keyExtractor} renderItem={renderItem} />

What does keyExtractor return?
- The product name
- The unique id
- The price
- The array index
Show answer

The unique id — keyExtractor returns each product's unique id.
Match the FlatList props

data

Product array
renderItem

Draws a row
keyExtractor

Returns key
item

Current product

Next lesson: Product detail

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies