How To Use Virtualized List Using React Native?


Share:
Published By: Admin, Published On: Dec 29, 2021, Category: React Native


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.

Step 1 : Create project

Let's run the following command.

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 }) => (
  
    {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;
Step 3 : Run project

In the last step run your project using bellow command.

expo start 

It will help you...

Share: