React Native Flatlist

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,  
    },  
})  

You can also try this code with Online Javascript Compiler

Run Code

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 implementation. If you want to learn more, check out our articles on Method Chaining, Function Composition, Object Prototype, CRUD API Flask, JSON Response Flask API, and App Routing in Flask.

Do upvote our blog to help other ninjas grow.

Happy Coding!