{"id":6136,"date":"2021-05-20T22:17:23","date_gmt":"2021-05-20T19:17:23","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=6136"},"modified":"2024-03-15T12:41:15","modified_gmt":"2024-03-15T09:41:15","slug":"how-to-use-react-native-flatlist","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/","title":{"rendered":"How To Use React Native Flatlist [Guide]"},"content":{"rendered":"<p>How many apps have you seen that come with lists in them? These may be To-Do Apps, Apps with notes, Email Apps, Social Apps with lists of contacts, users, news, some highly specialized apps for the financial sphere with <a href=\"https:\/\/coindataflow.com\/en\/stocks\">stock prices <\/a>and real estate worth value, and so on. <\/p><p><br>The ubiquity of lists in applications, from shopping lists in note apps to more complex data displays in <a href=\"https:\/\/flatlogic.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">business software<\/a>, underscores their fundamental role in organizing and presenting information in a clear, accessible manner, essential for user experience and functionality.<\/p><p>JavaScript offers a <em><code>map<\/code><\/em> function to build a list, since React.js is JavaScript-based the way to work with lists is similar. On the other hand, <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2018\/09\/rns-600x450.png\"  data-excerpt=\"There is an entire market of web templates both free and premium. You must already know about it from websites like ThemeForest and Wrapbootstrap. There are also lots of free templates available in Github built with various front-end frameworks like Angular, React and Vue. Since last few years, and especially after React Native launching, we&hellip;\" href=\"https:\/\/flatlogic.com\/blog\/react-native-mobile-bootstrap-web\/\">React Native<\/a> is supposed to render native elements both for Android and iOS, so it has a different way of building lists. The most generic option to display a scrolling list of data in React Native was using <em><code>ScrollView<\/code><\/em>. Today two options are available to represent lists of data: <em><code>FlatList<\/code><\/em> and <code><em>SectionList<\/em>.<\/code> <\/p><p><a href=\"https:\/\/reactnative.dev\/\">React Native<\/a> accelerates the process of building apps across different platforms, thanks to the possibility of reusing most of the code between them. <em><code>FlatList<\/code><\/em> is a component that looks great both on iOS and Android. Let&#8217;s get to know it better.&nbsp; &nbsp;<\/p><p><iframe data-src=\"\/\/www.slideshare.net\/slideshow\/embed_code\/key\/skmIWQjCTMOIfS\" width=\"594\" height=\"397\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:0px solid #CCC; border-width:0px; margin-bottom:0px; max-width: 100%;\" allowfullscreen=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"> <\/iframe><\/p><p><\/p><h2 class=\"wp-block-heading\" id=\"one\"><strong>Basics of React Native Flatlist<\/strong><\/h2><p><em><code>FlatList<\/code><\/em> is a component responsible for the display of a list with similar data objects. The display of every element has an identical format and uses a common stylesheet. The data goes in a structured and scrollable manner.&nbsp;<\/p><p><a href=\"https:\/\/reactnative.dev\/docs\/flatlist\">FlatList <\/a>uses <em><code>ScrollView<\/code><\/em> component to render elements, however, it comes without pure performance issues of <em><code>ScrollView<\/code><\/em> and with some additional features out of the box that allow us to build a better UI and make the development process easier. <\/p><p>The <em><code>FlatList<\/code><\/em> component comes into play when you need to display a long scrollable list of items.&nbsp; <a href=\"https:\/\/flatlogic.com\/generator\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png\" alt=\"Professional Vibe Coding\" class=\"banner-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/640;\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png 2560w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-600x150.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1024x256.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-768x192.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1536x384.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-2048x512.png 2048w\" data-sizes=\"auto\" data-original-sizes=\"(max-width: 2560px) 100vw, 2560px\"> <\/a><\/p><p>There are two required props for <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/09\/top-articles-copy-600x450.png\"  data-excerpt=\"Here is our list of JS articles of 2019. We collected 17 posts with tricks and tips in JavaScript and its frameworks.\" href=\"https:\/\/flatlogic.com\/blog\/17-articles-of-september-2019-to-learn-javascript\/\">React<\/a> Native <em><code>FlatList<\/code><\/em> component &#8211; <em><code>data<\/code><\/em> and <em><code>renderItem<\/code><\/em>.&nbsp;<\/p><p>The <em><code>data<\/code><\/em> prop is the data that is displayed in the <em><code>FlatList<\/code><\/em> component. The type of data can be any from starting an array of numbers to an array filled with JSON objects that you fetched through API.&nbsp;<\/p><p>The <em><code>renderItem<\/code><\/em> prop is a function that takes every item object from the <em><code>data<\/code><\/em> prop and renders them into the list component. If you want your data to display with special styling, you can do this within the <em><code>renderItem<\/code><\/em> or refer to the method through the <em><code>renderItem<\/code><\/em> the prop that creates styling for you (an example: <code><em>renderItem<\/em>={<em>this.RenderStyling<\/em>})<\/code>. <\/p><p>There are a bunch of optional props that can be helpful in development. You can find a full list of them in the <a href=\"https:\/\/reactnative.dev\/docs\/flatlist#reference\">official documentation<\/a>, we mention some of them we are going to use further in the article.&nbsp;<\/p><p><strong>The list of props<\/strong> :<\/p><ul class=\"wp-block-list\"><li><em><code>ItemSeparatorComopnent<\/code><\/em> renders an element between each item and serves for visual separation of items in the list. It isn&#8217;t rendered at the top and the bottom of the list. <\/li><li><code><em>KeyExtractor<\/em> <\/code>is a function that uses unique keys of items from the data to track updates and only re-render the items that have been changed. This keyExtractor is a custom implementation of the filed named key in a data item. It is also used to track the reordering of the items. <\/li><li>ListHeaderComponent is an element that renders at the top of the list. It is mostly used to add a search line at the beginning of the list. <\/li><li>ListFooterComponent is a component that is rendered at the bottom of the list. <\/li><li>Pull to refresh is implemented by using onRefresh and refreshing props. <\/li><li>Infinite Scroll is implemented by using onEndReached and onEndReachedThreshold props. They allow to rendering of items from the next page in the list and implement lazy loading. <\/li><li><em><code>initialNumToRender<\/code><\/em> prop sets the initial amount of items to render. It&#8217;s used to boost the speed of the first render. <\/li><\/ul><p>The alternative <em><code>FlatList<\/code><\/em> is a <code><em>SectionList<\/em> <\/code>component. <a href=\"https:\/\/reactnative.dev\/docs\/sectionlist\">SectionList<\/a> has recently appeared and is used to add a list of sections with headings for every group of items in the list. It may be useful only if need headings and items in the list are divided into logical groups, otherwise use <em><code>FlatList<\/code><\/em>. <\/p><h2 class=\"wp-block-heading\" id=\"two\"><strong>Why React Native Flatlist is great?<\/strong><\/h2><p>There are some benefits <code><em>FlatList<\/em> <\/code>has:<\/p><ul class=\"wp-block-list\"><li>The function renders <strong>native blocks<\/strong> exactly <strong>for mobile platforms<\/strong>.&nbsp;<\/li><li><code><em>FlatList<\/em> <\/code><strong>doesn&#8217;t require a lot of code<\/strong>. It needs only two props to start and you don&#8217;t have to make a fancy style to render the list of items &#8211; just use <em><code>renderItem<\/code><\/em> props and you are good to go.&nbsp;<\/li><li><em><code>FlatList<\/code><\/em> is <strong>great for performance<\/strong> especially when you deal with a large array and you don&#8217;t know the exact number of the items that will render in one list. Displaying large data sets during one render is bad for performance, and React Native <code><em>FlatList<\/em> <\/code>only renders elements that are visible on the screen and only updates items that have been changed.<\/li><\/ul><h2 class=\"wp-block-heading\" id=\"three\"><strong>How to implement React Native FlatList<\/strong><\/h2><p>The full code with the final result you can find here:<\/p><div style=\"overflow: hidden; background: #212733; border: 1px solid rgba(0,0,0,.08); border-radius: 4px; height: 505px; width: 100%;\" data-snack-id=\"justexample\" data-snack-platform=\"ios\" data-snack-preview=\"true\" data-snack-theme=\"white\"><iframe src=\"https:\/\/snack.expo.io\/embedded\/@polarnit\/flatlistexample?iframeId=1TuZyGvLQ &amp;preview=true&amp;platform=web&amp;theme=white\" height=\"100%\" width=\"100%\" frameborder=\"0\" data-snack-iframe=\"true\" style=\"display: block;\"><\/iframe><\/div><p><strong>Let&#8217;s look at how we get that result step by step.<\/strong><\/p><p>Start with importing all the necessary staff we have mentioned in the previous chapter. We need <em>React<\/em> and some methods from <em>react<\/em>&#8211;<em>native<\/em>.&nbsp;<\/p><pre class=\"wp-block-code\"><code>import&nbsp;React&nbsp;from&nbsp;'react';import&nbsp;{&nbsp;StyleSheet,&nbsp;Text,&nbsp;View,&nbsp;SafeAreaView,&nbsp;FlatList,&nbsp;Platform,&nbsp;SafeAreaProvider}&nbsp;from&nbsp;\"react-native\"; <\/code><\/pre><p>Consider that you have <strong>a data<\/strong> array with Marvel heroes, where every hero has its unique serial id (these numbers are just serial keys and don&#8217;t imply the ranking of heroes).&nbsp;<\/p><pre class=\"wp-block-code\"><code>const&nbsp;MarvelList&nbsp;=&nbsp;&#91;&nbsp;&nbsp;{id:&nbsp;1,&nbsp;name:&nbsp;'Black&nbsp;Panter'},&nbsp;&nbsp;{id:&nbsp;2,&nbsp;name:&nbsp;'Black&nbsp;Widow'},&nbsp;&nbsp;{id:&nbsp;3,&nbsp;name:&nbsp;'Captain&nbsp;America'},&nbsp;&nbsp;{id:&nbsp;4,&nbsp;name:&nbsp;'The&nbsp;Collector'},&nbsp;&nbsp;{id:&nbsp;5,&nbsp;name:&nbsp;'Doctor&nbsp;Strange'},&nbsp;&nbsp;{id:&nbsp;6,&nbsp;name:&nbsp;'Hawkeye'},&nbsp;&nbsp;{id:&nbsp;7,&nbsp;name:&nbsp;'Heimdall'},&nbsp;&nbsp;{id:&nbsp;8,&nbsp;name:&nbsp;'Hela'},&nbsp;&nbsp;{id:&nbsp;9,&nbsp;name:&nbsp;'Hulk'},&nbsp;&nbsp;{id:&nbsp;10,&nbsp;name:&nbsp;'Iron&nbsp;Man'},&nbsp;&nbsp;{id:&nbsp;11,&nbsp;name:&nbsp;'Loki'},&nbsp;&nbsp;{id:&nbsp;12,&nbsp;name:&nbsp;'Nick&nbsp;Fury'},&nbsp;&nbsp;{id:&nbsp;13,&nbsp;name:&nbsp;'Falcon'},&nbsp;&nbsp;{id:&nbsp;14,&nbsp;name:&nbsp;'Wanda&nbsp;Maximoff'},&nbsp;&nbsp;{id:&nbsp;15,&nbsp;name:&nbsp;'Shocker'},&nbsp;&nbsp;{id:&nbsp;16,&nbsp;name:&nbsp;'Spider-Man'},&nbsp;&nbsp;{id:&nbsp;17,&nbsp;name:&nbsp;'Thanos'},&nbsp;&nbsp;{id:&nbsp;18,&nbsp;name:&nbsp;'Thor'},&nbsp;&nbsp;{id:&nbsp;19,&nbsp;name:&nbsp;'Valkyrie'},&nbsp;&nbsp;{id:&nbsp;20,&nbsp;name:&nbsp;'Vision'},&nbsp;&nbsp;{id:&nbsp;21,&nbsp;name:&nbsp;'Vulture'},&nbsp;&nbsp;{id:&nbsp;22,&nbsp;name:&nbsp;'War&nbsp;Machine'},&nbsp;&nbsp;{id:&nbsp;23,&nbsp;name:&nbsp;'Winter&nbsp;Solder'},&nbsp;&nbsp;];<\/code><\/pre><p>That array will become the first required props of the React Native <em><code>FlatList<\/code><\/em>.&nbsp;<\/p><p>Now, to render the list, we <strong>create a component<\/strong> called&nbsp;<em><code>Marvel<\/code><\/em> and declare a style for our future list so the scroll would not intersect with the future header:<\/p><pre class=\"wp-block-code\"><code>const&nbsp;Marvel&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;SafeAreaView&nbsp;style={styles.separateHero}&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/SafeAreaView&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)&nbsp;&nbsp;&nbsp;&nbsp;}const&nbsp;styles&nbsp;=&nbsp;StyleSheet.create({&nbsp;&nbsp;separateHero:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;'100vh'&nbsp;},});export&nbsp;default&nbsp;Marvel<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"four\">Use <em>FlatList<\/em><\/h3><p>Then <code>use<em>FlatList<\/em><\/code>&nbsp;component from&nbsp;<em><code>react-native<\/code><\/em>&nbsp;to display the list of Marvel Heroes. We pass the array of data with Marvel heroes via the <em><code>data<\/code><\/em> prop. And then use <em><code>renderItem<\/code><\/em> prop to render the content. The <em><code>renderItem<\/code><\/em> function gets heroes&#8217; names from the array and renders a list component with all names from our array. To turn that into life we need to declare a <em><code>renderItem<\/code><\/em> function that would be passed as the second required prop to <em><code>FlatList<\/code><\/em>.&nbsp;<\/p><pre class=\"wp-block-code\"><code>Import...const&nbsp;renderItem&nbsp;=&nbsp;({item})&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;return&nbsp;&lt;View&gt;&lt;Text&gt;{item.name}&lt;\/Text&gt;&lt;\/View&gt;}const&nbsp;Marvel&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;SafeAreaView&nbsp;style={styles.separateHero}&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;FlatList&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data={MarvelList}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;renderItem={renderItem}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/SafeAreaView&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)}export&nbsp;default&nbsp;Marvel<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"five\">ItemSeparatorComponent<\/h3><p>Add a line between list items to separate them. Use <em><code>ItemSeparatorComponent<\/code><\/em> prop to add a line between list items that is a view component with a special &#8216;separator&#8217; class in the stylesheet.&nbsp; We also include a new prop in the <code><em>Flatlist<\/em> <\/code>component called <em><code>ItemSeparatorComponent<\/code><\/em>.&nbsp;<\/p><pre class=\"wp-block-code\"><code>Import...const&nbsp;Marvel&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;SafeAreaView&nbsp;style={styles.separateHero}&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;FlatList...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ItemSeparatorComponent={&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Platform.OS&nbsp;!==&nbsp;'android'&nbsp;&amp;&amp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(({&nbsp;highlighted&nbsp;})&nbsp;=&gt;&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;View&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;style={&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;styles.separator&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}... \/&gt;const&nbsp;styles&nbsp;=&nbsp;StyleSheet.create({&nbsp;&nbsp;separator:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;1,&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;\"100%\",&nbsp;&nbsp;&nbsp;&nbsp;backgroundColor:&nbsp;'#ff0000',&nbsp;&nbsp;}});<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"six\">KeyExtractor<\/h3><p>There are unique identifiers for every hero within <em><code>FlatList<\/code><\/em>. The IDs must be string type, not number.&nbsp;<\/p><p>To use them we create a function <em><code>MyKeyExtractor<\/code><\/em> that extracts a unique key of every element from the <code><em>MarvelList<\/em> <\/code>array, by which <em><code>FlatList<\/code><\/em> can update these elements most effectively, for example, when you delete one element somewhere in the middle of the list.&nbsp;<\/p><p>In the <em><code>Flatlist<\/code><\/em> component we write an additional line of code that calls <em><code>keyExtractor<\/code><\/em> props.&nbsp;<\/p><pre class=\"wp-block-code\"><code>Import...const&nbsp;myKeyExtractor&nbsp;=&nbsp;(item)&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;return&nbsp;item.id}const&nbsp;Marvel&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;SafeAreaView&nbsp;style={styles.separateHero}&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;FlatList...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;keyExtractor={myKeyExtractor}... \/&gt;export&nbsp;default&nbsp;Marvel<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"seven\">Header<\/h3><p>It is a component at the top of the list. The sequence of steps to add a header is the same as adding the separator.&nbsp;<\/p><p>We define a function <em><code>renderHeader<\/code><\/em> that renders the interface of the header we need. And then pass the function for rendering to React Native <em><code>FlatList<\/code><\/em> component as a <em><code>Header<\/code><\/em>. Besides this way, you can header by using <em><code>ListHeaderComponent<\/code><\/em> prop and with the help of the <a href=\"https:\/\/flatlogic.com\/blog\/functional-components-vs-class-components-in-react-js\/\">state<\/a>.&nbsp; Additionally, in the stylesheet we define two new styles for the whole header and text inside it.&nbsp;<\/p><pre class=\"wp-block-code\"><code>Import...const&nbsp;Header&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;return&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&lt;View&nbsp;style={styles.header}&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Text&nbsp;style={styles.headerText}&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Marvel&nbsp;list&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/Text&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/View&gt;&nbsp;&nbsp;)}const&nbsp;Marvel&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;SafeAreaView&nbsp;style={styles.separateHero}&gt; &lt;Header&nbsp;\/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;FlatList... \/&gt;const&nbsp;styles&nbsp;=&nbsp;StyleSheet.create({&nbsp;&nbsp;&nbsp;&nbsp;header:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backgroundColor:&nbsp;'red',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;'100vw',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;45,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;justifyContent:&nbsp;'center',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alignItems:&nbsp;'center',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;marginBottom:&nbsp;20&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;headerText:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;'#fff',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fontSize:&nbsp;18&nbsp;&nbsp;&nbsp;&nbsp;},});export&nbsp;default&nbsp;Marvel<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"eight\">Footer<\/h3><p>To add a footer you need to do the same steps that you made with the header. We add a footer component, write two more classes in the stylesheet for the footer and the text for it, then add our <em><code>Footer<\/code><\/em> to the <code><em>Marvel<\/em> <\/code>component. An alternative to adding the footer is to use <em><code>listFooterComponent<\/code><\/em>.&nbsp;<\/p><pre class=\"wp-block-code\"><code>Import...const&nbsp;Footer&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;return&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&lt;View&nbsp;style={styles.footer}&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Text&nbsp;style={styles.footerText}&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Thanks&nbsp;for&nbsp;reading!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/Text&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/View&gt;&nbsp;&nbsp;)}const&nbsp;Marvel&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;SafeAreaView&nbsp;style={styles.separateHero}&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;FlatList... \/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Footer&nbsp;\/&gt;const&nbsp;styles&nbsp;=&nbsp;StyleSheet.create({&nbsp;&nbsp;&nbsp;&nbsp;footer:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;backgroundColor:&nbsp;'white',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;'100vw',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;45,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;justifyContent:&nbsp;'center',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alignItems:&nbsp;'center',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;0&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;footerText:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;'#000',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fontSize:&nbsp;18&nbsp;&nbsp;&nbsp;&nbsp;}});export&nbsp;default&nbsp;Marvel<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"nine\">Pull to refresh<\/h3><p>To add pull to refresh two props are required &#8211; <em><code>refreshing<\/code><\/em> and <em><code>onRefresh<\/code><\/em>. The first prop is an indicator of the type of boolean that tracks whether the view should be updated or not. <code><em>onRefresh<\/em> <\/code>is a function responsible for loading new data and updating the items in <code><em>FlatList<\/em>.<\/code> <em><code>onRefresh<\/code><\/em> comes into play when the refreshing prop is set to true.&nbsp;<\/p><p>To implement the pull to refresh option we need to use the <code><em>useState<\/em> <\/code><a href=\"https:\/\/reactjs.org\/docs\/hooks-state.html\">hook<\/a> and declare the <code><em>handleRefresh<\/em> <\/code>function that updates the state of the component. Then add <em><code>handleRefresh<\/code><\/em> function in <code><em>FlatList<\/em> <\/code>component.&nbsp;<\/p><pre class=\"wp-block-code\"><code>Import...const&nbsp;Marvel&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{const&nbsp;&#91;refreshing,&nbsp;setRefreshing]&nbsp;=&nbsp;React.useState(false)&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;handleRefresh&nbsp;=&nbsp;()&nbsp;=&gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setRefreshing(prevState&nbsp;=&gt;&nbsp;!prevState)&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;SafeAreaView&nbsp;style={styles.separateHero}&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;FlatList... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onRefresh={handleRefresh}\/&gt;export&nbsp;default&nbsp;Marvel<\/code><\/pre><h2 class=\"wp-block-heading\" id=\"ten\">Examples of React Native FlatLists<\/h2><h3 class=\"wp-block-heading\" id=\"eleven\">Facebook&nbsp;<\/h3><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1000\" height=\"700\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2447hh.png\" alt=\"React Native Flatlist facebook\" class=\"wp-image-6168 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2447hh.png 1000w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2447hh-600x420.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2447hh-768x538.png 768w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/700;\" data-original-sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure><p>Facebook team has developed the <a href=\"https:\/\/github.com\/facebook\/react-native\">React Native<\/a>, so there is nothing strange they have used this technology in Facebook app development. Facebook is the most popular social network worldwide with <a href=\"https:\/\/www.statista.com\/statistics\/272014\/global-social-networks-ranked-by-number-of-users\/\">2,7 billion<\/a> monthly active users. Social networks belong to that type of app where lists are extremely demanded. Since the number of users is very high and the app generates millions of gigabytes of data every month, the app has to perform great to provide fast rendering. And if you are a user of Facebook app you may have noticed that your list of contacts works fast.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"twelve\">Instagram<\/h3><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1000\" height=\"700\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2449hhkh.png\" alt=\"React Native Flatlist instagram\" class=\"wp-image-6170 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2449hhkh.png 1000w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2449hhkh-600x420.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2449hhkh-768x538.png 768w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/700;\" data-original-sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure><p>Instagram is the most popular photo and video-sharing app with <a href=\"https:\/\/www.statista.com\/statistics\/272014\/global-social-networks-ranked-by-number-of-users\/\">1,2 billion<\/a> monthly active users. The app was released on market on April 3, 2012, and then Facebook acquired it on April 9 the same year. All further development was carried out by the Facebook team. React Native technology showed its strengths again, so today Instagram has grown to the fifth-biggest social media platform worldwide. It unites people from all over the world from small businesses to big ones, news organizations to cultural institutions, celebrities, photographers, and musicians.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"thirteen\">Facebook Ads Manager<\/h3><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1000\" height=\"700\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2448jhhh.png\" alt=\"React Native Flatlist facebook ads manager\" class=\"wp-image-6169 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2448jhhh.png 1000w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2448jhhh-600x420.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2448jhhh-768x538.png 768w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/700;\" data-original-sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure><p>Facebook Ads Manager is a business tool to <a href=\"https:\/\/photoadking.com\/design\/facebook-ads\/\">create Facebook ads<\/a> and manage them. Since Facebook is the most popular social media platform, it became a very huge digital advertising platform. Here Facebook Ads manager comes to play, it allows to manage Facebook and Instagram ads: upload them, set budgets, monitor results. All these opportunities are collected inside a small React Native-based app.<\/p><h3 class=\"wp-block-heading\" id=\"fourteen\">Shopify<\/h3><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1000\" height=\"700\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2450hhjgcer.png\" alt=\"React Native Flatlist shopify\" class=\"wp-image-6176 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2450hhjgcer.png 1000w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2450hhjgcer-600x420.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2450hhjgcer-768x538.png 768w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/700;\" data-original-sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure><p><a href=\"https:\/\/shopify.engineering\/react-native-future-mobile-shopify\">Shopify<\/a> is a subscription-based software that allows anyone to set up an online store and sell their products. Shopify is just a store builder or a tool to sell your products with over 1 million Shopify users. The team of developers chose to work with React far away in 2018 when they rewrite their app <a href=\"https:\/\/shopify.engineering\/react-native-future-mobile-shopify.html#:~:text=At%20the%20end%20of%202018,%20into%20Arrive%20in%20a%20future%20blog%20post\">Arrive<\/a> and developed <a href=\"https:\/\/shop.app\/\">Shop App<\/a>. They continued that acquaintance with React Native and are consistently embedding React Native in their apps.&nbsp; <\/p><h2 class=\"wp-block-heading\" id=\"fifteen\"><strong>Conclusion&nbsp;<\/strong><\/h2><p>We have built a list of Marvel heroes in this article using React Native Flatlist. If you want to learn more about that component we highly recommend referring to the official documentation and real examples like the one we made. Hope the article was helpful, thanks for reading. &nbsp;<\/p><h3 class=\"wp-block-heading\"><strong>Do You Want to Learn More About React Native?<\/strong><\/h3><ul class=\"wp-block-list\"><li><a href=\"https:\/\/flatlogic.com\/blog\/react-native-vs-ionic-what-cross-platform-framework-is-the-best\/\">React Native vs. Ionic: What Cross-Platform Framework is the Best?<\/a><\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/how-to-create-react-native-airbnb-like-app\/\">How To Create React Native Airbnb-Like App<\/a><\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/top-react-native-ui-components-kits\/\">Top React Native UI Component Kits<\/a><\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/react-native-vs-flutter-the-key-differences-every-mobile-app-developer-should-know\/\">React Native VS Flutter: The Key Differences Every Mobile App Developer Should Know in 2021<\/a><\/li><\/ul>","protected":false},"excerpt":{"rendered":"<p>How many apps have you seen that come with lists in them? That may be To-Do Apps, Apps with notes, Email Apps, social Apps with lists of contacts, users, news, some highly specialized apps for the financial sphere with stock prices and real estate worth value, and so on. <\/p>\n","protected":false},"author":13,"featured_media":6146,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"flatlogic_tldr":"FlatList renders long, scrollable lists efficiently by virtualizing only visible items.\nRequires data and renderItem; supports ItemSeparatorComponent, header\/footer, keyExtractor.\nAdd pull-to-refresh with refreshing\/onRefresh and infinite scroll via onEndReached settings.\ninitialNumToRender speeds first paint; use SectionList for grouped lists with headers.","flatlogic_facts":[{"text":"FlatList requires data and renderItem props to render a list.","source":"https:\/\/reactnative.dev\/docs\/flatlist"},{"text":"Pull to refresh is implemented with refreshing and onRefresh props.","source":"https:\/\/reactnative.dev\/docs\/flatlist"},{"text":"Infinite scroll uses onEndReached and onEndReachedThreshold props.","source":"https:\/\/reactnative.dev\/docs\/flatlist"},{"text":"Facebook has 2.7 billion monthly active users.","source":"https:\/\/www.statista.com\/statistics\/272014\/global-social-networks-ranked-by-number-of-users\/"},{"text":"Instagram has 1.2 billion monthly active users.","source":"https:\/\/www.statista.com\/statistics\/272014\/global-social-networks-ranked-by-number-of-users\/"}],"footnotes":""},"categories":[28],"tags":[523,22,481,102],"class_list":["post-6136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","tag-react-hooks","tag-react-native","tag-react-native-components","tag-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Use React Native Flatlist [Guide] - Flatlogic Blog<\/title>\n<meta name=\"description\" content=\"How many apps have you seen that come with lists? In this article you can find all the information about React Native FlatList.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Use React Native Flatlist [Guide]\" \/>\n<meta property=\"og:description\" content=\"How many apps have you seen that come with lists? In this article you can find all the information about React Native FlatList.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/\" \/>\n<meta property=\"og:site_name\" content=\"Flatlogic Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flatlogic\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-20T19:17:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-15T09:41:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2445sadg.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1044\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alexander Rubanau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2445sadg.png\" \/>\n<meta name=\"twitter:creator\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:site\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexander Rubanau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Use React Native Flatlist [Guide] - Flatlogic Blog","description":"How many apps have you seen that come with lists? In this article you can find all the information about React Native FlatList.","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:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/","og_locale":"en_US","og_type":"article","og_title":"How To Use React Native Flatlist [Guide]","og_description":"How many apps have you seen that come with lists? In this article you can find all the information about React Native FlatList.","og_url":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/","og_site_name":"Flatlogic Blog","article_publisher":"https:\/\/www.facebook.com\/flatlogic","article_published_time":"2021-05-20T19:17:23+00:00","article_modified_time":"2024-03-15T09:41:15+00:00","og_image":[{"width":2000,"height":1044,"url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2445sadg.png","type":"image\/png"}],"author":"Alexander Rubanau","twitter_card":"summary_large_image","twitter_image":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2445sadg.png","twitter_creator":"@flatlogic","twitter_site":"@flatlogic","twitter_misc":{"Written by":"Alexander Rubanau","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/#article","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/"},"author":{"name":"Alexander Rubanau","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/fe11946e6132bd7996319a70e21dc189"},"headline":"How To Use React Native Flatlist [Guide]","datePublished":"2021-05-20T19:17:23+00:00","dateModified":"2024-03-15T09:41:15+00:00","mainEntityOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/"},"wordCount":1780,"publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2381tsue.png","keywords":["React Hooks","React Native","React Native Components","Tutorial"],"articleSection":["Guides"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/","url":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/","name":"How To Use React Native Flatlist [Guide] - Flatlogic Blog","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/#primaryimage"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2381tsue.png","datePublished":"2021-05-20T19:17:23+00:00","dateModified":"2024-03-15T09:41:15+00:00","description":"How many apps have you seen that come with lists? In this article you can find all the information about React Native FlatList.","breadcrumb":{"@id":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/#primaryimage","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2381tsue.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2021\/05\/Frame-2381tsue.png","width":1600,"height":1200},{"@type":"BreadcrumbList","@id":"https:\/\/flatlogic.com\/blog\/how-to-use-react-native-flatlist\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flatlogic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Use React Native Flatlist [Guide]"}]},{"@type":"WebSite","@id":"https:\/\/flatlogic.com\/blog\/#website","url":"https:\/\/flatlogic.com\/blog\/","name":"Flatlogic Blog","description":"Vibe-coding, AI Agents, Professional Software Development Services, Case Studies and More","publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"alternateName":"Flatlogic Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flatlogic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/flatlogic.com\/blog\/#organization","name":"Flatlogic","url":"https:\/\/flatlogic.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","width":970,"height":257,"caption":"Flatlogic"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flatlogic","https:\/\/x.com\/flatlogic","https:\/\/www.instagram.com\/flatlogiccom\/","https:\/\/www.linkedin.com\/company\/flatlogic\/"]},{"@type":"Person","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/fe11946e6132bd7996319a70e21dc189","name":"Alexander Rubanau","sameAs":["At Flatlogic, Alexander is deeply involved in the issues of enhancing and maintaining Flatlogic marketplace products and web app builder. He also supervises the state of Flatlogic marketplace products. Alexander is an experienced front-end developer; part-time programming lecturer; and deserves the title of software quality fanatic. Outside his working hours, he is a photographer, video maker and a dedicated father of two lively kids!"],"url":"https:\/\/flatlogic.com\/blog\/author\/alexsandr\/"}]}},"_links":{"self":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/6136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/comments?post=6136"}],"version-history":[{"count":23,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/6136\/revisions"}],"predecessor-version":[{"id":15366,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/6136\/revisions\/15366"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media\/6146"}],"wp:attachment":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media?parent=6136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/categories?post=6136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/tags?post=6136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}