FlatList | React Native Component Explained

So what in the flip-a-ding-dong is a FlatList? How do we use it? When do we use it? How do we style it? Allow me to answer all your questions.
The easiest way to explain it is to show it.

React Native FlatList

Let’s code the FlatList

Well, all right. Excellent. It all looks fine and dandy? But how do we actually code it? I’m glad you asked!
Firstly we’ll create an array of objects, so we have some data we will actually show. For our example, we’ll use animals and places them at the top, before return in App.js

export default function App() {
const animals = [
{
id: 1,
name: 'Shark',
},
{
id: 2,
name: 'Herring',
},
{
id: 3,
name: 'Lion',
},
{
id: 4,
name: 'Polar Bear',
},
{
id: 5,
name: 'Penguin',
},
{
id: 6,
name: 'Parrot',
},
];

return (
<View>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}

And let’s begin coding a example of a FlatList. Remember to import FlatList from react-native.

A FlatList has two required props
Data
Which is the data we want to loop. In our case, it’s the animals array, which we created a moment ago.

RenderItem
This is how each item will be rendered. The prop takes another component as an argument. Let’s create that component and call it oneAnimal. We will it place at the top along with our animals array, before we return our content.
The updated code looks like this:

...
const oneAnimal = ({ item }) => (
<View>
<Text>{item.name}</Text>
</View>
);
return (
<View>
<FlatList
data = { animals }
renderItem = { oneAnimal }
/>
</View>
);
}

Even more props!

ListHeaderComponent
Would you like a headline for the list, you could use the ListHeaderComponent prop.
Let’s create a headline by creating a function and call it headerComponent where we just will return a basic Text component.
Later on we’ll style the header by using ListHeaderComponentStyle

...
headerComponent = () => {
return <Text style={ styles.listHeadline }>Animals</Text>
}

return (
<View>
<FlatList
ListHeaderComponent={ headerComponent }
data = { animals }
renderItem = { oneAnimal }
/>
</View>
);

Are you looking to create multiple headlines? You might be looking for SectionList.

ListEmptyComponent
If your data is empty, we have a component for this as well: ListEmptyComponent

ItemSeparatorComponent
We can separate the different items by using ItemSeparatorComponent and create a function for this. In the next chapter of this article, we’ll implement this.

keyExtractor
By default React Native thinks that the default key in the data will be id.
If your key is named whatever You can tell React Native to look for a key named whatever, by using the keyExtractor prop.

There are props all over!

If you look into the React Native documentation on FlatList you will find an overview of a bunch more props you can use to customize your FlatList and have a better overview of your code.

Dude, your list is fugly..

So you don’t think our FlatList is pretty? I was taught that less is more but okay. Let’s prettify this plucker up!

I’ll start wrapping our FlatList in a SafeAreaView, so that little notch on iPhones won’t cause any problems. The SafeAreaView will also act as a container for the content.

We’ll start styling the header using ListHeaderComponentStyle.
I want a headline, that’s centered (horizontal and vertically) on the screen on a purple line underneath. The actual text, should be bold, big and black.

...
return (
<SafeAreaView style={ styles.container }>
<FlatList
ListHeaderComponentStyle = { styles.listHeader }
ListHeaderComponent={ headerComponent }
data = { animals }
renderItem = { oneAnimal }
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginHorizontal: 21,
},
listHeader: {
height: 55,
alignItems: ‘center’,
justifyContent: ‘center’,
marginBottom: 8,
borderBottomWidth: 1,
borderBottomColor: '#7B52AB',
},
listHeadline: {
color: ‘#333’,
fontWeight: ‘bold’,
fontSize: 21,
},
listHeadlineSeparator: {
width: 100,
height: 100,
borderBottomWidth :5,
borderBottomColor: '#000',
},
});

Each of our list items, will have a circle avatar with their name along with them and some spacing so it looks good.
We update the animals array to require the image path, so the FlatList is able to show the static images. This is probably not the best solution, but for our development, it works.
We’ll update the oneAnimal function to this:

...
const oneAnimal = ({ item }) => (
<View style={ styles.item }>
<View style={ styles.avatarContainer }>
<Image source={ item.image } style={ styles.avatar } />
</View>
<Text style={ styles.name }>{item.name}</Text>
</View>
);
const styles = StyleSheet.create({
...
item: {
flex: 1,
flexDirection: ‘row’,
alignItems: ‘center’,
paddingVertical: 13,
},
avatarContainer: {
backgroundColor: ‘#D9D9D9’,
borderRadius: 100,
height: 89,
width: 89,
justifyContent: ‘center’,
alignItems: ‘center’,
},
avatar: {
height: 55,
width: 55,
},
name: {
fontWeight: ‘600’,
fontSize: 16,
marginLeft: 13,
},
separator: {
height: 1,
width: ‘100%’,
backgroundColor: ‘#CCC’,
},
});

Each animal item should be separated, we’ll use the ItemSeparatorComponent, create a function for this and give it some styling:

...
listSeparator = () => {
return <View style={ styles.separator } />
}
...
<FlatList
ListHeaderComponentStyle = { styles.listHeader }
ListHeaderComponent = { headerComponent }
data = { animals }
renderItem = { oneAnimal }
ItemSeparatorComponent = { listSeparator }
/>
...
const styles = StyleSheet.create({
  separator: {
height: 1,
width: '100%',
backgroundColor: '#CCC',
},
});

The entire code

… Is on GitHub.

When to use FlatList

When you have a small list of items, you can use the ScrollView component and loop through your array.
If you have a very large data list, then use a FlatList.

The reason for that is that a FlatList only renders items when they appear on the screen, and remove them again when they are disappearing from the screen. This will make your app faster and save memory compared to using a regular ScrollView.

Code Away!