In Flatlogic we create web & mobile application templates built with React, Vue, Angular and React Native to help you develop web & mobile apps faster. Go and check out yourself!
See our themes!

A list is the most basic and simple component that apps have, it is used almost everywhere in our life. You may make a shopping list when deciding to go to the market. And you likely make it in the notes app as a list. 

JavaScript offers a map function to build a list, since React.js is JavaScript-based the way to work with lists is similar. On the other hand, React Native is supposed to render native elements both for Android and iOS, so it has a different way to build lists. The most generic option to display a scrolling list of data in React Native was using ScrollView. Today two options are available to represent lists of data: FlatList and SectionList. 

Do you like this article?
You might want to read:

React Native accelerates the process of building apps across different platforms, thanks to the possibility of reusing most of the code between them. FlatList is a component that looks great both on iOS and Android. Let’s get to know it better.   

Basics of React Native Flatlist

FlatList is a component that responsible for the display of a list with similar data objects. The display of every element has an identical format and uses a common stylesheet. The data goes in a structured and scrollable manner. 

Check out React Native Starter!

FlatList uses ScrollView component to render elements, however, it comes without pure performance issues of ScrollView and with some additional features out of the box that allow to build a better UI and make the development process easier. 

The FlatList component comes into play when you need to display a long scrollable list of items. 

There are two required props for React Native FlatList component – data and renderItem. 

The data prop is the data that is displayed in the FlatList component. The type of data can be any from starting an array of numbers to an array filled with JSON objects that you fetched through API. 

The renderItem prop is a function that takes every item object from the data prop and renders them into the list component. If you want your data to display with special styling, you can do this within the renderItem or refer to the method through the renderItem prop that creates styling for you (an example: renderItem={this.RenderStyling}). 

There are a bunch of optional props that can be helpful in development. You can find a full list of them in the official documentation, we mention some of them we are going to use further in the article. 

The list of props :

The alternative for FlatList is a SectionList component. SectionList has recently appeared and is used to add a list of sections with headings for every group of items in the list. It may be useful only if need headings and items in the list are divided into logical groups, otherwise use FlatList.  

Why React Native Flatlist is great?

There are some benefits FlatList has:

How to implement React Native FlatList

The full code with the final result you can find here:

Let’s look at how we get that result step by step.

Start with importing all the necessary staff we have mentioned in the previous chapter. We need React and some methods from react–native. 

Consider that you have a data array with Marvel heroes, where every hero has its unique serial id (these numbers are just serial keys and doesn’t imply the ranking of heroes). 

That array will become the first required props of the React Native FlatList. 

Now, to render the list, we create a component called Marvel and declare a style for our future list so the scroll would not intersect with the future header:

Use FlatList

Then useFlatList component from react-native to display the list of Marvel Heroes. We pass the array of data with Marvel heroes via the data prop. And then use renderItem prop to render the content. The renderItem function gets heroes’ names from the array and renders a list component with all names from our array. To turn that into the life we need to declare a renderItem function that would be passed as the second required prop to FlatList. 

There are unique identifiers for every hero within FlatList. The IDs must be string type, not number. 

To use them we create a function MyKeyExtractor that extracts a unique key of every element from the MarvelList array, by which FlatList can update these elements most effectively, for example, when you delete one element somewhere in the middle of the list. 

In the Flatlist component we write an additional line of code that calls keyExtractor props. 

It is a component at the top of the list. The sequence of steps to add a header is the same as adding the separator. 

We define a function renderHeader that renders the interface of the header we need. And then pass the function for rendering to React Native FlatList component as a Header. Besides this way, you can header by using ListHeaderComponent prop and with the help of the state.  Additionally, in the stylesheet we define two new styles for the whole header and text inside it. 

To add a footer you need to do the same steps that you made with the header. We add a footer component, write two more classes in the stylesheet for the footer and the text for it, then add our Footer to the Marvel component. An alternative to adding the footer is to use listFooterComponent. 

Pull to refresh

To add pull to refresh two props are required – refreshing and onRefresh. The first prop is an indicator of the type of boolean that tracks whether the view should be updated or not. onRefresh is a function responsible for loading new data and updating the items in FlatList. onRefresh comes into play when the refreshing prop is set to true. 

To implement the pull to refresh option we need to use the useState hook and declare the handleRefresh function that updates the state of the component. Then add handleRefresh function in FlatList component. 

Examples of React Native FlatLists

Facebook 

Facebook team has developed the React Native, so there is nothing strange they have used this technology in Facebook app development. Facebook is the most popular social network worldwide with 2,7 billion monthly active users. Social networks belong to that type of app where lists are extremely demanded. Since the number of users is very high and the app generates millions of gigabytes of data every month, the app has to perform great to provide fast rendering. And if you are a user of Facebook app you may have noticed that your list of contacts works fast. 

Instagram is the most popular photo and video sharing app with 1,2 billion monthly active users. The app was released on market on April 3, 2012, and then Facebook acquired it on April 9 the same year. All further development was carried out by the Facebook team. React Native technology showed its strengths again, so today Instagram has grown to the fifth-biggest social media platform worldwide. It unites people from all over the world from small businesses to big ones, news organizations to cultural institutions, celebrities, photographers, and musicians. 

Facebook Ads Manager

Facebook Ads manager is a business tool to create and manage Facebook ads. Since Facebook is the most popular social media platform, it became very huge digital advertising platform. Here Facebook Ads manager comes to play, it allows to manage Facebook and Instagram ads: upload them, set budgets, monitor results. All these opportunities are collected inside a small React Native based app.

Shopify is a subscription-based software that allows anyone to set up an online store and sell their products. Shopify is just a store builder or a tool to sell your products with over 1 million Shopify users. The team of developers chose to work with React far away in 2018 when they rewrite their app Arrive and developed Shop App. They continued that acquaintance with React Native and are consistently embedding React Native in their apps. 

Conclusion 

We have built a list of Marvel heroes in this article using React Native Flatlist. If you want to learn more about that component we highly recommend to refer to the official documentation and real examples like the one we made. Hope the article was helpful, thanks for reading.