The FlatList Component is among the simplest and most-used React Native components. If you are just starting out with React Native, you must get a gist of the FlatList Component and understand its purpose.
While building apps, you will come across some lists; these can be a list of contacts, users, activities, etc. They may seem very easy to implement. But, displaying large data sets or a long list is not that performant. That’s where React Native’s FlatList component comes into the picture.
An introduction to flatList component
The FlatList component is used to display large quantities of scrollable list items. Under the hood, the FlatList component makes use of the ScrollView component.
Still, it adds a performance factor to it, like only rendering the items visible on the screen, and only updating the items that have been changed. The FlatList component works great for large items of data that might change over time.
There are two main and required props you need to know about for using FlatList component – data and renderItem.
The data prop is an array of data that is used as the source for creating the list. The renderItem is a callback function that will accept the individual item from the data prop and render a component for it. You no longer need to format the data — instead, you can pass an array and start rendering right away.
Basic Usage
Consider that you have a data array with a list of countries in it:
js const data = ["Germany", "Australia", "Sri Lanka", "Japan"];
Now, to render the countries, create a component called Country:
jsx
import { Text, View } from "react-native";
const Country = ({ name }) => (
<View>
<Text>{name}</Text>
</View>
);
Inside the App component, get the data into the state:
jsx
const data = ["Germany", "Australia", "Sri Lanka", "Japan"];
const App = () => {
constructor(props) {
super(props);
this.state = {
countries: data
}
}
render() {
// ...
}
}
Next, import the FlatList component from react-native and use it to display the countries:
jsx
import { FlatList, Text, View } from "react-native";
// ...
const App = () => {
constructor(props) {
super(props);
this.state = {
countries: data
}
}
render() {
return (
<View style={{ flex: 1 }}>
<FlatList
data={this.state.data}
renderItem={({item}) => <Country name={item} />}
/>
</View>
);
}
}
The renderItem function is passed as a single argument, which is an object.
The data you require is in the item property, so you can use destructuring to access the data. In this case, you need to pass the item to the name prop of the Country component.
Note that this might be different for various cases depending on the props your component might take and the prop types.
Below, you can find the entire code for this section:
jsx
import React from "react";
import { FlatList, Text, View } from "react-native";
const data = ["Germany", "Australia", "Sri Lanka", "Japan"];
const Country = ({ name }) => (
<View>
<Text>{name}</Text>
</View>
);
const App = () => {
constructor(props) {
super(props);
this.state = {
countries: data
}
}
render() {
return (
<View style={{ flex: 1 }}>
<FlatList
data={this.state.data}
renderItem={({item}) => <Country name={item} />}
/>
</View>
);
}
}
export default App;
Fetching data from an API
In a more practical scenario, you might want to display the data that is fetched from your backend service. In this section, you will see some real-world examples to get up and running with the FlatList component.
Learn more →So, start by creating a new project:
sh npx react-native init FlatListDemo
For styling the components, use the react-native-elements library:
sh yarn add react-native-elements react-native-vector-icons
Start by adding the header component on the screen:
jsx
import { Header } from "react-native-elements";
const AppHeader = () => (
<Header
centerComponent={{ text: "USERS", style: { color: "#fff" } }}
containerStyle={{ paddingTop: 0, height: 60 }}
/>
);
const App = () => {
return (
<View>
<AppHeader />
</View>
);
};
Next, use the JSON placeholder API to fetch the user info:
jsx
class App extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
isLoading: false,
};
}
fetchUsers = async () => {
this.setState({ isLoading: true });
try {
const res = await fetch(JSON_API_URL);
const users = await res.json();
this.setState({ users });
} catch (err) {
console.log(err);
}
this.setState({ isLoading: false });
};
componentDidMount() {
this.fetchUsers();
}
render() {
return (
(
)}
keyExtractor={(user) => user.id}
ItemSeparatorComponent={() => }
/>
);
}
}
The keyExtractor prop retrieves the keys for the list item. These unique keys notify the FlatList component to keep track of the items and are important when it comes to efficiency and performance.
You will have to select a unique value for the key. In this case, it is the id. By default, the keyExtractor falls back to the index of the item, but you will still see the warning.
The ItemSeperatorComponent prop lets you add a separator component between the list items. In this case, you are adding the Divider component.
Pull To Refresh
Pull to refresh is an essential functionality that lets the user refresh the data on the screen when the user pulls the screen towards the bottom and loads new data.
Pull to refresh is vital in any app that has an activity or a data feed, which needs to be refreshed to view new content.
This can happen when a user spends a good amount of time on your app browsing the feed, and new data becomes available at some point in time.
Two props are required to implement Pull to Refresh functionality in a FlatList component – refreshing and onRefresh.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
The refreshing prop tells the FlatList component to show a RefreshControl component when new data is being loaded.
It accepts a Boolean value. The onRefresh is a callback prop that calls the function when the refreshing prop is set to true. This function must be responsible for loading new data and updating the list items in the FlatList component.
jsx
class App extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
isLoading: false,
};
}
fetchUsers = async () => {
this.setState({ isLoading: true });
try {
const res = await fetch(JSON_API_URL);
const users = await res.json();
this.setState({ users });
} catch (err) {
console.log(err);
}
this.setState({ isLoading: false });
};
componentDidMount() {
this.fetchUsers();
}
render() {
return (
(
)}
keyExtractor={(user) => user.id}
refreshing={this.state.isLoading}
onRefresh={this.fetchUsers}
ItemSeparatorComponent={() => }
/>
);
}
}
Pagination
Pagination is another important functionality to have in your app when there is a lot of data that needs to be loaded.
In practicality, you can’t load all the data at once — it would make your app really slow and less efficient, resulting in poor performance and poor user experience.
For this example, use the fake user generator API, as it has a pagination option and also includes user avatars.
The basic idea is to have a state variable in your component that keeps track of the current page and increments it when the user reaches the end of the list.
When the user reaches at the end, fetch the new list data with the current page value. This can be implemented in the FlatList component using the onEndReached prop. The onEndReached props accept a function that is triggered when the user reaches at the end of the list.
jsx
const Loader = () => (
<View style={{ minHeight: 230, padding: 20 }}>
<ActivityIndicator
color="#000"
size="large"
style={{ alignSelf: "center" }}
/>
</View>
);
class App extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
isLoading: false,
isLoadingMore: false,
page: 1,
};
}
fetchUsers = async () => {
this.setState({ isLoading: true });
try {
const res = await fetch(`${JSON_API_URL}&page=${this.state.page}`);
const { results: users } = await res.json();
if (this.state.page === 1) this.setState({ users });
else this.setState({ users: [...this.state.users, ...users] });
} catch (err) {
console.log(err);
}
this.setState({ isLoading: false });
};
refreshUsers = () => {
this.setState({ page: 1 }, () => {
this.fetchUsers();
});
};
loadMoreUsers = () => {
this.setState({ page: this.state.page + 1, isLoadingMore: true }, () => {
this.fetchUsers();
this.setState({ isLoadingMore: false });
});
};
componentDidMount() {
this.fetchUsers();
}
render() {
return (
<View>
<AppHeader />
<FlatList
data={this.state.users}
renderItem={({ item }) => (
<ListItem
title={`${item.name.first} ${item.name.last}`}
subtitle={item.login.username}
leftAvatar={{ source: { uri: item.picture.thumbnail } }}
/>
)}
keyExtractor={(user) => user.login.uuid}
refreshing={this.state.isLoading}
onRefresh={this.refreshUsers}
ItemSeparatorComponent={() => <Divider />}
ListFooterComponent={this.state.isLoadingMore && <Loader />}
onEndReachedThreshold={0.1}
onEndReached={this.loadMoreUsers}
/>
</View>
);
}
}
Conclusion
That is it for FlatList component in React Native.
Now that you have learned about the FlatList component, you can fetch data from any API and display the list items in your app.
Make sure you implement pull to refresh and infinite scroll in your app as it improves the overall user experience and gives your app a more professional finish.
Cut through the noise of traditional React error reporting with LogRocket
LogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.
LogRocket
automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.
Focus on the React bugs that matter — try LogRocket today.
should data={this.state.data} in fact be data={this.state.countires} ? as this.state.data is undefined