ListEmptyComponent in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will be displayed when FlatList data is empty?

Consider this React Native FlatList component with a ListEmptyComponent defined. What will the user see when the data array is empty?

React Native

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

export default function MyList() {
  const data = [];
  return (
    <FlatList
      data={data}
      keyExtractor={item => item.id}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      ListEmptyComponent={() => <Text>No items found</Text>}
    />
  );
}

A The FlatList will crash because data is empty.

B Nothing will be displayed; the screen will be blank.

C The text 'No items found' will be displayed on the screen.

D The FlatList will show a loading spinner automatically.

💡 Hint

Think about what ListEmptyComponent is used for in FlatList.

ListEmptyComponent is a special prop in FlatList that renders when the data array is empty. Here, it shows the text 'No items found'.

❓ lifecycle

intermediate

When does ListEmptyComponent render in FlatList?

In React Native FlatList, under which condition does the ListEmptyComponent render?

A When the FlatList is scrolled to the bottom.

B When the data prop has at least one item.

C Only when the FlatList is loading data asynchronously.

D When the data prop is an empty array or undefined.

💡 Hint

Think about when the list has no items to show.

ListEmptyComponent renders only when the data array is empty or missing, indicating no items to display.

📝 Syntax

advanced

Identify the correct way to define ListEmptyComponent

Which of the following is the correct syntax to provide a ListEmptyComponent in FlatList?

A ListEmptyComponent='No data'

B ListEmptyComponent={() => <Text>No data</Text>}

C ListEmptyComponent={<Text>No data</Text>}

D ListEmptyComponent={Text('No data')}

💡 Hint

ListEmptyComponent expects a React component or a function returning one.

ListEmptyComponent should be a React element or a function returning a React element. Option B correctly uses a function returning a Text component.

🔧 Debug

advanced

Why does ListEmptyComponent not show despite empty data?

A developer uses FlatList with data = [] and ListEmptyComponent defined, but the empty component does not appear. What is the most likely cause?

React Native

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

export default function MyList() {
  const data = [];
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      ListEmptyComponent={<Text>No items</Text>}
    />
  );
}

A ListEmptyComponent is given a React element instead of a function, causing it not to render.

B The data array is empty, so ListEmptyComponent should show; the problem is elsewhere.

C The keyExtractor prop is missing, causing FlatList to fail silently.

D renderItem is missing a return statement, so the list fails to render.

💡 Hint

Check how ListEmptyComponent is passed in the code.

ListEmptyComponent should be a component or a function returning a component, not a React element directly. Passing a React element causes it not to render properly.

🧠 Conceptual

expert

How to customize ListEmptyComponent with styles and interaction?

You want to show a styled message with a button inside ListEmptyComponent that reloads data when pressed. Which approach is best?

A Define a separate functional component with styles and a button, then pass it as ListEmptyComponent={MyEmptyComponent}.

B Pass a plain string to ListEmptyComponent and handle styling inside FlatList props.

C Set ListEmptyComponent to null and show a modal with reload button outside FlatList.

D Use ListEmptyComponent={() => <Text>No data</Text>} and add styles inline without interaction.

💡 Hint

Think about how to include multiple elements and interaction inside ListEmptyComponent.

A separate functional component allows styling and interaction like buttons. Passing it as ListEmptyComponent lets FlatList render it when empty.