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.
  1. import { FlatList } from 'react-native';  
Code
  1. import React, { Component } from "react";  
  2. import {  
  3.   FlatList, Text, StyleSheet  
  4. } from 'react-native';  
  5.   
  6. const Cities = [  
  7.   { id: 101, name: 'Mumbai' }, { id: 102, name: 'New York' }, { id: 103, name: 'Los Angeles' }, { id: 104, name: 'Chicago' },  
  8.   { id: 105, name: 'Houston' }, { id: 106, name: 'Phoenix' }, { id: 107, name: 'Philadelphia' }, { id: 108, name: 'London' },  
  9.   { id: 109, name: 'Birmingham' }, { id: 110, name: 'Manchester' }, { id: 111, name: 'Bangkok' }, { id: 112, name: 'Paris' },  
  10. ];  
  11.   
  12.   
  13.   
  14. const extractKey = ({ id }) => id.toString()  
  15.   
  16. class App extends Component {  
  17.   renderItem = ({ item }) => {  
  18.     return (  
  19.       <Text style={styles.cityListStyle}>  
  20.         {item.name}  
  21.       </Text>  
  22.     )  
  23.   }  
  24.   
  25.   render() {  
  26.     return (  
  27.       <FlatList  
  28.         style={styles.container}  
  29.         data={Cities}  
  30.         renderItem={this.renderItem}  
  31.         keyExtractor={extractKey}  
  32.       />  
  33.     );  
  34.   }  
  35. }  
  36.   
  37. const styles = StyleSheet.create({  
  38.   container: {  
  39.     flex: 1,  
  40.   },  
  41.   cityListStyle: {  
  42.     padding: 15,  
  43.     marginBottom: 5,  
  44.     color: "yellow",  
  45.     backgroundColor: '#1A237E',  
  46.     fontStyle: 'italic',  
  47.     fontWeight: 'bold',  
  48.     fontFamily: "French Script MT",  
  49.     marginRight: 20,  
  50.     marginLeft: 20,  
  51.     borderRadius: 10,  
  52.     borderWidth: 1,  
  53.     borderColor: '#d6d7da',  
  54.     textAlign: 'center',  
  55.     fontSize: 20  
  56.   },  
  57. })  
  58.   
  59. 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.