Hello Dev,

Now let's see example of how to use virtualized list example. We will check how to use virtualized list. This is a short guide on virtualized list in react native. Here you will learn how to use virtualized list. Let's get started with how to virtualized list in react native.

Here i will give you many example how to use virtualized list using react native.

Let's run the following command.

expo init VirtualizedlistApp 

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 }) => (
  
    {title}
  
);

const App = () => {
  return (
    
       }
        keyExtractor={item => item.key}
        getItemCount={getItemCount}
        getItem={getItem}
      />
    
  );
}

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;

In the last step run your project using bellow command.

expo start 

It will help you...