How and why we use Flatlist in Expo React Native

The benefits of using Flatlist

We have seen one way of outputting a list to the screen using the map function on an array and then returning some JSX for each todo.

Flatlist is another way to output lists which a lot of people see as better. So we go to the top and import the FlatList. We can also get rid of scroll view because FlatList automatically comes with the ability to scroll up and down the list

Complete React Native articles:

1. How to build a React Native app with Expo
2. How to Run the Expo React Native app on the emulator
3. Expo folder and file structure
4. Expo React Native View, Text and Style
5. Expo React Native — using React Hook useState()
6. How to Use TextInput Component to Change State in React Native?
7. How to Use Expo React Native List and ScrollView
8. How and why we use Flatlist in Expo React Native
9. What is TouchableOpacity in Expo React Native?

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

FlatList have a number of different props which controls how our list works

<FlatList

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

data={todos}

renderItem={({ item }) => (

<Text style={styles.todo}>{item.title}</Text>

)}

/>

Data prop is to specify the data that we want to cycle through.

The renderItem prop and is going to be equal to a function that returns some JSX. The data we require is in the “item” property, so we need to destructure to access the data. We do not need the key in FlatList. It will automatically looks for a key property.

We can see there is a warning “Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`.” . We will fix this later. We also add the todo style to each item.

<Text style={styles.todo}>{item.title}</Text>

Why FlatList is better

1. less code
2. better peformance

“FlatList” only load the first few and then more will load as you scroll down while “List” and “ScrollView” renders every item from the beginning even for large lists.

We already mentioned that the FlatLess component automatically looks for the key property on each item.

In this case, it already looked id as the key property, however what it expect should be “string” but get the “number”

We need to add another prop to the FlatList and that is called key extractor.

<FlatList

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

data={todos}

renderItem={({ item }) => (

<Text style={styles.todo}>{item.title}</Text>

)}

/>

We update the key with id that convert to string. It should no longer get that warning at the bottom.

Set column

Another property called “numColumns”, we can set this equal to a number.

We set it as 3 and it is going to do is split up into some kind of grid.

We can change the style to lower the fontSize, margin and padding to 10 so can get a clearer picture.

todo: {

margin: 10,

backgroundColor: 'deeppink',

color: 'white',

fontSize: 10,

padding: 10

}

Full Code:

import React, { useState } from 'react';

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

export default function App() {

const [todos, setTodo] = useState([{

"userId": 1,

"id": 1,

"title": "delectus aut autem",

"completed": false

},

{

"userId": 1,

"id": 2,

"title": "quis ut nam facilis et officia qui",

"completed": false

},

{

"userId": 1,

"id": 3,

"title": "fugiat veniam minus",

"completed": false

},

{

"userId": 1,

"id": 4,

"title": "et porro tempora",

"completed": true

},

{

"userId": 1,

"id": 5,

"title": "laboriosam mollitia et enim quasi adipisci quia provident illum",

"completed": false

},

{

"userId": 1,

"id": 6,

"title": "qui ullam ratione quibusdam voluptatem quia omnis",

"completed": false

},

{

"userId": 1,

"id": 7,

"title": "illo expedita consequatur quia in",

"completed": false

},

{

"userId": 1,

"id": 8,

"title": "quo adipisci enim quam ut ab",

"completed": true

},

{

"userId": 1,

"id": 9,

"title": "molestiae perspiciatis ipsa",

"completed": false

},

{

"userId": 1,

"id": 10,

"title": "illo est ratione doloremque quia maiores aut",

"completed": true

}])

return (

<View style={styles.container}>

<FlatList

numColumns={3}

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

data={todos}

renderItem={({ item }) => (

<Text style={styles.todo}>{item.title}</Text>

)}

/>

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

},

todo: {

margin: 10,

backgroundColor: 'deeppink',

color: 'white',

fontSize: 10,

padding: 10

}

});

Get free tutorials on YouTube:

Follow us: https://twitter.com/ckmobilejavasc1