FlatList in React Native: Complete Tutorial with ListItem ExamplesWeb App Development

Rendering scrollable lists of data effectively is a typical need in mobile applications. Whether you are creating a chat app, an e-commerce product listing, or a social media feed app, you require a high-performance means of displaying lists. That is where the React Native Flat List enters the picture.

In this entire tutorial, we will be dissecting how to utilize the React Native FlatList, what goes on behind the scenes, rendering various types of ListItems, and optimizing your list rendering for improved performance and user experience.

What is FlatList in React Native?

The FlatList is a fundamental element in React Native that efficiently displays big scrollable lists of items. It is the suggested method to display lists especially when the list size may grow dynamically or is large.

As opposed to the fundamental ScrollView, which displays all the items simultaneously, FlatList in React Native implements lazy loading. That is to say, it only loads items that are displayed on the screen (and a few off-screen items for more fluid scrolling), greatly enhancing performance.

Why Use React Native FlatList?

Here’s why you need to use FlatList React Native over other list components:

• Lazy rendering for big datasets
• Better performance and memory efficiency
• Native support for separators, headers, footers, and pull-to-refresh
• Easier syntax for rendering dynamic arrays
• Easy styling with React Native ListItem components

Basic Syntax of React Native Flat List

Let’s look at a simple example of how to use a FlatList in React Native:

“`jsx

import React from ‘react’;

import { View, Text, FlatList, StyleSheet } from ‘react-native’;

 

const DATA = [

  { id: ‘1’, title: ‘First Item’ },

  { id: ‘2’, title: ‘Second Item’ },

  { id: ‘3’, title: ‘Third Item’ },

];

 

const Item = ({ title }) => (

  <View style={styles.item}>

<Text style={styles.title}>{title}</Text>

  </View>

);

 

const MyFlatList = () => {

  return (

<FlatList

   data={DATA}

   renderItem={({ item }) => <Item title={item.title} />}

      keyExtractor={item => item.id}

/>

  );

};

 

const styles = StyleSheet.create({

  item: {

padding: 20,

backgroundColor: ‘#f9c2ff’,

marginVertical: 8,

  },

  title: {

fontSize: 18,

  },

});

 

export default MyFlatList;

“`

Explanation

• `data`: An array of data to be rendered.
•  `renderItem`: A function that returns a component for each list item.
•  `keyExtractor`: A function to return a unique key for each item (important for performance).

This example renders a vertical list of 3 items using React Native FlatList.

Benefits of Using FlatList in React Native

FlatList is a developer’s best friend for rendering extensive lists in mobile applications. Here’s why developers favor it:

• Smooth Scrolling: FlatList has an onEndReached prop that fetches more data automatically when users reach the end of the list—ideal for infinite feeds or catalogs without bogging down the app.
• Easy Navigation: Need to scroll automatically to a certain item? FlatList supports scroll-to-item approaches, allowing you to easily navigate to any point in the list.
• Highly customizable and Flexible: Using props such as renderItem, numColumns, and inverted, you’re able to flexibly manipulate how the list should appear and interact, whether you’re creating a vertical feed, a horizontal slider, or even a grid mode.

Creating Custom ListItem Components

A powerful feature of React Native Flat List is that you can create fully customized ListItems.

Here’s how to build a reusable React Native ListItem component:

“`jsx

const ListItem = ({ title, subtitle }) => (

  <View style={styles.listItem}>

<Text style={styles.itemTitle}>{title}</Text>

<Text style={styles.itemSubtitle}>{subtitle}</Text>

  </View>

);

 

const styles = StyleSheet.create({

  listItem: {

padding: 16,

borderBottomWidth: 1,

borderColor: ‘#ccc’,

  },

  itemTitle: {

fontSize: 18,

fontWeight: ‘600’,

  },

  itemSubtitle: {

fontSize: 14,

color: ‘#666’,

  },

});

“`

Now use it with the FlatList:

“`jsx

<FlatList

  data={DATA}

  renderItem={({ item }) => (

<ListItem title={item.title} subtitle=”Subtitle here” />

  )}

  keyExtractor={item => item.id}

/>

“`

This approach gives you complete control over how each list React Native item looks and behaves.

Enhancing FlatList with Header, Footer, and Separator

Reactnative Flatlist provides convenient props to add UI elements like headers, footers, and separators.

“`jsx

<FlatList

  data={DATA}

  renderItem={({ item }) => <Item title={item.title} />}

  keyExtractor={item => item.id}

  ListHeaderComponent={<Text style={styles.header}>List Header</Text>}

  ListFooterComponent={<Text style={styles.footer}>List Footer</Text>}

  ItemSeparatorComponent={() => <View style={styles.separator} />}

/>

“`

 

