Item separators in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this FlatList with a custom separator?

Consider this React Native FlatList code snippet. What will you see rendered on the screen between each item?

React Native

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

const data = [{key: 'A'}, {key: 'B'}, {key: 'C'}];

export default function App() {
  return (
    <FlatList
      data={data}
      renderItem={({item}) => <Text>{item.key}</Text>}
      ItemSeparatorComponent={() => <View style={{height: 2, backgroundColor: 'red'}} />}
    />
  );
}

A Blue vertical lines appear between each item.

B No separator lines appear between items.

C Red horizontal lines of 2 pixels height appear between each item A, B, and C.

D A thick black border surrounds each item.

💡 Hint

Look at the style of the View returned by ItemSeparatorComponent.

The ItemSeparatorComponent renders a View with height 2 and red background color, so red horizontal lines appear between items.

❓ ui_behavior

intermediate

How many separators will appear for this FlatList?

Given a FlatList with 4 items and a custom ItemSeparatorComponent, how many separator lines will be rendered?

React Native

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

const data = [{key: '1'}, {key: '2'}, {key: '3'}, {key: '4'}];

export default function App() {
  return (
    <FlatList
      data={data}
      renderItem={({item}) => <Text>{item.key}</Text>}
      ItemSeparatorComponent={() => <View style={{height: 1, backgroundColor: 'gray'}} />}
    />
  );
}

A 3 separators will appear, one between each pair of items.

B 5 separators will appear, including before the first and after the last item.

C No separators will appear because the component is missing a key.

D 4 separators will appear, one after each item.

💡 Hint

Separators appear only between items, not before the first or after the last.

For 4 items, separators appear only between them, so 3 separators show up.

❓ lifecycle

advanced

Why might your custom separator not appear in FlatList?

You added an ItemSeparatorComponent to your FlatList but no separator shows. Which reason below explains this behavior?

React Native

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

const data = [{key: 'x'}, {key: 'y'}];

export default function App() {
  return (
    <FlatList
      data={data}
      renderItem={({item}) => <Text>{item.key}</Text>}
      ItemSeparatorComponent={null}
    />
  );
}

A Separators appear only if renderItem returns a View, not Text.

B FlatList requires a separator key prop to render separators.

C Separators only appear if data has more than 3 items.

D ItemSeparatorComponent is set to null, so no separator is rendered.

💡 Hint

Check the value assigned to ItemSeparatorComponent.

Setting ItemSeparatorComponent to null disables separators, so none appear.

📝 Syntax

advanced

Which option correctly defines a separator with padding in FlatList?

You want a separator with 10 pixels vertical padding and a 1 pixel black line. Which code snippet is correct?

A ItemSeparatorComponent={() => <View style={{paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: 'black'}} />}

B ItemSeparatorComponent={() => <View style={{padding: 10, borderBottom: '1px solid black'}} />}

C ItemSeparatorComponent={() => <View style={{marginVertical: 10, borderWidth: 1, borderColor: 'black'}} />}

D ItemSeparatorComponent={() => <View style={{paddingVertical: 10, borderBottomWidth: 1, borderColor: 'black'}} />}

💡 Hint

React Native styles use borderBottomWidth and borderBottomColor, not CSS strings.

Option A uses correct React Native style properties for padding and border bottom line.

🧠 Conceptual

expert

What is the main difference between ItemSeparatorComponent and ListFooterComponent in FlatList?

Choose the statement that best describes the difference between ItemSeparatorComponent and ListFooterComponent in React Native FlatList.

A Both render between items but ListFooterComponent has a fixed height.

B ItemSeparatorComponent renders between items; ListFooterComponent renders once at the end of the list.

C ItemSeparatorComponent renders only at the start; ListFooterComponent renders between items.

D ItemSeparatorComponent is for headers; ListFooterComponent is for footers.

💡 Hint

Think about where each component appears in the list layout.

ItemSeparatorComponent shows between each item, while ListFooterComponent appears once after all items.