04-Apr-2023
.
Admin
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
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...
#React Native