React Native FlatList - Getting Your React Native Basics Right

Introduction

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.

Dynamically rendering a data collection will always be important as you go about your software development journey. 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.  

There are many methods for rendering items in React Native, but FlatList is one of a kind.

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. If you are interested to know more about React, you may check out the React Native certification.

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.

Let’s not talk too much; let’s understand the basic structure of a FlatList…

Basic Structure of 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.

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...

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.  

FlatList Syntax (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…

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

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. k

• 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.

Wow, that’s a ton of props that comes with the React Native FlatList. Other than props, there are also some methods you should know that come with the FlatList component.

Methods in FlatList

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

How to Use the FlatList Component in React

Step 1: Open your command line terminal and install expo-cli by the following command.

$ npm install -g expo-cli

Step 2: Now, create a project by the following command.

$ expo init countryList

Step 3: Now go into your project folder, i.e., countryList

$ cd countryList

Step 4: Import FlatList into your screen or component.

import { FlatList} from "react-native";

Step 5: Create an Item component

const Item = ({name}) => {
return(
<View style={styles.item}>
<Text style={{color: 'black'}}>{name}</Text>
</View>
);
}

Step 6: Supply your data list

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

Step 7:  Create a renderItem method.

const renderItem = ({item})=>(
<Item name={item.name}/>
);

Step 8: Use FlatList in the project.

return (
<View style={styles.container}>
<FlatList
data={countries}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</View>
);

That’s how simple it is; the props and methods discussed above can be passed along with the FlatList component.

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. 

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.

If you want to crush react and everything about React Native, check out the KnowledgeHut’s React Native Certification. That will be all for now, till next time, all the best!