React Native Flatlist

This is the Article which tells about rendering list of data using Flatlist.

What is Flatlist ?

Basically, Flatlist is the specialized component to render(display) a scrollable list of items. We just have to pass the data (as an array) to it and it will render the items. Flatlist works efficiently with large data as it renders only those items that are displaying on the screen, and not all the items at once.

Photo by Sigmund on Unsplash

Primary Props -

• data → an array of objects (items) to be rendered
• renderItem → iterates over data and renders items

Get Jahnavi Sananse’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Optional Props -

• keyExtractor → specifies which property of object should be used as key
• horizontal → by default, list is rendered vertically. If this property is set to true, the list will render horizontally.
• extraData → if list is dependent on any property other than data prop then mention the property here. The list will re-render itself when this property will change.
• ItemSeparatorComponent → renders component in between item as a separator, not on top (start) and bottom (end) of the list
• ListHeaderComponent → renders custom header component
• ListFooterComponent → renders custom footer component
• ListEmptyComponent → renders empty listview

import React from 'react';
import {SafeAreaView, View, FlatList, StyleSheet, Text} from 'react-native';
const data = [
  {
    id: 1,
    name: 'Odell Beckham Jr',
  },
  {
    id: 2,
    name: 'Victoria Beckham',
  },
  {
    id: 3,
    name: 'Marry Jane Odell',
  },
  {
    id: 4,
    name: 'David Backham',
  },
];
const Item = ({title}) => (
   <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
   </View> );
const FlatlistDemo = () => {
  const renderItem = ({item}) => <Item title={item.name} />;
  return (
     <SafeAreaView style={styles.container}>
     <FlatList
         data={data}
         renderItem={renderItem}
         keyExtractor={item => item.id}
     />
     </SafeAreaView>
    );
  };
const styles = StyleSheet.create({
   container:{
       flex: 1,
     },
   item: {
       backgroundColor: 'yellow',
       padding: 20,
       marginVertical: 8,
       marginHorizontal: 16,
     },
   title: {
       fontSize: 25,
     },
});
export default FlatlistDemo;