List View Example Using React Native

04-Apr-2023

.

Admin

List View Example Using React Native

Hi Guys,

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


, after I will make list view using flatlist tag in react native.

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

Step 1 - Create project

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

expo init ListView

Step 2 - App.js

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

import React from 'react';

import { FlatList, StyleSheet, Text, View } from 'react-native';

export default FlatListBasics = () => {

return (

<View style={styles.container}>

<FlatList

data={[

{key: 'Html'},

{key: 'Css'},

{key: 'Php'},

{key: 'Laravel'},

{key: 'React Native'},

]}

renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}

/>

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

paddingTop: 22

},

item: {

padding: 10,

fontSize: 18,

height: 44,

},

})

Step 3 - Run project

In the last step run your project using bellow command.

expo start --web

Now run your project in browser.

port : http://localhost:19006/

Output

It will help you...

#React Native