{"id":7083,"date":"2021-12-16T12:55:51","date_gmt":"2021-12-16T07:25:51","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=7083"},"modified":"2023-01-20T18:54:55","modified_gmt":"2023-01-20T13:24:55","slug":"flatlist-vs-scrollview-in-react-native","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/","title":{"rendered":"FlatList vs ScrollView in React Native"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">In this article we talk about one of the most important topics is flat list and scroll view which comes, under-react native. Firstly we discuss is flat lists all we know is that a flat list is used for rendering so much data in our component. With the help of a flat list, similar data can easily show our mobile application. In flat list have different props but there are two required props in the flat list are- data and render items. And if we use a flat list so we import at the top of our react component then we can use it easily. If you have a large array of data so flat list can be easily deal with large data and only render items that can be visible on the screen.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">FlatList Syntax:-<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;FlatList\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data={}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0renderItem={}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">Data props can be starting from an array of numbers they can fill with JSON objects and they are fetched through our rest API.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Render props basically is a function that accepts every item &amp; object from the source array(data props)and renders the data into our component.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">How to implement a flat list in our code:-<\/span><\/p>\n<p><span style=\"font-weight: 400;\">import React\u00a0 from<\/span><\/p>\n<pre class=\"lang:default decode:true \">'react';\r\n\r\nimport{Text,View,FlatList,StyleSheet} from 'react-native';\r\n\r\nconst cityData = [\r\n\r\n\u00a0\u00a0{\r\n\r\n\u00a0\u00a0\u00a0\u00a0id:\"1\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0city:\"Gwalior\"\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0{<\/pre>\n<pre class=\"lang:default decode:true\">id:\"2\",\r\n\r\n\r\n\u00a0\u00a0\u00a0\u00a0city:\"Bhopal\"\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0{\r\n\r\n\u00a0\u00a0\u00a0\u00a0id:\"3\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0city:\"Agra\"\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0{<\/pre>\n<pre class=\"lang:default decode:true \">\u00a0\u00a0\u00a0\u00a0id:\"4\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0city:\"Noida\"\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0\u00a0{\r\n\r\n\u00a0\u00a0\u00a0\u00a0id:\"5\",\r\n\r\n\u00a0\u00a0\u00a0city:\"Delhi\"\r\n\r\n\u00a0\u00a0},\r\n\r\n\u00a0];\r\n\r\n\r\n\r\n\r\nconst Item = ({city}) =&gt; {\r\n\r\n\u00a0\u00a0return(\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text&gt;{city}&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0);\r\n\r\n}<\/pre>\n<pre class=\"lang:default decode:true\">export default function App() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\r\n\r\nconst renderItem = ({item})=&gt;(\u00a0\r\n\r\n\u00a0\u00a0&lt;Item title={item.city}\/&gt;\r\n\r\n);\r\n\r\nreturn (\r\n\r\n\u00a0\u00a0&lt;View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;FlatList\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data={cityData}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0renderItem={renderItem}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0keyExtractor={item =&gt; item.id}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0);\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">Scrollview:-Scrollview component is worked as a flat list component also. But some features are different from the flat list. In scroll, the view has limited props which can be used in our component. In scroll, the view provides the functionality for scrolling our component in both directions- vertical and horizontal but they generally work vertically by default. They also provide the refresh functionality for rendering our component.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Props of scrollview are horizontal, refreshControl,horizontal,onScroll,scrollEnabled,contentContainerStyle,snapToStart etc so many props have.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0Example of scroll view:-<\/span><\/p>\n<pre class=\"lang:default decode:true \">import React, { Component } from 'react';\u00a0\u00a0\r\n\r\nimport {ScrollView, Image, Text, Button,View} from 'react-native';\u00a0\u00a0\r\n\r\n\u00a0\u00a0\r\n\r\nexport default class ScrolledViewExample extends Component {\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0render() {\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return (\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;ScrollView &gt;\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View&gt;\r\n\r\n\u00a0 \u00a0 &lt;Text&gt;City Name&lt;\/Text&gt;\r\n\r\n&lt;\/View&gt;\r\n\r\n&lt;Text&gt;Bhopal&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Gwalior&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Delhi&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Noida&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Guna&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Balaghat&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Damoh&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Indore&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Jabalpur&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Mandla&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Rajgarh&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Dewas&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Shivpuri&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Ujjain&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Sagar&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Satna&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text&gt;Vidhisa&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Rewa&lt;\/Text&gt;\r\n\r\n&lt;Text&gt;Narwar&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/ScrollView&gt;\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\r\n\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article we talk about one of the most important topics is flat list and scroll view which comes, under-react native. Firstly we discuss is flat lists all we know is that a flat list is used for rendering so much data in our component. With the help of a flat list, similar data [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7084,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[257,412],"tags":[722,723,737,247,411,738],"class_list":["post-7083","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-react-native","tag-blog","tag-blogging","tag-flatlist","tag-react","tag-react-native","tag-scrollview"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>FlatList vs ScrollView in React Native - InnovationM - Blog<\/title>\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.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"FlatList vs ScrollView in React Native - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"In this article we talk about one of the most important topics is flat list and scroll view which comes, under-react native. Firstly we discuss is flat lists all we know is that a flat list is used for rendering so much data in our component. With the help of a flat list, similar data [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-16T07:25:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-20T13:24:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/12\/FlatList-vs-ScrollView-in-React-Native-1024x576.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"FlatList vs ScrollView in React Native\",\"datePublished\":\"2021-12-16T07:25:51+00:00\",\"dateModified\":\"2023-01-20T13:24:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/\"},\"wordCount\":295,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/FlatList-vs-ScrollView-in-React-Native.png\",\"keywords\":[\"blog\",\"blogging\",\"flatlist\",\"react\",\"react native\",\"scrollview\"],\"articleSection\":[\"React\",\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/\",\"name\":\"FlatList vs ScrollView in React Native - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/FlatList-vs-ScrollView-in-React-Native.png\",\"datePublished\":\"2021-12-16T07:25:51+00:00\",\"dateModified\":\"2023-01-20T13:24:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/FlatList-vs-ScrollView-in-React-Native.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/FlatList-vs-ScrollView-in-React-Native.png\",\"width\":3556,\"height\":2000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/flatlist-vs-scrollview-in-react-native\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"FlatList vs ScrollView in React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"FlatList vs ScrollView in React Native - InnovationM - Blog","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.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"FlatList vs ScrollView in React Native - InnovationM - Blog","og_description":"In this article we talk about one of the most important topics is flat list and scroll view which comes, under-react native. Firstly we discuss is flat lists all we know is that a flat list is used for rendering so much data in our component. With the help of a flat list, similar data [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/","og_site_name":"InnovationM - Blog","article_published_time":"2021-12-16T07:25:51+00:00","article_modified_time":"2023-01-20T13:24:55+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/12\/FlatList-vs-ScrollView-in-React-Native-1024x576.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"FlatList vs ScrollView in React Native","datePublished":"2021-12-16T07:25:51+00:00","dateModified":"2023-01-20T13:24:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/"},"wordCount":295,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/12\/FlatList-vs-ScrollView-in-React-Native.png","keywords":["blog","blogging","flatlist","react","react native","scrollview"],"articleSection":["React","React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/","url":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/","name":"FlatList vs ScrollView in React Native - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/12\/FlatList-vs-ScrollView-in-React-Native.png","datePublished":"2021-12-16T07:25:51+00:00","dateModified":"2023-01-20T13:24:55+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/12\/FlatList-vs-ScrollView-in-React-Native.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/12\/FlatList-vs-ScrollView-in-React-Native.png","width":3556,"height":2000},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/flatlist-vs-scrollview-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"FlatList vs ScrollView in React Native"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7083"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7083\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7084"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}