React Native Section List Example

React Native

Nicesnippets

337

04-07-2020


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...