React Native FlatList Component [2024 Beginner's Guide]

One of the essential components required to master your react native basics is the use of FlatList. Every programming language and framework provides you with some mechanism for iterating over a list of data, and React Native is no different.FlatList is beneficial in many ways, such as rendering a list of items in a to-do list, displaying a list of contact on your mobile phone, etc. Enroll in web development for higher pay after placement Full Stack Developer course.

In this tutorial, you will understand, what FlatList is in React Native, and how to use it in your project. Stay tuned as we jump into the meat of this tutorial. 

What is FlatList in React Native?

To simply state, FlatList is a React Native component that renders items in a scrollable view. For instance, React FlatList can be used to render a list of countries, states, or provinces that you can select from when filling a form.

What is so remarkable about FlatList is that it is scrollable and eliminates the need for you to write a loop function. You will only be required to supply a list of items in an array, and the FlatList will render it for you in the nicest of ways possible.

An Introduction to FlatList Component

Let’s talk about the FlatList component...

<FlatList
data={DataContainer}
renderItem={ yourenderItem}
keyExtractor={item => item.id}
/>																															

The FlatList component displays a collection of structured and often dynamic data. It displays in a scrollable view only the render elements that are currently visible on the screen, rather than all of the list's elements at once.

This component requires two primary properties for showing data on the screen: data and renderItem.

What is a render item in FlatList? The renderItem takes each Item and returns a formatted version while the data is the elements to be rendered.

To implement this component, importing FlatList from the 'react-native' library is required.

Props in FlatList React Native

As recently discussed, props means properties. They are extra ingredients passed into a component. A component may have both required and optional props needed for utilizing it.

Let’s take a look at the props encapsulated within a FlatList component. 

• ItemSeparatorComponent: This component is used to render a space between each item.
• ListEmptyComponent: This component is displayed when the list is empty.
• ListFooterComponent: This component is displayed at the bottom of all items.
• ListFooterComponentStyle: It is used to style the ListFooterComponent's internal view.
• ListHeaderComponent: This component is displayed at the top of all items.
• ListHeaderComponentStyle: It is used to style the ListHeaderComponent internal view.
• columnWrapperStyle: This is a custom style used for multi-item rows.
• extraData: This is the property that instructs the list to re-render itself.
• getItemLayout: This is an optional optimization that allows you to skip dynamic content measurement if you know the size of the items.
• horizontal: If true, the items will be rendered horizontally rather than vertically.
• initialNumToRender: This specifies the number of items to render in the first batch.
• initialScrollIndex: If provided, it will start from the initialScrollIndex item rather than the top item.
• inverted: It reverses the scroll's direction.
• numColumns: This property is used to display multiple columns.
• onEndReached: This prop is called only once when the scroll position is within the rendered content. In combination with onEndReachedThreshold can be used to achieve react native flatlist pagination.
• onEndReachedThreshold: This prop tells us how close we are to the end.
• onRefresh: If this parameter is provided, a standard RefreshControl will be added.
• onViewableItemsChanged: This prop is invoked when the visibility of a row changes.
• progressViewOffset: It is set when the loading offset is required. It is only available for Android devices.
• progressViewOffset: It is set when the loading offset is required. It is only available for Android devices.
• refreshing: While waiting for new data from a refresh, set this to true.
• removeClippedSubviews: This may improve scroll performance when scrolling through long lists. The default value on Android is true.
• viewabilityConfigCallbackPairs: Displays a list of pairs.

Basic Structure of React Native FlatList

The FlatList structure is simple and can be achieved with one line of code only; see the code snippet below.

<FlatList data={} renderItem={} keyExtractor={item => item.id} />

Isn’t that super simple? Well, that’s for the basics. To spice it up a little, we pass in some props to it, props mean properties. Think about it this way, to make a dish taste better; you will need to add some more ingredients.

There are some primary and optional react props that you can pass into a FlatList to render some items that meet your desired result.

A. Primary Props

What are the three key props used in a FlatList? The primary props are the key properties that make your FlatList render items on the screen, and they include;

• data: This accepts the array of items you want to pass into the FlatList.
• renderItem: This includes the individual items you wish to display represented by (item, index, and separator). Each item has an index, a function that you can use to modify the item before rendering.
• keyExtractor: This prop is used to extract the unique key for a given item.

With the above properties, your FlatList is ready to render your items on the screen; let’s look at the optional properties...

B. Optional Props

When you are asked what is extra data in FlatList? You should know that extra data are optional props. And they are the non-compulsory properties available in the FlatList component for rendering a list item. Listed below are some of the extra properties available for your usage.

If you’re seeking to improve your app development skills, we recommend our Web Development best course to bring you up to speed in no time.

Benefits of React Native FlatList Components

Before we talk more about the FlatList component, let us understand the benefits of the component. The component offers various advantages that simplify rendering dynamic lists in React Native. Here are some of the key benefits:

1. Smooth Scrolling and Efficient Rendering: FlatList optimizes performance by rendering only the visible items on the screen. This ensures smoother scrolling and better performance, especially with large datasets, compared to rendering the entire list at once.
2. Customizable and Flexible: FlatList provides customization options for how things are rendered, allowing us to modify the appearance of each item based on unique requirements. This adaptability allows for the construction of distinctive and compelling user interfaces.
3. Dynamic and Scalable: It efficiently handles large lists of data without compromising on performance. Whether it's a few items or thousands, FlatList adapts, making it suitable for various app scenarios without sacrificing user experience.
4. Seamless Integration with Data Sources: It easily integrates with various data sources like arrays, making it straightforward to manage and display data fetched from APIs or local storage.
5. Optimized for Touch Interactions: It handles touch events efficiently, supporting interactions like tap, swipe, and hold gestures on list items. This makes it ideal for applications requiring user interactions within a scrollable list.

React Native FlatList Syntax (With Sample Usage)

How do you show data in FlatList in react-native? Below is an example of how you can quickly use FlatList in your next React Native project…

Example #1

import * as React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';
# A component to render individual item
const Item = ({name}) => {
return(
<View style={styles.item}>
<Text style={{color: 'black'}}>{name}</Text>
</View>
);
}
export default function App() {
# A datalist of countries to render
const countries = [
{
id: '1',
name: 'United States',
},
{
id: '2',
name: 'United Kingdom',
},
{
id: '3',
name: 'Israel',
},
{
id: '4',
name: 'India',
},
{
id: '5',
name: 'Nigeria',
},
{
id: '6',
name: 'Uganda',
},
];
# An item renderer
const renderItem = ({item})=>(
<Item name={item.name}/>
);
return (
<View style={styles.container}>
<FlatList
data={countries}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
marginTop:30,
padding:2,
},
item: {
backgroundColor: 'orange',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
borderRadius: 8,
shadowColor: '#000',
shadowOffset: { width: 3, height: 3 },
shadowOpacity: 0.3,
shadowRadius: 8,
},
});

