How to add Title / Header to the list in React Native? Code Example

To add a header to the top of the flatlist in React Native, you can use ListHeaderComponent which can render any custom component or element passed to it.

There are many use cases of a header on list but primary is to display metadata information or simply the title.

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',
  },
  {
    id: '4',
    title: 'Hulk',
  },
  {
    id: '5',
    title: 'Hawkeye',
  },
  {
    id: '6',
    title: 'Spiderman',
  },
  {
    id: '7',
    title: 'Antman',
  },
];

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

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={SUPERHERO_DATA}
        renderItem={renderItem}
        ListHeaderComponent={() => (
          <View>
            <Text>List of Marvel Superheroes</Text>
          </View>
        )}
        ListHeaderComponentStyle={styles.listHeader}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  listHeader: {
    backgroundColor: '#ffccff',
    borderRadius:5,
    elevation: 2,
    margin: 5,
    padding: 10
  },
  item: {
    backgroundColor: '#fff000',
    padding: 10,
    flex:1,
    margin: 5,
  },
});

export default App;

The output will look like this –

In this code I am displaying the title of the list – List of Marvel Superheroes with the help of ListHeaderComponent prop. The outer style is passed through ListHeaderComponentStyle prop. But you can pass styles to the component itself.

Live Demo

Conclusion

A header is an element which is displayed at the top of a section. In case of list in React Native, we can show the header using ListHeaderComponent prop. Pass any component or jsx in it.