What is the FlatList component and how to use it in React Native?

FlatList is a high-performance, scrollable list component in React Native that efficiently renders large datasets. It offers header and footer support, multiple column support, comes with vertical/horizontal scrolling, lazy loading, and virtualization for optimal performance.

Here are some important features of FlatList:

• Virtualized rendering for performance optimization
• Scroll loading and lazy rendering
• ScrollToIndex support for programmatic scrolling
• Header and footer component support
• Multiple column support
• Cross-platform compatibility
• Configurable viewability callbacks

Basic Syntax

The basic structure of FlatList requires three essential props:

<FlatList
    data={DataContainer}
    renderItem={yourRenderItem}
    keyExtractor={item => item.id}
/>

FlatList is implemented from the VirtualizedList component that displays only the items visible in the current viewport, rendering additional data as the user scrolls. This virtualization ensures smooth performance even with large datasets.

Import Statement

To work with FlatList, import it from react-native:

import { FlatList } from "react-native";

Essential Props

Example 1: Vertical FlatList

Here's a complete example showing how to implement a vertical FlatList:

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

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [
                { name: "Javascript Frameworks", isTitle: true },
                { name: "Angular", isTitle: false },
                { name: "ReactJS", isTitle: false },
                { name: "VueJS", isTitle: false },
                { name: "ReactNative", isTitle: false },
                { name: "PHP Frameworks", isTitle: true },
                { name: "Laravel", isTitle: false },
                { name: "CodeIgniter", isTitle: false },
                { name: "CakePHP", isTitle: false },
                { name: "Symfony", isTitle: false }
            ]
        };
    }

    renderItem = ({ item }) => {
        return (
            <View style={styles.item}>
                <Text style={{
                    fontWeight: item.isTitle ? "bold" : "normal",
                    color: item.isTitle ? "red" : "gray"
                }}>
                    {item.name}
                </Text>
            </View>
        );
    };

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItem}
                    keyExtractor={item => item.name}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        margin: 10,
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    }
});

Example 2: Horizontal FlatList

To display items horizontally, simply add the horizontal={true} prop:

import React from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [
                { name: "Angular", isTitle: false },
                { name: "ReactJS", isTitle: false },
                { name: "VueJS", isTitle: false },
                { name: "Laravel", isTitle: false },
                { name: "CodeIgniter", isTitle: false }
            ]
        };
    }

    renderItem = ({ item }) => {
        return (
            <View style={styles.item}>
                <Text style={styles.itemText}>{item.name}</Text>
            </View>
        );
    };

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    horizontal={true}
                    data={this.state.data}
                    renderItem={this.renderItem}
                    keyExtractor={item => item.name}
                    showsHorizontalScrollIndicator={false}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 100,
    },
    item: {
        padding: 30,
        margin: 2,
        borderColor: '#2a4944',
        borderWidth: 1,
        height: 100,
        backgroundColor: '#d2f7f1',
        justifyContent: 'center',
        alignItems: 'center'
    },
    itemText: {
        color: 'gray',
        fontWeight: 'normal'
    }
});

Key Benefits

• Performance: Only renders visible items, making it efficient for large lists
• Memory Management: Automatically recycles components as user scrolls
• Flexibility: Supports both vertical and horizontal scrolling
• Customization: Extensive styling and component customization options

Conclusion

FlatList is the go-to component for rendering lists in React Native applications. Its virtualization capabilities make it perfect for handling large datasets while maintaining smooth performance and providing extensive customization options.