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.

Practice

1. What is the main purpose of using ItemSeparatorComponent in a FlatList in React Native?

easy

A. To visually separate list items for better readability

B. To add animations between list items

C. To sort the list items alphabetically

D. To load more items when scrolling

Solution

1. Step 1: Understand the role of ItemSeparatorComponent

   This prop is used to add a visual separator between items in a list.

2. Step 2: Identify the effect on UI

   It improves readability by visually dividing items, not for sorting or animations.

3. Final Answer:

   To visually separate list items for better readability -> Option A

4. Quick Check:

   ItemSeparatorComponent = Visual separation [OK]

Hint: Separators divide items visually, not functionally [OK]

Common Mistakes:

• Confusing separators with sorting or animations
• Thinking separators load more data
• Assuming separators change item order

2. Which of the following is the correct way to add a simple horizontal separator between items in a FlatList?

easy

A. ItemSeparator={() => <View style={{height: 10, backgroundColor: 'red'}} />}

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

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

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

Solution

1. Step 1: Identify the correct prop name

   The correct prop is ItemSeparatorComponent in FlatList.

2. Step 2: Check the separator style

   A horizontal separator uses a small height and a background color, typically height: 1.

3. Final Answer:

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

4. Quick Check:

   Correct prop and style = ItemSeparatorComponent={() => <View style={{height: 1, backgroundColor: 'gray'}} />} [OK]

Hint: Use ItemSeparatorComponent with height for horizontal lines [OK]

Common Mistakes:

• Using wrong prop names like separator or SeparatorComponent
• Setting width instead of height for horizontal separators
• Using too large height or wrong colors

3. Given this code snippet, what will be the visual result of the FlatList?

const data = ['Apple', 'Banana', 'Cherry'];

<FlatList
  data={data}
  renderItem={({item}) => <Text>{item}</Text>}
  ItemSeparatorComponent={() => <View style={{height: 2, backgroundColor: 'black'}} />}
/>

medium

A. A list of fruits with no separators visible

B. A list of fruits with separators only after the last item

C. A list of fruits with thick red lines between items

D. A list of fruits with a thin black line between each item

Solution

1. Step 1: Analyze the separator component

   The separator is a View with height 2 and black background, so a thin black line.

2. Step 2: Understand separator placement

   Separators appear between each item, not after the last one.

3. Final Answer:

   A list of fruits with a thin black line between each item -> Option D

4. Quick Check:

   ItemSeparatorComponent creates black lines between items [OK]

Hint: Separator style defines line thickness and color [OK]

Common Mistakes:

• Thinking separators appear after last item
• Confusing separator color or thickness
• Assuming no separators show without extra code

4. What is wrong with this FlatList code that tries to add separators?

<FlatList
  data={[1,2,3]}
  renderItem={({item}) => <Text>Item {item}</Text>}
  ItemSeparatorComponent="<View style={{height: 1, backgroundColor: 'gray'}} />"
/>

medium

A. The separator is passed as a string instead of a function component

B. The data array is invalid

C. The renderItem function is missing parentheses

D. The separator style uses height instead of width

Solution

1. Step 1: Check how ItemSeparatorComponent is passed

   It is passed as a string, which is incorrect. It must be a function returning a component.

2. Step 2: Verify other parts

   Data and renderItem are correct; height is correct for horizontal separator.

3. Final Answer:

   The separator is passed as a string instead of a function component -> Option A

4. Quick Check:

   ItemSeparatorComponent must be a function, not a string [OK]

Hint: Pass separator as function, not string [OK]

Common Mistakes:

• Passing JSX as string instead of function
• Confusing height and width for separator style
• Incorrect renderItem syntax

5. You want to create a FlatList with vertical items and a custom separator that is a 10-pixel tall red line with 20 pixels horizontal margin on each side. Which code snippet correctly implements this separator?

hard

A. ItemSeparatorComponent={() => <View style={{height: 10, backgroundColor: 'red', marginVertical: 20}} />}

B. ItemSeparatorComponent={() => <View style={{height: 10, backgroundColor: 'red', marginHorizontal: 20}} />}

C. ItemSeparatorComponent={() => <View style={{width: 10, backgroundColor: 'red', marginVertical: 20}} />}

D. ItemSeparatorComponent={() => <View style={{width: 10, backgroundColor: 'red', marginHorizontal: 20}} />}

Solution

1. Step 1: Understand vertical list separator style

   For vertical lists, separator height controls thickness; width is full width by default.

2. Step 2: Apply margin for horizontal spacing

   Use marginHorizontal: 20 to add space on left and right sides.

3. Step 3: Check color and size

   Height 10 and backgroundColor red matches the requirement.

4. Final Answer:

   ItemSeparatorComponent={() => <View style={{height: 10, backgroundColor: 'red', marginHorizontal: 20}} />} -> Option B

5. Quick Check:

   Vertical separator uses height + marginHorizontal [OK]

Hint: Vertical separator uses height and marginHorizontal for side space [OK]

Common Mistakes:

• Using width instead of height for vertical separators
• Using marginVertical instead of marginHorizontal for side margins
• Confusing margin directions