React Native FlatList

In this blog, I will demonstrate how to add a list view in React Native using FlatList component.

FlatList Component

 

It is a React Native component that helps to make a scrolling list of given data.

 

Properties

1. data - source of an element which is in array type format.
2. renderItem - It takes an individual item of the data array and renders a component structure for it.
3. keyExtractor - unique key for list item. 

To create a list in React Native using FlatList, first import FlatList component in code.

import { FlatList } from 'react-native';

Code

import React, { Component } from "react";
import {
  FlatList, Text, StyleSheet
} from 'react-native';

const Cities = [
  { id: 101, name: 'Mumbai' }, { id: 102, name: 'New York' }, { id: 103, name: 'Los Angeles' }, { id: 104, name: 'Chicago' },
  { id: 105, name: 'Houston' }, { id: 106, name: 'Phoenix' }, { id: 107, name: 'Philadelphia' }, { id: 108, name: 'London' },
  { id: 109, name: 'Birmingham' }, { id: 110, name: 'Manchester' }, { id: 111, name: 'Bangkok' }, { id: 112, name: 'Paris' },
];



const extractKey = ({ id }) => id.toString()

class App extends Component {
  renderItem = ({ item }) => {
    return (
      <Text style={styles.cityListStyle}>
        {item.name}
      </Text>
    )
  }

  render() {
    return (
      <FlatList
        style={styles.container}
        data={Cities}
        renderItem={this.renderItem}
        keyExtractor={extractKey}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cityListStyle: {
    padding: 15,
    marginBottom: 5,
    color: "yellow",
    backgroundColor: '#1A237E',
    fontStyle: 'italic',
    fontWeight: 'bold',
    fontFamily: "French Script MT",
    marginRight: 20,
    marginLeft: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#d6d7da',
    textAlign: 'center',
    fontSize: 20
  },
})

export default App;

Output for Android Platform

 

 

Output for iOS Platform

 

 

Summary

 

FlatList component is very easy to use in React Native to create a list view. In this blog, that’s what I discussed. In my next blog, I will talk about the SectionList component.