React Native Virtualized List Example Tutorial

04-Apr-2023

.

Admin

React Native Virtualized List Example Tutorial

Hi Guys,

Today, I will learn you how to use virtualizedlist in react native. You can easily use virtualizedlist click event in react native. First i will create import namespace virtualizedlist from react-native, after I will make virtualizedlist using for virtualizedlist tag add in react native example.

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

Step 1 - Create project


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

expo init VirtualizedlistApp

Step 2 - App.js

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

import React from 'react';

import { SafeAreaView, View, VirtualizedList, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [];

const getItem = (data, index) => ({

id: Math.random().toString(12).substring(0),

title: `Item box ${index+1}`

});

const getItemCount = (data) => 50;

const Item = ({ title }) => (

<View style={styles.item}>

<Text style={styles.title}>{title}</Text>

</View>

);

const App = () => {

return (

<SafeAreaView style={styles.container}>

<VirtualizedList

data={DATA}

initialNumToRender={4}

renderItem={({ item }) => <Item title={item.title} />}

keyExtractor={item => item.key}

getItemCount={getItemCount}

getItem={getItem}

/>

</SafeAreaView>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

marginTop: StatusBar.currentHeight,

},

item: {

backgroundColor: '#ffb606',

height: 150,

justifyContent: 'center',

marginVertical: 8,

marginHorizontal: 16,

padding: 20,

borderRadius: 20,

},

title: {

fontSize: 32,

},

});

export default App;

Step 3 - Run project

In the last step run your project using bellow command.

expo start

Output

It will help you...

#React Native