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';
  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. ];
  14. const extractKey = ({ id }) => id.toString()
  16. class App extends Component {
  17. renderItem = ({ item }) => {
  18. return (
  19. <Text style={styles.cityListStyle}>
  20. {item.name}
  21. </Text>
  22. )
  23. }
  25. render() {
  26. return (
  27. <FlatList
  28. style={styles.container}
  29. data={Cities}
  30. renderItem={this.renderItem}
  31. keyExtractor={extractKey}
  32. />
  33. );
  34. }
  35. }
  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. })
  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.