Hi Guys 🙂 Today we are going to talk about the List. Suppose you need to make a list in your Mobile App, Whether it is IOS App or Android App Using React native.
So let see How we are going to make it. if you are new to react native then we are also good as we are going discuss it from scratch.
I am supposing that you have already setup the environment for React native. Lets start 🙂
Create a new React Native project
react native init <Project name>
We are using Flat List for making the list. It is a core component of React Native. We can scroll the list, there is no need for scrollview.
Props of Flat List:
- data : It is plain array that you want to show in the list.
- renderItem : It takes an item from
dataand renders it into the list. - keyExtractor : It is used to extract a unique key for a given item at the specified index. Key is used for caching.
Here is the sample code that you can try at your own.
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';
const rawData= [
{
id: '1',
title: 'First Item',
},{
id: '2',
title: 'Second Item',
},{
id: '3',
title: 'Third Item',
},{
id: '4',
title: 'Fourth Item',
},{
id: '5',
title: 'Fifth Item',
},{
id: '6',
title: 'Sixth Item',
},
];
function Item({ title }) {
return (
<Viewstyle={styles.item}>
<Textstyle={styles.title}>{title}</Text>
</View>
);
}
export default function App() {
return (
<SafeAreaViewstyle={styles.container}>
<FlatList
data={rawData}
renderItem={({ item }) =><Itemtitle={item.title}/>}
keyExtractor={item =>item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 12,
},
item: {
backgroundColor: 'lightgreen',
padding: 15,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
Preview:
That’s all.Hope you enjoyed, if you need any help, Please write me. Thanks.