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.

import React from "react";
import { View, Text, FlatList } from "react-native";

const data = ["Apple", "Banana", "Mango", "Orange"];

export default function App() {
  return (
    <View style={{ marginTop: 40 }}>
      <FlatList
        data={data}
        renderItem={({ item }) => <Text style={{ fontSize: 18 }}>{item}</Text>}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
}

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

import React, { Component } from "react";
import { Text, View, StyleSheet, FlatList } from "react-native";
import { Icon } from "react-native-elements";

class App extends Component {
  state = {
    data: [
      "Data Structures",
      "STL",
      "C++",
      "Java",
      "Python",
      "ReactJS",
      "Angular",
      "NodeJs",
      "PHP",
      "MongoDb",
      "MySql",
      "Android",
      "iOS",
      "Hadoop",
      "Ajax",
      "Ruby",
      "Rails",
      ".Net",
      "Perl",
    ],
  };

  renderItem = ({ item }) => (
    <View style={styles.row}>
      <Text style={styles.rowText}>{item}</Text>
      <Icon name="eye" type="ionicon" color="#C2185B" />
    </View>
  );

  keyExtractor = (item, index) => index.toString();

  render() {
    return (
      <View style={styles.screen}>
        <FlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  screen: {
    marginTop: 30,
  },
  row: {
    margin: 15,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 2,
  },
  rowText: {
    fontSize: 18,
  },
});

export default App;

Output: