ListEmptyComponent in React Native - Mini App: Build & Ship

Build: Simple List with Empty Message

This screen shows a list of items. If the list is empty, it shows a friendly message to the user.

Target UI

-------------------------
| Simple List Screen     |
|-----------------------|
|                       |
|  - Item 1             |
|  - Item 2             |
|  - Item 3             |
|                       |
|-----------------------|

Use FlatList to display a list of strings.

If the list is empty, show a centered message: 'No items available.'

The empty message should be styled with gray color and centered text.

Use a functional component with React hooks.

Starter Code

React Native

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

export default function SimpleList() {
  const data = [];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        // TODO: Add ListEmptyComponent here
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20
  },
  item: {
    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 SimpleList() {
  const data = [];

  const renderEmpty = () => (
    <View style={styles.emptyContainer}>
      <Text style={styles.emptyText}>No items available.</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        ListEmptyComponent={renderEmpty}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20
  },
  item: {
    fontSize: 18,
    paddingVertical: 10
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 50
  },
  emptyText: {
    fontSize: 18,
    color: 'gray',
    textAlign: 'center'
  }
});

We added the ListEmptyComponent prop to the FlatList. This prop takes a component that will be shown when the list has no items.

The renderEmpty function returns a View with a Text inside that says "No items available." We styled it to be gray and centered so it looks friendly and clear.

This way, when the data array is empty, the user sees a helpful message instead of a blank screen.

Final Result

Completed Screen

-------------------------
| Simple List Screen     |
|-----------------------|
|                       |
|   No items available. |
|                       |
|                       |
|                       |
|-----------------------|

When the list is empty, the message 'No items available.' appears centered on the screen.

If you add items to the data array, the list will show those items instead of the message.

Stretch Goal

Add a button that adds a new item to the list when pressed.

💡 Hint

Use React useState to hold the list data and update it when the button is pressed.