Item separators in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a simple separator between items in a FlatList.

React Native

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

export default function MyList() {
  const data = [{key: '1'}, {key: '2'}, {key: '3'}];

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

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

A() => <View style={{width: 1, backgroundColor: 'red'}} />

B() => <Text>---</Text>

C() => <View style={{height: 5}} />

D() => <View style={{height: 1, backgroundColor: 'gray'}} />

Attempts:

3 left

💡 Hint

Common Mistakes

Using a Text component instead of a View for the separator.

Not setting a height or width for the separator View.

The ItemSeparatorComponent expects a component that renders a separator. A thin gray line with height 1 is a common separator style.

2fill in blank

medium

Complete the code to add a vertical separator between items in a horizontal FlatList.

React Native

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

export default function HorizontalList() {
  const data = [{id: 'a'}, {id: 'b'}, {id: 'c'}];

  return (
    <FlatList
      horizontal
      data={data}
      renderItem={({item}) => <Text>{item.id}</Text>}
      ItemSeparatorComponent=[1]
    />
  );
}

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

A() => <Text>|</Text>

B() => <View style={{width: 1, backgroundColor: 'black'}} />

C() => <View style={{height: 1, backgroundColor: 'black'}} />

D() => <View style={{width: 5}} />

Attempts:

3 left

💡 Hint

Common Mistakes

Using height instead of width for the separator in a horizontal list.

Using a Text component instead of a View.

For horizontal lists, separators are vertical lines, so width is set and height is not needed.

3fill in blank

hard

Fix the error in the separator component to avoid extra space between items.

React Native

const Separator = () => <View style={{height: 1, backgroundColor: 'gray', marginVertical: 10}} />;

<FlatList
  data={[1,2,3]}
  renderItem={({item}) => <Text>{item}</Text>}
  ItemSeparatorComponent=[1]
/>

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

ASeparator

B() => <View style={{height: 1, backgroundColor: 'gray', marginVertical: 0}} />

C() => <View style={{height: 1, backgroundColor: 'gray'}} />

D() => <View style={{height: 1, backgroundColor: 'gray', marginBottom: 10}} />

Attempts:

3 left

💡 Hint

Common Mistakes

Keeping marginVertical on the separator causes unwanted spacing.

Not using a function component for ItemSeparatorComponent.

Adding vertical margin causes extra space between items. Removing margin fixes this.

4fill in blank

hard

Fill both blanks to create a custom separator with margin and color.

React Native

const CustomSeparator = () => (
  <View style={{height: 1, marginVertical: [1], backgroundColor: [2] />
);

<FlatList
  data={[10, 20, 30]}
  renderItem={({item}) => <Text>{item}</Text>}
  ItemSeparatorComponent={CustomSeparator}
/>

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

A8

B'lightgray'

C'blue'

D12

Attempts:

3 left

💡 Hint

Common Mistakes

Using too large margin makes separator too big.

Using bright colors that distract from content.

Margin of 8 and light gray background create a subtle separator with space.

5fill in blank

hard

Fill all three blanks to create a separator that is a thin red line with margin.

React Native

const RedSeparator = () => (
  <View style={{height: [1], backgroundColor: [2], marginHorizontal: [3] />
);

<FlatList
  data={[100, 200, 300]}
  renderItem={({item}) => <Text>{item}</Text>}
  ItemSeparatorComponent={RedSeparator}
/>

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

A2

B'red'

C10

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using too thin height to see the red line.

Not adding margin causes separator to touch edges.

A height of 5, red color, and horizontal margin of 10 create a visible red separator with spacing.