React Native FlatList Component

FlatList is a React Native component used to display large, dynamic lists in a smooth and scrollable layout. It efficiently renders only the visible items to provide better performance and user experience.

• Renders only visible items instead of the entire list.
• Automatically handles scrolling and layout updates.
• Suitable for large and frequently changing data sets.

• FlatList receives the data array and renders each item as a Text component using renderItem.
• keyExtractor assigns a unique key to each list item to ensure efficient rendering and updates.

Syntax:

<FlatList 
 data={}
 renderItem={}
 keyExtractor={}
 />

Props for FlatList Component

FlatList props define how list data is rendered, styled, scrolled, refreshed, and optimized in a React Native application.

1. Data & Rendering Props

These props control what data appears and how each item is rendered.

• data: Provides the array of items to be displayed in the list.
• renderItem: Defines how each data item is rendered on the screen.
• keyExtractor: Generates a unique key for every list item.
• extraData: Forces re-render when external state changes.
• getItemLayout: Predefines item size and position for faster rendering.
• numColumns: Displays items in multiple columns instead of one.
• columnWrapperStyle: Styles each row when multiple columns are used.

2. Header, Footer & Empty UI Props

These props control extra content around list items.

• ListHeaderComponent: Displays a component at the top of the list.
• ListFooterComponent: Displays a component at the bottom of the list.
• ListEmptyComponent: Displays content when the list has no data.
• ItemSeparatorComponent: Adds a separator between list items.
• ListHeaderComponentStyle: Styles the header component.
• ListFooterComponentStyle: Styles the footer component.

3. Scrolling & Layout Props

These props control list direction and starting position.

• horizontal: Enables horizontal scrolling when set to true.
• inverted: Reverses the order and scroll direction of the list.
• initialScrollIndex: Sets the starting scroll position of the list.

4. Performance Optimization Props

These props improve rendering speed and memory usage.

• initialNumToRender: Specifies how many items render initially.
• removeClippedSubviews: Removes off-screen views to save memory (Android only).

5. Refresh Control Props

These props enable pull-to-refresh functionality.

• onRefresh: Called when the user pulls down to refresh.
• refreshing: Indicates whether the list is currently refreshing.

6. Viewability Tracking Props

These props track which items are visible on screen.

• onViewableItemsChanged: Triggers when visible items change.
• viewabilityConfig: Sets rules for when an item is considered visible.
• viewabilityConfigCallbackPairs: Supports multiple visibility tracking rules.

Methods for FlatList Component

FlatList methods allow direct control over scrolling behavior and access to the underlying native scroll components.

• flashScrollIndicators(): Temporarily shows the scroll bars to indicate that scrolling is available.
• getNativeScrollRef(): Returns a reference to the native ScrollView component.
• getScrollResponder(): Provides access to the internal scroll responder for advanced control.
• getScrollableNode(): Returns a handle to the native scrollable node.
• scrollToEnd(): Scrolls the list to the very end of the content.
• scrollToIndex(): Scrolls the list to a specific item based on its index.

Implementing FlatList Component

It involves supplying data and a render function to efficiently display a scrollable list of items in React Native.

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

This will launch the Expo DevTools and display a QR code in the terminal and browser.

How to run the app:

• Android Emulator: Press a in the terminal to open the app in the Android emulator.
• Android Physical Device: Install Expo Go from the Play Store, open it, tap Scan QR Code, and scan the QR code to run the app.
• iOS Device: Open the Camera app and scan the QR code to launch the app.
• Web Browser: Click the localhost link shown in the terminal or browser to run the app in the web.

Step 3: App.js

Implementing the FlatList Component in App.js.

Output: