---
# System prepended metadata

title: React Native - Section 2 - FlatList
tags: [React Native]

---

# 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
```javascript=
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={ ... } />
```javascript=4
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={ ... } />
```javascript=4
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 : 
```javascript=11
    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;![](https://i.imgur.com/Cs84ElX.png)

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;![](https://i.imgur.com/dYeO5UK.png)

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;![](https://i.imgur.com/WygvNdO.png)
&emsp;&emsp;![](https://i.imgur.com/J8UdMuh.png)

## 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.
```javascript=4
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.
```javascript=4
const ListScreen = () => {
    
    const friends = [ { name: 'Friend #1' }, ... ]

    return (
        <FlatList 
            keyExtractor={(friend) => friend.name}
            data={friends} 
            renderItem={({ item }) => {
                return <Text>{item.name}</Text>;
            }}
        />
    )
}
```
:::success
```javascript=10
    keyExtractor={(friend) => friend.name}
``` 
&emsp;this line of code equals : 
```javascript=10
    keyExtractor={function(friend) { return friend.name }}
```
:::
***
## Full code of "ListScreen.js" (without StyleSheet)
```javascript=
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

```javascript=4
const ListScreen = () => {
    ...
}
    
const styles = StyleSheet.create({
    textStyle: {
        marginVertical: 50
    }
})
```
&emsp;&emsp;![](https://i.imgur.com/aUUF0wk.png)

### 2. &emsp;"horizontal" prop : 
```javascript=4
const ListScreen = () => {
    
    const friends = [ ... ]

    return (
        <FlatList 
            horizontal={true}
            ...
        />
    )
}
```
:::success
&emsp;*p.s. :*&emsp;```horizontal={true}```&emsp;*equals simply*&emsp;```horizontal```
:::

&emsp;&emsp;![](https://i.imgur.com/vkSidg6.png)

### 3. &emsp;"showsHorizontalScrollIndicator" prop : 
&emsp;&emsp;function : show or hide the ***scrollbar*** which is originally at the bottom
```javascript=4
const ListScreen = () => {
    
    const friends = [ ... ]

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