And this is what the piece of code above looks like…

Methods of FlatList in React Native

Methods are functions that can be found in a class. Each React Native component is its class. It not only carries props but also has some methods that allow the FlatList to perform certain actions.

For example, when an event is triggered, these methods can perform certain operations. Let's take a closer look at them.

• flashScrollIndicators(): Displays the scroll indicators for a brief period.
• getNativeScrollRef(): returns a pointer to the underlying scroll component.
• getScrollResponder(): This method returns the handle to the underlying scroll responder.
• getScrollableNode(): This method returns the handle to the underlying scroll node.
• recordInteraction(): This method returns a list of all interactions that have occurred.
• scrollToEnd(): This method scrolls to the end of the content.
• scrollToIndex(): This method scrolls to a specific item whose index is provided.
• scrollToItem(): This method scrolls to a specified item. It necessitates a linear scan of the data.
• scrollToOffset(): This method scrolls the list to a specific content pixel offset.

Important Properties of FlatList

FlatList is a container for listing items that can be loaded. It has header and footer support, multiple column support, vertical/horizontal scrolling, lazy loading, etc. Here are some of FlatList's key features.

• Includes scroll loading
• Allows you to adjust the scroll using ScrolltoIndex support
• It supports headers and footers
• Multiple column layouts
• Cross-platform
• Configurable viewability callbacks

Examples of React Native FlatLists

