Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is Flatlist?
3.
Features of Flatlist
4.
React Native Flatlist Example
5.
Frequently Asked Questions
5.1.
What is FlatList in React Native?
5.2.
Mention some features of Flatlist?
5.3.
What are the advantages of Using FlatList?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

React Native Flatlist

Author Rajat Agrawal
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

There are several times we have seen scrollable items in a Mobile application. Sometimes the list items are very large and dynamic. With the help of React Native, we can easily implement those scrollable lists.

In React Native, there are several ways to build a scrolling list, the most notable of which are the ScrollView and the ListView. Each has advantages and disadvantages. Since v0.43 of React Native, we've had access to two additional list views, the FlatList and the SectionList. We'll look at how to use the FlatList component in-depth.

Click on the following link to read further: Hooks in React JS

What is Flatlist?

The FlatList is a React Native component that makes it simple to create a scrolling list of data. It's efficient and also has a straightforward API to deal with. It works effectively with large data lists where the number of items in the list may change over time. FlatList only displays the only elements currently visible on the screen, not the entire list at once. You no longer need to format the data; simply provide it with an array of data and start rendering right away.

In a FlatList, data and renderItem are the two most important props to understand. The first is an array of data used to generate the list, which is commonly an array of objects, and the second is a function that renders a component for each piece in the data array.

To implement the FlatList component, we need to import FlatList from the react-native library.

Read More, React Native Paper

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Features of Flatlist

Some of the handiest features of Flatlist are given below:-

1.) It is entirely Cross-Platform.

2.) It provides the Optional horizontal mode.

3.) It provides Configurable viewability callbacks.

4.) Header support.

5.) Footer support.

6.) Separator support.

7.) ScrollToIndex support.

8.) Multiple column support.

9.) Pull to Refresh is available.

10.) Scroll loading.

React Native Flatlist Example

In this example, we provide hardcoded elements to the data prop. Each element in the data props is rendered as a Text component.

The separator between the list elements is implemented using the FlatList's ItemSeparatorComponent prop. We use the onPress prop to Text to conduct the click event on list elements.

import React, { Component } from 'react';  
import { AppRegistry, FlatList,  
    StyleSheet, Text, View,Alert } from 'react-native';  
  
export default class FlatListBasics extends Component {  
  
    renderSeparator = () => {  
        return (  
            <View  
                style={{  
                    height: 1,  
                    width: "100%",  
                    backgroundColor: "#000",  
                }}  
            />  
        );  
    };  
    //handling onPress action  
    getListViewItem = (item) => {  
        Alert.alert(item.key);  
    }  
  
    render() {  
        return (  
            <View style={styles.container}>  
                <FlatList  
                    data={[  
                        {key: 'Delhi'},{key: 'Kolkata'},{key: 'Berlin'},{key: 'Moscow'},{key: 'Tokyo'},
                        {key: 'Mumbai'},{key: 'London'},{key: 'Paris'},{key: 'Singapore'},{key: 'Los Angeles'},
                        {key: 'New York'},{key: 'San Francisco'},{key: 'Amsterdam'},{key: 'Manchester'},
                        {key: 'Copenhagen'},{key: 'Montreal'},{key: 'Pune'},
                    ]}  
                    renderItem={({item}) =>  
                        <Text style={styles.item}  
                              onPress={this.getListViewItem.bind(this, item)}>{item.key}</Text>}  
                    ItemSeparatorComponent={this.renderSeparator}  
                />  
            </View>  
        );  
    }  
}  
  
const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
    },  
    item: {  
        padding: 10,  
        fontSize: 18,  
        height: 44,  
    },  
})  

Output:

We can see the list of cities in the below screenshot, and it gets popped out when clicked.

Also see,  React Native Reanimated

Frequently Asked Questions

What is FlatList in React Native?

The FlatList is a React Native component that makes it simple to create a scrolling list of data. It's efficient and also has a straightforward API to deal with.

Mention some features of Flatlist?

Some features of Flatlist are Fully Cross-Platformed, Header Support, Footer Support, Separator Support, Multiple Coloum Support, etc.

What are the advantages of Using FlatList?

The main advantage of using the Flatlist component is that it works effectively with large data lists where the number of items in the list may change over time. FlatList only displays the only elements currently visible on the screen, not the entire list at once.

Conclusion

In this article, we have extensively discussed React Native Flatlist, its key features, uses, and code implementationIf you want to learn more, check out our articles on Method ChainingFunction CompositionObject PrototypeCRUD API FlaskJSON Response Flask API, and App Routing in Flask.

Do upvote our blog to help other ninjas grow.

Happy Coding!

Previous article
React Native ListView
Next article
React Native SectionList
Live masterclass