How to Implement FlatList in React Native?

Hi Guys,

This tutorial will give you an example of how to implement FlatList in react native. I explained simply how to create a FlatList in react native. I would like to show you the FlastList example in react native. step by step explain how to use the FlatList component using react-native. Let's see below an example of how to use FlatList in react native.

I will explain step by step tutorial on how to implement FlatList in react native.

So, let's following example:

Step 1 - Create project

In the first step run the following command to create a project.

expo init FlatList

Step 2 - App.js

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

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

const DATA = [
    {
        id:"1",
        title:"Data Structures"
    },
    {
        id:"2",
        title:"STL"
    },
    {
        id:"3",
        title:"C++"
    },
    {
        id:"4",
        title:"Java"
    },
    {
        id:"5",
        title:"Python"
    },
    {
        id:"6",
        title:"CP"
    },
    {
        id:"7",
        title:"ReactJs"
    },
    {
        id:"8",
        title:"NodeJs"
    },
    {
        id:"9",
        title:"MongoDb"
    },
    {
        id:"10",
        title:"ExpressJs"
    },
    {
        id:"11",
        title:"PHP"
    },
    {
        id:"12",
        title:"MySql"
    },
    {
        id:"13",
        title:"React Native"
    },
    {
        id:"14",
        title:"Node JS"
    },
    {
        id:"15",
        title:"Laravel"
    },
];

const Item = ({ title }) =>(
    <View style={styles.item}>
        <Text style={styles.title}>{title}</Text>
    </View>
);

export default function App() {
    const renderItem = ({ item }) => (
        <Item title={item.title} />
    );
    
    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={DATA}
                renderItem={renderItem}
                keyExtractor={item => item.id} 
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        backgroundColor: '#f9c2ff',
        padding: 15,
        marginVertical: 4,
        marginHorizontal: 16,
    },
    title: {
        fontSize: 32,
    },
});

Step 3 - Run project

In the last step run your project using the below command.

expo start --web

Now run your project in the browser.

port : http://localhost:19006/

Output:

It will help you...