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.
ScrollView. Today two options are available to represent lists of data:
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!
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.
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 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.
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:
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
Why React Native Flatlist is great?
There are some benefits
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
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:
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
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.
Flatlist component we write an additional line of code that calls
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
Pull to refresh
To add pull to refresh two props are required –
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
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
Examples of React Native FlatLists
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.
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.
This content was originally published here.