Item separators in React Native - Mini App: Build & Ship

Build: Item Separator List

This screen shows a list of items with a visible separator line between each item.

Target UI

---------------------
| Item 1           |
---------------------
| Item 2           |
---------------------
| Item 3           |
---------------------

Display a vertical list of at least 5 items using FlatList.

Add a thin horizontal separator line between each item.

The separator line should be gray and span the full width of the list.

Each item should show simple text like 'Item 1', 'Item 2', etc.

Starter Code

React Native

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

export default function ItemSeparatorList() {
  const data = [
    { id: '1', title: 'Item 1' },
    { id: '2', title: 'Item 2' },
    { id: '3', title: 'Item 3' },
    { id: '4', title: 'Item 4' },
    { id: '5', title: 'Item 5' }
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={({ item }) => <Text style={styles.item}>{item.title}</Text>}
        // TODO: Add item separator component here
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50
  },
  item: {
    padding: 20,
    fontSize: 18
  }
});

Task 1

Task 2

Solution

React Native

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

export default function ItemSeparatorList() {
  const data = [
    { id: '1', title: 'Item 1' },
    { id: '2', title: 'Item 2' },
    { id: '3', title: 'Item 3' },
    { id: '4', title: 'Item 4' },
    { id: '5', title: 'Item 5' }
  ];

  const renderSeparator = () => {
    return <View style={styles.separator} />;
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={({ item }) => <Text style={styles.item}>{item.title}</Text>}
        ItemSeparatorComponent={renderSeparator}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50
  },
  item: {
    padding: 20,
    fontSize: 18
  },
  separator: {
    height: 1,
    backgroundColor: '#CCCCCC',
    marginLeft: 0,
    marginRight: 0
  }
});

We added the ItemSeparatorComponent prop to the FlatList. This prop takes a component that renders between each item. We created a simple renderSeparator function that returns a View styled as a thin gray horizontal line. This line appears between each item in the list, making the list easier to read and visually separated.

The separator uses a height of 1 and a light gray color. It spans the full width because margins are set to zero. This is a common pattern to improve list readability in mobile apps.

Final Result

Completed Screen

---------------------
| Item 1           |
---------------------
| Item 2           |
---------------------
| Item 3           |
---------------------
| Item 4           |
---------------------
| Item 5           |
---------------------

User can scroll vertically through the list.

Between each item, a thin gray line separates them visually.

Stretch Goal

Add a separator that changes color when an item is pressed.

💡 Hint

Use state to track the pressed item and conditionally style the separator.