Item separators in React Native

Introduction

Item separators help to clearly show the space or line between list items. They make lists easier to read and look neat.

When showing a list of contacts and you want a line between each name.

When displaying a menu with multiple options and you want to separate each option visually.

When showing a list of messages or notifications to make each item distinct.

When creating a settings page with different sections separated by lines.

Syntax

React Native

const renderSeparator = () => {
  return <View style={{ height: 1, backgroundColor: '#CED0CE' }} />;
};

<FlatList
  data={data}
  renderItem={renderItem}
  ItemSeparatorComponent={renderSeparator}
/>

The ItemSeparatorComponent prop in FlatList is used to add a separator between items.

The separator is usually a thin View with a background color and height.

Examples

A simple gray line separator between text items.

React Native

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

<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item}</Text>}
  ItemSeparatorComponent={Separator}
/>

A thicker blue separator with vertical spacing for more space between items.

React Native

const Separator = () => <View style={{ height: 2, backgroundColor: 'blue', marginVertical: 5 }} />;

<FlatList
  data={items}
  renderItem={({ item }) => <Text>{item}</Text>}
  ItemSeparatorComponent={Separator}
/>

Sample App

This app shows a list of fruits with a thin gray line separating each fruit name. The separator helps to see each item clearly.

React Native

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

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

const ItemSeparator = () => {
  return <View style={{ height: 1, backgroundColor: '#CCCCCC' }} />;
};

export default function App() {
  const renderItem = ({ item }) => <Text style={{ padding: 20, fontSize: 18 }}>{item}</Text>;

  return (
    <SafeAreaView style={{ flex: 1, marginTop: 50 }}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item}
        ItemSeparatorComponent={ItemSeparator}
      />
    </SafeAreaView>
  );
}

Important Notes

You can customize the separator style to match your app's design.

If you don't add a separator, the list items will appear without any dividing lines.

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

Summary

Item separators visually divide list items for clarity.

Use ItemSeparatorComponent in FlatList to add separators.

Separators are usually thin View components with background color and height.