“`jsx

const styles = StyleSheet.create({

  header: {

fontSize: 24,

fontWeight: ‘bold’,

padding: 10,

backgroundColor: ‘#eee’,

  },

  footer: {

fontSize: 16,

padding: 10,

textAlign: ‘center’,

color: ‘#999’,

  },

  separator: {

height: 1,

backgroundColor: ‘#ccc’,

  },

});

“`

FlatList with Horizontal Scrolling

To make the React Native FlatList scroll horizontally, just use the `horizontal` prop.

“`jsx

<FlatList

  data={DATA}

  renderItem={({ item }) => <Item title={item.title} />}

  keyExtractor={item => item.id}

  horizontal={true}

/>

“`

You can build a photo slider, category tabs, or a horizontal newsfeed using this approach.

Pull to Refresh with FlatList React Native

Enable the pull-to-refresh feature with the `onRefresh` and `refreshing` props.

“`jsx

const [refreshing, setRefreshing] = useState(false);

 

const onRefresh = () => {

  setRefreshing(true);

  // fetch or update data

  setTimeout(() => setRefreshing(false), 2000);

};

 

<FlatList

  data={DATA}

  renderItem={({ item }) => <Item title={item.title} />}

  keyExtractor={item => item.id}

  refreshing={refreshing}

  onRefresh={onRefresh}

/>

“`

FlatList Performance Optimization Tips

1. Use `keyExtractor` Correctly

   Unique keys make it easier for React to handle re-renders.

2. Use `initialNumToRender`

   Manage how many items to render initially to prevent rendering delay.

3. Use `getItemLayout`

   If your items are of fixed height, this enhances scroll performance.

4. Don’t Use Inline Functions

   Move functions outside of render to prevent unnecessary re-renders.

5. Use `memo` and `PureComponent`

Memoize `ListItem` to prevent re-renders when props haven’t changed.

FlatList vs. ScrollView: What’s the Difference?

Both FlatList and ScrollView render lists of items, but they behave differently under the hood:

• ScrollView loads all items at once, which can make your app slow and consume more memory, particularly with big data sets.
• FlatList employs lazy loading, so it loads the items only as they come on screen, which makes it more effective for long lists.
• Utilize FlatList when dealing with large or dynamic lists.
•  Use ScrollView only when the list contains a small, static number of items.

Using SectionList as an Alternative

If you want grouped lists (like contacts sorted by alphabet), consider using `SectionList`, which is similar to Flatlist React Native but supports sections.

 

Error Message	Cause	Solution
VirtualizedLists should never be nested	Using FlatList inside a ScrollView	Use nestedScrollEnabled={true} in ScrollView or avoid nesting altogether
undefined is not a function (renderItem)	renderItem is not defined or not a function	Make sure renderItem is passed as a valid function
Keys not unique	Duplicate or missing key values	Use a unique keyExtractor or ensure each item has a unique key property
Cannot read property ‘length’ of undefined	data is undefined or not an array	Ensure data is a valid array before passing it to FlatList
FlatList not rendering items	renderItem or data is incorrect	Validate data is not empty and renderItem returns valid JSX
ExtraData not causing re-render	FlatList doesn’t re-render on state change	Use extraData={yourState} to trigger re-renders on state update
Performance issues with large data	Rendering too many items at once	Use initialNumToRender, maxToRenderPerBatch, and windowSize props

 

 Real-World Applications of FlatList

• Chat applications (WhatsApp conversations)
• Product lists in eCommerce applications
• Social media application news feeds
• Blogs with infinite scroll
• Contact lists divided by alphabet

Conclusion: When and Why to Use React Native FlatList

It is obvious to implement React Native Flat List when it comes to building performance-scrollable list views. Its lazy rendering pattern is much ahead of rolling the individual arrays manually in the ScrollView. Whether you’re building a React Native ListItem-type feed or an engagement-product catalog, FlatList gives you performance, flexibility, and terse syntax.

Want help in building a scalable mobile app with FlatList and React Native? Contact our expert team at Logixbuilt Solutions for performance-driven React Native development.

FAQ’s

1. What does FlatList in React Native serve the purpose of?

FlatList serves to render large or dynamic lists of items in a scrollable, optimized view.

2. How is FlatList different from ScrollView?

In contrast to ScrollView, FlatList only renders visible items, which decreases memory consumption and enhances performance.

3. Can I have multiple columns in FlatList?

Yes, utilize the `numColumns` prop to have a grid layout.

4. Is FlatList suitable for long lists?

Yes. FlatList is made to use long lists by only rendering visible items.

5. How do I include a separator between items in FlatList?

You can use the `ItemSeparatorComponent` prop to include a separator view.