# React Native - Section 2 - FlatList
###### tags: `React Native`

## FlatList Element
0. Import FlatList from React Native.
1. Turns an array into a list of elements.
2. Pass in a 'prop' of 'data' :
the array of data that we are going to create a bunch of elements out of.
3. Pass in a 'renderItem' prop :
function that will turn each individual item into an element

## FlatList Implement

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

const ListScreen = () => {
    const friends = [
        { name: 'Friend #1' },
        { name: 'Friend #2' },
        { name: 'Friend #3' },
        { name: 'Friend #4' },
        { name: 'Friend #5' },
        { name: 'Friend #6' },
    ]
}

## Pass in 'data' prop
-> return <FlatList data={ ... } />

const ListScreen = () => {
    
    const friends = [ ... ]

    return <FlatList data={friends} />
}

## Pass in 'renderItem' prop
function that is going to be called with every element
-> return <FlatList data={ ... } renderItem={ ... } />

const ListScreen = () => {
    
    const friends = [ ... ]

    return (
        <FlatList 
            data={friends} 
            renderItem={(element) => {}}
        />
    )
}

However, element not actually equals ```{ name: 'Friend #1' }```
:::danger
&emsp;element&emsp;==&emsp;*```{ item: { name: 'Friend #1' }, index: 0 }```*
:::
So the code should change into :

    renderItem={({ item }) => {
        return <Text>{item.name}</Text>     
    }}

## Benefits of a key property

The issue when we don't provide that key is how our list gets updated on the screen.

&emsp;&emsp;

Behavoir ***without*** a 'key' being provided :
&emsp;-> It deletes everything visible on the screen to update,
&emsp;&emsp; and looks at the new array of data and renders each single element.
&emsp;-> React Native has to delete every element and then rebuild the entire thing from scratch.

&emsp;&emsp;

Behavior ***with*** a 'key' being provided :
&emsp;-> detect that we specifically delete '*Friend 4*'
&emsp;-> then delete the element that has a key of 'D'
&emsp;-> move up '*Friend 5*' and done.

&emsp;&emsp;
&emsp;&emsp;

## 2 ways to implement key property

The requirement of a key property :
1. It must be a ***string***.
2. Consistent between renders.
3. Must be ***unique*** compared to the other objects.

### The first way

&emsp;find the original objects, and add a key property to each object.

const ListScreen = () => {
    const friends = [
        { name: 'Friend #1', key: '1' },
        { name: 'Friend #2', key: '2' },
        { name: 'Friend #3', key: '3' },
        { name: 'Friend #4', key: '4' },
        { name: 'Friend #5', key: '5' },
        { name: 'Friend #6', key: '6' },
    ]
}

### The second way

&emsp;add a keyExtractor on our FlatList component itself.

const ListScreen = () => {
    
    const friends = [ { name: 'Friend #1' }, ... ]

    return (
        <FlatList 
            keyExtractor={(friend) => friend.name}
            data={friends} 
            renderItem={({ item }) => {
                return <Text>{item.name}</Text>;
            }}
        />
    )
}

:::success

    keyExtractor={(friend) => friend.name}

&emsp;this line of code equals :

    keyExtractor={function(friend) { return friend.name }}

:::
***
## Full code of "ListScreen.js" (without StyleSheet)

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

const ListScreen = () => {
    const friends = [
        { name: 'Friend #1' },
        { name: 'Friend #2' },
        { name: 'Friend #3' },
        { name: 'Friend #4' },
        { name: 'Friend #5' },
        { name: 'Friend #6' },
    ]
    
    return (
        <FlatList 
            keyExtractor={(friend) => friend.name}
            data={friends}
            renderItem={({ item }) => {
                return <Text>{item.name}</Text>
            }}
        />
    )
}

export default ListScreen

***
## A few props around FlatList

### 1.&emsp;"marginVertical" prop :
&emsp;&emsp;apply some spacing ***above and below*** every text element that we display

const ListScreen = () => {
    ...
}
    
const styles = StyleSheet.create({
    textStyle: {
        marginVertical: 50
    }
})

&emsp;&emsp;

### 2. &emsp;"horizontal" prop :

const ListScreen = () => {
    
    const friends = [ ... ]

    return (
        <FlatList 
            horizontal={true}
            ...
        />
    )
}

:::success
&emsp;*p.s. :*&emsp;```horizontal={true}```&emsp;*equals simply*&emsp;```horizontal```
:::

&emsp;&emsp;

### 3. &emsp;"showsHorizontalScrollIndicator" prop :
&emsp;&emsp;function : show or hide the ***scrollbar*** which is originally at the bottom

const ListScreen = () => {
    
    const friends = [ ... ]

    return (
        <FlatList 
            horizontal
            showsHorizontalScrollIndicator={false}
            ...
        />
    )
}