8. Flat list in react native

Flat list is a react native component that is use to display large amount of data in the form of list in native app. There are many extra and advance features which flatlist provide over map() list.

Flat list uses normal array as well as array of objects.

Flat list take three parameters

1) data(array)

2) renderItem(loop/iteration over array)

3) define unique key (keyExtractor = { item => item.id })

Flat list features that make it more value able.

1) It load data that is only visible on screen. When the list item go off the screen it automatically delete them from the list. This way app performance grow up and give user a smooth scroll feeling.

2) It provide scrolling feature by-default.You no need to add extra component of "ScrollView" to make scroll able data list.

3) Flatlist provide these feature

• Header section
• Footer section
• Horizontal scrolling
• Separator
• Pull to refresh
• Scroll loading
• Scroll to a specific position in the list
• Multiple column support

  Visit the link for example code laraveldevdiary

Example code:

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

const FlatListExp = () => {

    const students = [

        {

            id: 1,

            name: 'Adnan'

        },

        {

            id: 2,

            name: 'Zaib'

        },

        {

            id: 3,

            name: 'AAli'

        },

        {

            id: 4,

            name: 'Zaib'

        },

        {

            id: 5,

            name: 'AAli'

        },

        {

            id: 6,

            name: 'Zaib'

        },

        {

            id: 7,

            name: 'AAli'

        }

    ];

    return (

        <View>

            <Text style={styles.heading}>FlatList in react native</Text>

            <FlatList

                style={styles.Flatlist}

                data={students}

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

                keyExtractor={(item)=>item.id}

            />

        </View>

    );

}

const styles = StyleSheet.create({

    heading: {

        fontSize: 16,

    },

    Flatlist: {

        // borderWidth:2

    },

    item: {

        padding:4,

        margin: 6,

        borderWidth: 2,

        borderColor: 'pink',

        borderRadius: 6,

        alignItems: 'center'

    }

});

export default FlatListExp;