React Native FlatList Component

FlatList is a React Native component that is a scrolling list that shows changing information while keeping the same look. It's great for long lists where the number of items can change. Instead of loading all items simultaneously, this component only shows what you can see on the screen. This makes it faster and gives users a better experience.

Syntax of FlatList:

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

FlatList Props:

FlatList Methods:

Step-by-Step Implementation

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

Then, the application will display a QR code.

• For the Android users,
  • For the Android Emulator, press "a" as mentioned in the image below.
  • For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Edit Code

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:

• Image:

• Video:

iamabhishekkalra

Follow

Improve

Article Tags :

• Android
• React Native
• React-Native