{"id":5191,"date":"2020-11-09T20:21:19","date_gmt":"2020-11-09T20:21:19","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=5191"},"modified":"2020-11-12T07:52:54","modified_gmt":"2020-11-12T07:52:54","slug":"what-is-flatlist-and-how-to-use-flatlist-in-react-native","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/","title":{"rendered":"What is Flatlist and how to use Flatlist in React Native"},"content":{"rendered":"\n<p>React native is the most evolving technology nowadays. It provides many built-in components. One of the important and useful components is <strong><em>Flatlist<\/em><\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Flatlist:<\/strong><\/h4>\n\n\n\n<p>Flatlist is the easiest way to render a scrollable list of items. We just have to pass the data (as an array) without any formatting 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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Basic Props:<\/strong><\/h4>\n\n\n\n<p>The list can be rendered, horizontally and vertically with custom header, footer, and separator. The basic props of flatlist are:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>data<\/strong> \u2192 an array of objects (items) to be rendered<\/li><li><strong>renderItem<\/strong> \u2192 iterates over data and renders items<\/li><li><strong>horizontal \u2192 <\/strong>by default, list is rendered vertically. If this property is set to <em>true<\/em>, the list will render horizontally.<\/li><li><strong>extraData \u2192 <\/strong>if list is dependent on any property other than <em>data <\/em>prop then mention the property here. The list will re-render itself when this property will change.<\/li><li><strong>keyExtractor \u2192 <\/strong>specifies which property of object should be used as key<\/li><li><strong>ItemSeparatorComponent \u2192 <\/strong>renders component in between item as a separator, not on top (start) and bottom (end) of the list<\/li><li><strong>ListHeaderComponent<\/strong> \u2192 renders custom header component<\/li><li><strong>ListFooterComponent<\/strong> \u2192 renders custom footer component<\/li><li><strong>ListEmptyComponent \u2192 <\/strong>renders empty listview<\/li><\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>Here, below is a simple example of usage of flatlist in react native application which displays a list of employees in a software house.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, {Component} from 'react';\nimport {View, Text, FlatList, StyleSheet, TouchableOpacity} from 'react-native';\n \nexport default class FlatListComponent extends Component {\n constructor(props) {\n   super(props);\n \n   this.state = {\n     refresh: false,\n   };\n }\n \n componentDidMount() {\n   \/\/ this.makeRemoteRequest();\n }\n \n renderHeader = () => {\n   return (\n     &lt;View>\n       &lt;Text style={styles.header}>Employees&lt;\/Text>\n     &lt;\/View>\n   );\n };\n \n renderFooter = () => {\n   return (\n     &lt;View>\n       &lt;Text style={styles.footer}>End&lt;\/Text>\n     &lt;\/View>\n   );\n };\n \n emptyListView = () => {\n   return (\n     &lt;View>\n       &lt;Text>No records found.&lt;\/Text>\n     &lt;\/View>\n   );\n };\n \n renderSeparator = () => {\n   return &lt;View style={styles.itemSeparator}>&lt;\/View>;\n };\n \n onItemSelect = item => {\n   console.log('item', item);\n };\n \n render() {\n   let data = [\n     { id: 1, name: 'John Brahm', designation: 'Project Manager' },\n     { id: 2, name: 'Tom Jack', designation: 'Software Engineer' },\n     { id: 3, name: 'Mark Bell', designation: 'QA Engineer' },\n     { id: 4, name: 'Marshall Doe', designation: 'Software Engineer' },\n     { id: 5, name: 'John Dow', designation: 'Product Manager' },\n     { id: 6, name: 'Harry Jam', designation: 'Team Lead' },\n     { id: 7, name: 'Oliver James', designation: 'Graphic Designer' },\n     { id: 8, name: 'Ella Avery', designation: 'QA Engineer' },\n     { id: 9, name: 'William Thomas', designation: 'Graphic Designer' },\n     { id: 10, name: 'Edward Brian', designation: 'Team Lead' },\n   ];\n   return (\n     &lt;View style={styles.container}>\n       &lt;FlatList\n         data={data}\n         extraData={this.state}\n         keyExtractor={item => item.id}\n         ListHeaderComponent={this.renderHeader}\n         ListFooterComponent={this.renderFooter}\n         ListEmptyComponent={this.emptyListView}\n         ItemSeparatorComponent={this.renderSeparator}\n         renderItem={({item}) => {\n           return (\n             &lt;TouchableOpacity\n               onPress={() => {\n                 this.onItemSelect(item);\n               }}>\n               &lt;View style={styles.flatlist}>\n                 &lt;Text style={styles.heading2}>{item.name}&lt;\/Text>\n                 &lt;Text style={styles.subheading}>{item.designation}&lt;\/Text>\n               &lt;\/View>\n             &lt;\/TouchableOpacity>\n           );\n         }}\n       \/>\n     &lt;\/View>\n   );\n }\n}\n \nconst styles = StyleSheet.create({\n container: {\n   flex: 1,\n },\n header: {\n   fontSize: 30,\n   paddingVertical: 15,\n   fontWeight: 'bold',\n   textAlign: 'center',\n   backgroundColor: '#DCDCDC',\n },\n footer: {\n   fontSize: 30,\n   paddingVertical: 15,\n   fontWeight: 'bold',\n   textAlign: 'center',\n   backgroundColor: '#DCDCDC',\n },\n flatlist: {\n   paddingVertical: 30,\n   paddingHorizontal: 10,\n },\n heading2: {\n   fontSize: 18,\n },\n subheading: {\n   color: 'grey',\n },\n itemSeparator: {\n   backgroundColor: 'green',\n   height: 1,\n },\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/dxgtrruLVMZ_6Cy94UdgPAI-ykZnt9nT5JczQPhR7Y-26Ve5_jwodYZ2BG1JBJVOShUZ9tfp0_efYcc8e3LE0hks6wuYOs3bM4V-mVrekwzgVgyxPAPHZ8aSMiwtNoMRjMaKXadr\" alt=\"\" width=\"178\" height=\"368\"\/><\/figure><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Pull to Refresh:<\/strong><\/h4>\n\n\n\n<p>This feature is very important if we are going to work with lists. Users can see the latest data in the list by remaining on the same view. We have to add a <em>refreshControl <\/em>prop to the Flatlist component which calls the custom function to refresh the list. Make sure if you have not used Flatlist within ScrollView directly otherwise refreshControl will not work.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>refreshControl={\n           &lt;RefreshControl\n             refreshing={this.state.refreshing}\n             onRefresh={() => this.onRefreshList()}\n             title={'Fetching data...'}\n           \/>\n         }<\/code><\/pre>\n\n\n\n<p>And we have to create a callback function <em>onRefreshList <\/em>that will be called on the Pull to Refresh request.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>onRefreshList = () => {\n   this.setState({refreshing: true});\n   \/\/server call to update data object - here we are using hardcoded data\n   let updatedData = this.state.data;\n   updatedData.push({ id: 11, name: 'Marsh Ken', designation: 'Graphic Designer'});\n   this.setState({\n     refreshing: false,\n     data: updatedData\n   })\n };<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Output:<\/strong><\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/pMUZZ5HvZYK-D85grzDC8VH3HutatRv0h4zLnhAlpNjXB-WxkTLOM7aLti4XSBbhAwYcEDhwRoVpMPShrhOGBrA8FV91o87vZQgR7hbFB1BJe9n-Rrhp2MDYwLebVa55fTlmMkwv\" alt=\"\" width=\"157\" height=\"328\"\/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>React native is the most evolving technology nowadays. It provides many built-in components. One of the important and useful components is Flatlist. Flatlist: Flatlist is the easiest way to render a scrollable list of items. We just have to pass the data (as an array) without any formatting to it and it will render the &hellip; <a href=\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;What is Flatlist and how to use Flatlist in React Native&#8221;<\/span><\/a><\/p>\n","protected":false},"author":37,"featured_media":5215,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-5191","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is Flatlist, Best Way to Use Flatlist with React Native?<\/title>\n<meta name=\"description\" content=\"In this article you will find the complete details how to use Flatlist as well as how to\u00a0 use\u00a0Flatlist with React Native?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Flatlist, Best Way to Use Flatlist with React Native?\" \/>\n<meta property=\"og:description\" content=\"In this article you will find the complete details how to use Flatlist as well as how to\u00a0 use\u00a0Flatlist with React Native?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobile App Development Services\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-09T20:21:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T07:52:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/11\/Flatlist-in-React-Native.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1958\" \/>\n\t<meta property=\"og:image:height\" content=\"1074\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Noc Folio3\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noc Folio3\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/\"},\"author\":{\"name\":\"Noc Folio3\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\"},\"headline\":\"What is Flatlist and how to use Flatlist in React Native\",\"datePublished\":\"2020-11-09T20:21:19+00:00\",\"dateModified\":\"2020-11-12T07:52:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/\"},\"wordCount\":333,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/11\/Flatlist-in-React-Native.png\",\"articleSection\":[\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/\",\"name\":\"What is Flatlist, Best Way to Use Flatlist with React Native?\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/11\/Flatlist-in-React-Native.png\",\"datePublished\":\"2020-11-09T20:21:19+00:00\",\"dateModified\":\"2020-11-12T07:52:54+00:00\",\"description\":\"In this article you will find the complete details how to use Flatlist as well as how to\u00a0 use\u00a0Flatlist with React Native?\",\"breadcrumb\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#primaryimage\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/11\/Flatlist-in-React-Native.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/11\/Flatlist-in-React-Native.png\",\"width\":1958,\"height\":1074,\"caption\":\"Flatlist in React Native\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.folio3.com\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is Flatlist and how to use Flatlist in React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"name\":\"Mobile App Development Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\",\"name\":\"Mobile App Development Services\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"width\":210,\"height\":50,\"caption\":\"Mobile App Development Services\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\",\"name\":\"Noc Folio3\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"caption\":\"Noc Folio3\"},\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is Flatlist, Best Way to Use Flatlist with React Native?","description":"In this article you will find the complete details how to use Flatlist as well as how to\u00a0 use\u00a0Flatlist with React Native?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"What is Flatlist, Best Way to Use Flatlist with React Native?","og_description":"In this article you will find the complete details how to use Flatlist as well as how to\u00a0 use\u00a0Flatlist with React Native?","og_url":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/","og_site_name":"Mobile App Development Services","article_published_time":"2020-11-09T20:21:19+00:00","article_modified_time":"2020-11-12T07:52:54+00:00","og_image":[{"width":1958,"height":1074,"url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/11\/Flatlist-in-React-Native.png","type":"image\/png"}],"author":"Noc Folio3","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Noc Folio3","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#article","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/"},"author":{"name":"Noc Folio3","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb"},"headline":"What is Flatlist and how to use Flatlist in React Native","datePublished":"2020-11-09T20:21:19+00:00","dateModified":"2020-11-12T07:52:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/"},"wordCount":333,"commentCount":0,"publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/11\/Flatlist-in-React-Native.png","articleSection":["React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/","url":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/","name":"What is Flatlist, Best Way to Use Flatlist with React Native?","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#primaryimage"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/11\/Flatlist-in-React-Native.png","datePublished":"2020-11-09T20:21:19+00:00","dateModified":"2020-11-12T07:52:54+00:00","description":"In this article you will find the complete details how to use Flatlist as well as how to\u00a0 use\u00a0Flatlist with React Native?","breadcrumb":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#primaryimage","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/11\/Flatlist-in-React-Native.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/11\/Flatlist-in-React-Native.png","width":1958,"height":1074,"caption":"Flatlist in React Native"},{"@type":"BreadcrumbList","@id":"https:\/\/www.folio3.com\/mobile\/blog\/what-is-flatlist-and-how-to-use-flatlist-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.folio3.com\/mobile\/"},{"@type":"ListItem","position":2,"name":"What is Flatlist and how to use Flatlist in React Native"}]},{"@type":"WebSite","@id":"https:\/\/www.folio3.com\/mobile\/#website","url":"https:\/\/www.folio3.com\/mobile\/","name":"Mobile App Development Services","description":"","publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.folio3.com\/mobile\/#organization","name":"Mobile App Development Services","url":"https:\/\/www.folio3.com\/mobile\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","width":210,"height":50,"caption":"Mobile App Development Services"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb","name":"Noc Folio3","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","caption":"Noc Folio3"},"url":"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5191"}],"collection":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/comments?post=5191"}],"version-history":[{"count":2,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5191\/revisions"}],"predecessor-version":[{"id":5213,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5191\/revisions\/5213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media\/5215"}],"wp:attachment":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media?parent=5191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/categories?post=5191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/tags?post=5191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}