How to Use Virtualized List using React Native?
Dec 29, 2021 . Admin
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 projectLet's run the following command.
expo init VirtualizedlistAppStep 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 }) => (Step 3 : Run project); const App = () => { return ( {title} ); } 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; - } keyExtractor={item => item.key} getItemCount={getItemCount} getItem={getItem} />
In the last step run your project using bellow command.
expo start
It will help you...