How do you make a FlatList horizontal? A horizontal FlatList can easily be achieved by passing the horizontal prop inside the FlatList React Native component, as seen in the image below.

Example #2

<FlatList
data={countries}
renderItem={renderItem}
keyExtractor={(item) => item.id}
horizontal
/>

How do you optimize FlatList? As seen in the following example, you can easily optimize a FlatList by breaking it down into components.

Example #3

In this example, we will be spicing up our countries list by adding a third parameter to our datatype; here is what the process looks like...

const countries = [
{
id: '1',
name: 'country name',
isSelected: true,
},
...,
...,
];

Modify the Item component code to look like this…

const Item = ({ name, isSelected }) => {
return (
<View
style={[
styles.item,
{ borderColor: isSelected ? 'red' : 'black' },
{ borderWidth: isSelected ? 2 : 0 },
]}>
<Text
style={{
fontWeight: 500,
color: 'black',
}}>
{name}
</Text>
</View>
);
};

Include the renderItem method as before...

const renderItem = ({ item }) => (
<Item name={item.name} isSelected={item.isSelected} />
);
Display the FlatList React Native component as before…
return (
<View style={styles.container}>
<FlatList
data={countries}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</View>
);

Update the stylesheet like this…

const styles = StyleSheet.create({
container: {
marginTop: 30,
padding: 2,
},
item: {
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
borderRadius: 8,
shadowColor: '#000',
shadowOffset: { width: 3, height: 3 },
shadowOpacity: 0.3,
shadowRadius: 8,
},
});

The above codes should produce this result, as seen below…

With the above example, you can specify which country is to be selected by the boolean key supplied in the countries data list.

You can do a lot more with FlatList; you can try doing some new examples, such as adding a FlatList loading indicator or some animation to the FlatList component.

For next steps, check out our blog posts about react js vs react native. 

Are you ready to unlock the power of Python? Join our Python Developer Course and become a coding maestro! Start your journey today. 

React Native FlatList Customization

Customizing a FlatList in React Native provides numerous possibilities for modifying the list's design and behavior. We can improve the user experience by adjusting the FlatList to unique design and interaction requirements using various props and capabilities. 

The 'renderItem' prop stands as a foundation, enabling custom rendering of each item in the list. This prop allows us to create unique components or views for individual items, to craft diverse and engaging layouts.

Additionally, the 'ListHeaderComponent' and 'ListFooterComponent' props allow us to insert custom header and footer elements, which improves the list's organization. 'ItemSeparatorComponent' makes it easier to include separators between items, which contributes to greater visual hierarchy and clarity.

Furthermore, the 'onEndReached' and 'onRefresh' props allow for fine-tuning interactions by providing actions when the user reaches the end of the list or begins a refresh gesture.

FlatList's wide customization options enable us to create visually appealing, dynamic, and functional lists that are suited to specific application requirements.

React Native FlatList vs ScrollView

FlatList and ScrollView serve distinct purposes in React Native. FlatList excels in rendering large datasets efficiently due to its optimized virtual rendering mechanism. It saves memory and ensures smooth scrolling by rendering only the visible items. It is an optimal choice for dynamic lists requiring high performance, such as in social media feeds or e-commerce product displays. Additionally, FlatList integrates seamlessly with data sources, supports key-based data rendering, and offers built-in touch handling.

On the other hand, ScrollView provides a versatile container for various components and views. Unlike FlatList, ScrollView renders all items at once, making it less efficient for large datasets.

Therefore, we should go with FlatList whenever feasible due to its implementation of lazy loading. ScrollView suits scenarios with a limited number of rendered items on the screen, but for larger datasets or improved performance, FlatList emerges as the preferable choice.

Conclusion

It has been a blast so far in this tutorial, and hopefully, you got some valuable insights on how to use FlatLists in your next React Native project.

Explore our curated collection of insightful articles on Software Development, covering the latest trends, best practices, and essential tips to help you stay ahead in the tech industry.

Unlock your potential with our free Software Development courses, designed to equip you with the skills and knowledge needed to excel in the tech world. Start learning today and advance your career!

Master the most in-demand software development skills that employers are looking for. From coding languages to development frameworks, these skills will help you stand out in the tech industry.