What is FlatList?

displays a scrolling list of changing, but similarly structured, data. Unlike the more generic ScrollView, the FlatList only renders elements that are currently showing on the screen, not all the elements at once(unlike ScrollView).
Designed to efficiently render large lists of data with optimal performance. FlatList component requires two props: data and renderItem

Very Good Video

Examples

Simple FlatList


import { View, Text, SafeAreaView, FlatList } from 'react-native';  //1
export default function App() {
    const students = [                  //2
        {id: "1", "name": "amit"},
        {id: "2", "name": "bohan"},
        {id: "3", "name": "charan"},
    ]
    // Arrow Function
    // const function_name = (arguments) => (Function body return JSX);
    const renderItem = ({ item }) => (      //5
    <View>
        <Text>{item.name}</Text>
    </View>
    );

    return (
    <SafeAreaView>
        <FlatList            //3
            data= {students}
            renderItem= {renderItem}
            keyExtractor={(item) => item.id.toString()} //4
        />
    </SafeAreaView>
    );
}
1. import
2. Create Array of Object in JavaScript. [] is Array, {} is Object

  Array/list/collection [] is collection of values, Can contain multiple elements of different types
  Object/HashMap/Dictionary {}: key-value pair collection
  Nested Objects in Arrays. Placing {} inside [] creates an array of objects

This format will remain consistent across React Native FlatList implementations:
3. Define FlatList inside SafeAreaView

<FlatList
    //data prop. takes array on which we will iterate(students here)
    data={students}

    //See below
    keyExtractor={(item) => item.id.toString()}

    //renderItem prop. See below
    renderItem={renderItem}
/>
4. keyExtractor is function, which returns which property on object is used as key
keyExtractor{(item) => } //item is fixed always
Make students.id as key 

keyExtractor={(item) => }
5. renderItem Arrow Function 

Format:
const function_name = (arguments) => (Function body return JSX);

// {item}. Destructure the item which we want to iterate,
// so that we have access to each item inside the function
const renderItem = ({ item }: {item:any}) => (
    Return view
);