How to add dividers between list items in React native? Code Example

Adding dividers gives a consistent separation between list items. In React Native, we use ItemSeparatorComponent props in FlatList to render dividers.

The value of ItemSeparatorComponent could be a function, component or simple JSX element.

Code Example

import React, { useState } from "react";
import { FlatList, SafeAreaView, StyleSheet, Text, View, StatusBar } from "react-native";

const SUPERHERO_DATA = [
  {
    id: '1',
    title: 'Ironman',
  },
  {
    id: '2',
    title: 'Thor',
  },
  {
    id: '3',
    title: 'Captain America',
  },
];

const App = () => {
  
  const renderItem = ({ item, index, separators }) => (
    <View style={styles.item}>
        <Text>{item.title}</Text>
      </View>
  )

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        ItemSeparatorComponent={() => (
          <View
              style={styles.separator}
            />
        )}
        data={SUPERHERO_DATA}
        renderItem={renderItem}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  separator: {
    height: 2,
    backgroundColor: '#0045ff',
    marginLeft: 30
  },
  item: {
    backgroundColor: '#fff000',
    padding: 10,
  },
});

export default App;

The output will look like this –

In this code we have passed a View component inside ItemSeparatorComponent props. According to the styles, the View will be rendered as horizontal line of blue color.

You can customize these divider according to your use case. Remember, a divider do not render at the top and the bottom of the list. So, if you have a single item then no divider will be rendered anywhere.

Live Demo

Conclusion

A divider is a visual component which separates two similar kinds of elements. They are quite popular in lists where they are used to separate list items. In React Native FlatList, we use ItemSeparatorComponent props to render a divider element.