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