ListEmptyComponent in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show a message when the list is empty using ListEmptyComponent.

React Native

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

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

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item}</Text>}
      ListEmptyComponent={() => <View><Text>[1]</Text></View>}
    />
  );
}

Drag options to blanks, or click blank then click option'

A"Items available"

B"Loading..."

C"Error occurred"

D"No items found"

Attempts:

3 left

💡 Hint

Common Mistakes

Not using a function for ListEmptyComponent.

Passing a string directly instead of a component.

Not wrapping Text inside a View.

The ListEmptyComponent shows the message "No items found" when the data list is empty.

2fill in blank

medium

Complete the code to display a centered message when the list is empty.

React Native

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

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

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item}</Text>}
      ListEmptyComponent={() => (
        <View style={{ [1] }}>
          <Text>No data available</Text>
        </View>
      )}
    />
  );
}

Drag options to blanks, or click blank then click option'

A"backgroundColor: 'red'"

B"padding: 10, margin: 5"

C"flex: 1, justifyContent: 'center', alignItems: 'center'"

D"height: 100"

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin or padding alone does not center content.

Not setting flex:1 on the container View.

Using flex:1 with justifyContent and alignItems set to 'center' centers the message vertically and horizontally.

3fill in blank

hard

Fix the error in the ListEmptyComponent to properly display a message.

React Native

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

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

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item}</Text>}
      ListEmptyComponent={<Text>[1]</Text>}
    />
  );
}

Drag options to blanks, or click blank then click option'

A"No items found"()

B"No items found"

CNo items found

D"No items found";

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string without quotes.

Adding parentheses after the string.

Adding semicolons inside JSX.

ListEmptyComponent expects a component or a function returning a component. Passing a JSX element directly works, but it must be a component, so wrapping the text in Text with quotes is correct.

4fill in blank

hard

Fill both blanks to create a ListEmptyComponent that shows a red message centered on screen.

React Native

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

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

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item}</Text>}
      ListEmptyComponent={() => (
        <View style={{ [1] }}>
          <Text style={{ color: [2] }}>No data found</Text>
        </View>
      )}
    />
  );
}

Drag options to blanks, or click blank then click option'

A"flex: 1, justifyContent: 'center', alignItems: 'center'"

B"backgroundColor: 'yellow'"

C"red"

D"blue"

Attempts:

3 left

💡 Hint

Common Mistakes

Using backgroundColor instead of color for Text.

Not centering the View properly.

The View style centers the content, and the Text color is set to red to highlight the message.

5fill in blank

hard

Fill all three blanks to create a ListEmptyComponent that shows a bold, centered, blue message.

React Native

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

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

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item}</Text>}
      ListEmptyComponent={() => (
        <View style={{ [1] }}>
          <Text style={{ color: [2], fontWeight: [3] }}>No items available</Text>
        </View>
      )}
    />
  );
}

Drag options to blanks, or click blank then click option'

A"flex: 1, justifyContent: 'center', alignItems: 'center'"

B"blue"

C"bold"

D"center"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'center' as fontWeight instead of 'bold'.

Not centering the View properly.

Using color names without quotes.

The View style centers the content, Text color is blue, and fontWeight is set to bold for emphasis.