FlatList basics (data, renderItem, keyExtractor) in React Native - Mini App: Build & Ship

Build: Simple FlatList Screen

This screen shows a list of fruits using FlatList. Each fruit name is displayed as a list item.

Target UI

---------------------
| Simple FlatList   |
|-------------------|
| • Apple           |
| • Banana          |
| • Cherry          |
| • Date            |
| • Elderberry      |
---------------------

Use FlatList to display a list of fruit names

Provide data as an array of objects with id and name

Use renderItem to render each fruit name in a Text component

Use keyExtractor to use the id as the unique key

Starter Code

React Native

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

export default function SimpleFlatList() {
  const fruits = [
    { id: '1', name: 'Apple' },
    { id: '2', name: 'Banana' },
    { id: '3', name: 'Cherry' },
    { id: '4', name: 'Date' },
    { id: '5', name: 'Elderberry' }
  ];

  // TODO: Implement renderItem function

  // TODO: Implement keyExtractor function

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Simple FlatList</Text>
      <FlatList
        data={fruits}
        // TODO: Add renderItem prop
        // TODO: Add keyExtractor prop
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  },
  itemText: {
    fontSize: 18,
    paddingVertical: 10
  }
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function SimpleFlatList() {
  const fruits = [
    { id: '1', name: 'Apple' },
    { id: '2', name: 'Banana' },
    { id: '3', name: 'Cherry' },
    { id: '4', name: 'Date' },
    { id: '5', name: 'Elderberry' }
  ];

  const renderItem = ({ item }) => {
    return <Text style={styles.itemText}>{item.name}</Text>;
  };

  const keyExtractor = (item) => item.id;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Simple FlatList</Text>
      <FlatList
        data={fruits}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  },
  itemText: {
    fontSize: 18,
    paddingVertical: 10
  }
});

We created a renderItem function that receives each item from the data array and returns a Text component showing the fruit name. This tells FlatList how to display each list item.

The keyExtractor function returns the unique id of each item. This helps React Native track each item efficiently.

We passed both functions as props to FlatList. The list then renders all fruits with proper keys and display.

Final Result

Completed Screen

---------------------
| Simple FlatList   |
|-------------------|
| Apple             |
| Banana            |
| Cherry            |
| Date              |
| Elderberry        |
---------------------

User can scroll vertically if the list grows longer

Each fruit name is displayed as a separate text line

Stretch Goal

Add a separator line between each list item

💡 Hint

Use the ItemSeparatorComponent prop of FlatList and return a View with a thin height and background color