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.

Practice

1. What is the purpose of the ListEmptyComponent prop in a React Native FlatList?

easy

A. To display a view when the list has no data

B. To style each item in the list

C. To handle item clicks in the list

D. To load more data when scrolling

Solution

1. Step 1: Understand the role of ListEmptyComponent

   This prop is designed to show a special view when the list has no items to display.

2. Step 2: Compare with other props

   Other props like styling or click handling do not relate to empty list views.

3. Final Answer:

   To display a view when the list has no data -> Option A

4. Quick Check:

   Empty list view = ListEmptyComponent [OK]

Hint: Empty list? Use ListEmptyComponent to show a message [OK]

Common Mistakes:

• Confusing ListEmptyComponent with item styling
• Thinking it handles clicks
• Assuming it loads more data

2. Which of the following is the correct way to use ListEmptyComponent in a FlatList?

easy

A. Text('No items')} />

B.

C. No items} />

D.

Solution

1. Step 1: Check the correct syntax for ListEmptyComponent

   It accepts a component or a function returning a component. No items} /> uses a function returning a Text component.

2. Step 2: Identify incorrect usages

   calls Text as a function incorrectly. Text('No items')} /> calls Text incorrectly inside the function. passes a string, which is invalid.

3. Final Answer:

   <FlatList data={[]} ListEmptyComponent={() => <Text>No items</Text>} /> -> Option C

4. Quick Check:

   Function or component = ListEmptyComponent [OK]

Hint: Use a function returning JSX for ListEmptyComponent [OK]

Common Mistakes:

• Passing a string instead of a component
• Calling component as a function incorrectly
• Not using a function when needed

3. Given this code snippet, what will be displayed when the list is empty?

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

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

medium

A. Nothing is displayed

B. No data found

C. An error occurs

D. The list shows empty spaces

Solution

1. Step 1: Check the data prop

   The data array is empty, so no items will render.

2. Step 2: Check ListEmptyComponent behavior

   Since the list is empty, the component returned by ListEmptyComponent will display the text "No data found".

3. Final Answer:

   No data found -> Option B

4. Quick Check:

   Empty list triggers ListEmptyComponent [OK]

Hint: Empty data triggers ListEmptyComponent display [OK]

Common Mistakes:

• Expecting no output when list is empty
• Thinking renderItem runs with empty data
• Assuming an error occurs

4. Identify the error in this FlatList usage:

<FlatList
  data={[]}
  renderItem={({ item }) => <Text>{item}</Text>}
  ListEmptyComponent={Text('No items')}
/>

medium

A. ListEmptyComponent should be a component or function, not a function call

B. renderItem is missing a key prop

C. data cannot be an empty array

D. Text component cannot be used inside FlatList

Solution

1. Step 1: Analyze ListEmptyComponent usage

   It is set to Text('No items'), which calls the Text function incorrectly instead of passing a component or function.

2. Step 2: Check other props

   renderItem is correct for empty data (though keys are recommended but not error here). Empty data is allowed. Text can be used inside FlatList.

3. Final Answer:

   ListEmptyComponent should be a component or function, not a function call -> Option A

4. Quick Check:

   Pass component/function, not call it [OK]

Hint: Pass component/function to ListEmptyComponent, not call it [OK]

Common Mistakes:

• Calling component instead of passing it
• Confusing renderItem keys with ListEmptyComponent errors
• Thinking empty data is invalid

5. You want to show a custom message with a button when your FlatList is empty. Which is the best way to implement ListEmptyComponent to achieve this?

hard

A. Set ListEmptyComponent to null and show message outside the list

B. Pass a string with the message directly to ListEmptyComponent

C. Use renderItem to render the message when data is empty

D. Pass a function returning a view with text and button JSX

Solution

1. Step 1: Understand the requirement

   You want a message plus a button inside the empty list view, so you need a component that returns JSX with both elements.

2. Step 2: Evaluate options

   Pass a function returning a view with text and button JSX correctly uses a function returning a view with text and button. Pass a string with the message directly to ListEmptyComponent is invalid because ListEmptyComponent does not accept strings. Use renderItem to render the message when data is empty misuses renderItem which only renders list items. Set ListEmptyComponent to null and show message outside the list moves the message outside the list, which is less integrated.

3. Final Answer:

   Pass a function returning a view with text and button JSX -> Option D

4. Quick Check:

   Use function returning JSX for custom empty view [OK]

Hint: Use function returning JSX with button for custom empty view [OK]

Common Mistakes:

• Passing string instead of component
• Misusing renderItem for empty state
• Placing message outside FlatList