React Native Simple FlatList Component Android Example

This tutorial explains how to use FlatList component in react native application and apply set onPress event on FlatList  to get value from selected list item. FlatList provides easy way to make an efficient scrolling list of data. FlatList - More performant compared to ListView. ListView rendering can get slow once the number of items grows larger. FlatList significantly improves memory usage and efficiency (especially for large or complex lists).

FlatList Features :
Flatlist is packed with new components full of features to handle the majority of use cases out of the box:

• Scroll loading (onEndReached).
• Pull to refresh (onRefresh / refreshing).
• Horizontal mode (horizontal).
• Fully cross-platform.
• Configurable viewability callbacks.
• Intelligent item and section separators.
• Multi-column support (numColumns)
• Footer support.
• Separator support.
• scrollToEnd, scrollToIndex, and scrollToItem support
• Better Flow typing.

In this example we are going to create simple FlatList layout, where we will display hard coded values from state and when user click on any of these list items, then it will display selected item in alert dialog box.

React Native FlatList Example :

Lets follow the below steps to create Simple FlatList layout Component in React Native.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

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

Step-4 : Create constructor in your HomeActivity class with props parameter and Create super method with props parameter in constructor. Now using this.state  we are defining the FlatList items array with key and Key should be added with items.

constructor(props) {
    super(props);

    this.state = {
      FlatListItems: [
        { key: "Skptricks" },
        { key: "Sumit" },
        { key: "Amit" },
        { key: "React" },
        { key: "React Native" },
        { key: "Java" },
        { key: "Javascript" },
        { key: "PHP" },
        { key: "AJAX" },
        { key: "Android" },
        { key: "Selenium" },
        { key: "HTML" },
        { key: "Database" },
        { key: "MYSQL" },
        { key: "SQLLite" },
        { key: "Web Technology" },
        { key: "CSS" },
        { key: "Python" },
        { key: "Linux" },
        { key: "Kotlin" },
      ]
    };
  }

Step-5 : Create a function named as FlatListItemSeparator. Using this method we are generating the FlatList each item separator – divider line.

FlatListItemSeparator = () => {
    return (
      <View style={{ height: 1, width: "100%", backgroundColor: "#607D8B" }} />
    );
};

Step-6 : Create GetItem method to show the selected FlatList item name with help of alert dialog box.

 GetItem(item) {
    Alert.alert(item);
  }

Step-7 : Implement render method and return FlatList component wrapped by root View component. Specify the below parameters in FlatList component as props, that helps to form list layout.The basic key props that are necessary, while using FlatList component.

• data - The array of items that need to be listed.
• renderItem - Function that returns the component of each item.
• keyExtractor - Extract the key of each item: it can be the index or any unique field in the data.

render() {
     return (
       <View style={styles.container}>
         <FlatList
            data={ this.state.FlatListItems }
            ItemSeparatorComponent = {this.FlatListItemSeparator}
            renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>}
         />
       </View>
    );
  }

Step-8 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  item: {
    padding: 10,
    fontSize: 20,
    height: 45,
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to create simple List layout design with the help of FlatList Component in react native application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class HomeActivity extends Component {
  constructor(props) {
    super(props);

    this.state = {
      FlatListItems: [
        { key: "Skptricks" },
        { key: "Sumit" },
        { key: "Amit" },
        { key: "React" },
        { key: "React Native" },
        { key: "Java" },
        { key: "Javascript" },
        { key: "PHP" },
        { key: "AJAX" },
        { key: "Android" },
        { key: "Selenium" },
        { key: "HTML" },
        { key: "Database" },
        { key: "MYSQL" },
        { key: "SQLLite" },
        { key: "Web Technology" },
        { key: "CSS" },
        { key: "Python" },
        { key: "Linux" },
        { key: "Kotlin" },
      ]
    };
  }

  FlatListItemSeparator = () => {
    return (
      <View style={{ height: 1, width: "100%", backgroundColor: "#607D8B" }} />
    );
  };

  GetItem(item) {
    Alert.alert(item);
  }

  render() {
     return (
       <View style={styles.container}>
         <FlatList
            data={ this.state.FlatListItems }
            ItemSeparatorComponent = {this.FlatListItemSeparator}
            renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>}
         />
       </View>
    );
  }

}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  item: {
    padding: 10,
    fontSize: 20,
    height: 45,
  }
});

Screenshot :

This is all about FlatList layout design in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

Download Link :

https://github.com/skptricks/React-Native/tree/master/React%20Native%20Simple%20FlatList%20Component%20Android%20Example