React Native Section List Example

Hi Guys,

In this blog, I will explain you how to create section list in react native. You can easily create section list in react native. First i will import namespace SectionList

, after I will make section list using SectionList tag in react native.

Here, I will give you full example for simply display section list using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init SectionList 

Step 2 - App.js

In this step, You will open App.js file and put the code.

import React from "react";
import { StyleSheet, Text, View, SafeAreaView, SectionList } from "react-native";
import Constants from "expo-constants";
const DATA = [
  {
    title: "Bike",
    data: ["Honda", "Hero", "Yamaha"]
  },
  {
    title: "Car",
    data: ["Hyundai", "Honda", "Jeep"]
  }
];
const Vehicle = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);
const App = () => (
  <SafeAreaView style={styles.container}>
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Vehicle title={item} />}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.header}>{title}</Text>
      )}
    />
  </SafeAreaView>
);
export default App;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
    marginHorizontal: 16
  },
  item: {
    backgroundColor: "#f08080",
    padding: 20,
    marginVertical: 8
  },
  header: {
    fontSize: 32,
    backgroundColor: "#fff"
  },
  title: {
    fontSize: 24,
    color : "#fff"
  }
});

Step 3 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...