kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_flatlist.html
at main 114 kB view raw
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-flatlist" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>FlatList · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/flatlist><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="FlatList · React Native"><meta data-rh=true name=description content="A performant interface for rendering basic, flat lists, supporting the most handy features:"><meta data-rh=true property=og:description content="A performant interface for rendering basic, flat lists, supporting the most handy features:"><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/flatlist><link data-rh=true rel=alternate href=https://reactnative.dev/docs/flatlist hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/flatlist hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON Feed"><link rel=preconnect href=https://www.google-analytics.com><script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script><script async src=https://www.google-analytics.com/analytics.js></script><link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com><script async src="https://www.googletagmanager.com/gtag/js?id=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</script><link rel=search type=application/opensearchdescription+xml title="React Native" href=/opensearch.xml><link rel=icon href=/img/pwa/manifest-icon-512.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#20232a><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=#20232a><link rel=apple-touch-icon href=/img/pwa/manifest-icon-512.png><link rel=mask-icon href=/img/pwa/manifest-icon-512.png color=#06bcee><meta name=msapplication-TileImage href=/img/pwa/manifest-icon-512.png><meta name=msapplication-TileColor content=#20232a><script src=https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js defer></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs> 2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> 3</defs></svg> 4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/flatlist>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/flatlist>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/flatlist>0.79</a><li><a class=dropdown__link href=/docs/0.78/flatlist>0.78</a><li><a class=dropdown__link href=/docs/0.77/flatlist>0.77</a><li><a class=dropdown__link href=/docs/0.76/flatlist>0.76</a><li><a class=dropdown__link href=/docs/0.75/flatlist>0.75</a><li><a class=dropdown__link href=/docs/0.74/flatlist>0.74</a><li><a class=dropdown__link href=/docs/0.73/flatlist>0.73</a><li><a class=dropdown__link href=/docs/0.72/flatlist>0.72</a><li><a class=dropdown__link href=/docs/0.71/flatlist>0.71</a><li><a class=dropdown__link href=/docs/0.70/flatlist>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/getting-started>Guides</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</a><a class="navbar__item navbar__link" href=/blog>Blog</a><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/components-and-apis>Core Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/components-and-apis>Core Components and APIs</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/activityindicator>ActivityIndicator</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/button>Button</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/flatlist>FlatList</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/image>Image</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/imagebackground>ImageBackground</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/keyboardavoidingview>KeyboardAvoidingView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/modal>Modal</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/pressable>Pressable</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/refreshcontrol>RefreshControl</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/scrollview>ScrollView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sectionlist>SectionList</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/statusbar>StatusBar</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/switch>Switch</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/text>Text</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/textinput>TextInput</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablehighlight>TouchableHighlight</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchableopacity>TouchableOpacity</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablewithoutfeedback>TouchableWithoutFeedback</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/view>View</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/virtualizedlist>VirtualizedList</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/drawerlayoutandroid>Android Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/drawerlayoutandroid>DrawerLayoutAndroid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablenativefeedback>TouchableNativeFeedback</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/inputaccessoryview>iOS Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/inputaccessoryview>InputAccessoryView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/safeareaview>SafeAreaView</a></ul></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/image-style-props>Props</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/boxshadowvalue>Object Types</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>FlatList</h1></header><p>A performant interface for rendering basic, flat lists, supporting the most handy features:</p> 5<ul> 6<li>Fully cross-platform.</li> 7<li>Optional horizontal mode.</li> 8<li>Configurable viewability callbacks.</li> 9<li>Header support.</li> 10<li>Footer support.</li> 11<li>Separator support.</li> 12<li>Pull to Refresh.</li> 13<li>Scroll loading.</li> 14<li>ScrollToIndex support.</li> 15<li>Multiple column support.</li> 16</ul> 17<p>If you need section support, use <a href=/docs/sectionlist><code>&lt;SectionList></code></a>.</p> 18<h2 class="anchor anchorWithStickyNavbar_JmGV" id=example>Example<a href=#example class=hash-link aria-label="Direct link to Example" title="Direct link to Example">​</a></h2> 19<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">TypeScript<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">JavaScript</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb hidden><div class=snack-player data-snack-name="Simple FlatList Example" data-snack-description="Example usage" data-snack-files="%7B%22App.js%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%20from%20'react'%3B%5Cnimport%20%7BView%2C%20FlatList%2C%20StyleSheet%2C%20Text%2C%20StatusBar%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20DATA%20%3D%20%5B%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%5Cn%20%20%20%20title%3A%20'First%20Item'%2C%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%5Cn%20%20%20%20title%3A%20'Second%20Item'%2C%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%5Cn%20%20%20%20title%3A%20'Third%20Item'%2C%5Cn%20%20%7D%2C%5Cn%5D%3B%5Cn%5Cnconst%20Item%20%3D%20(%7Btitle%7D)%20%3D%3E%20(%5Cn%20%20%3CView%20style%3D%7Bstyles.item%7D%3E%5Cn%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%5Cn%20%20%3C%2FView%3E%5Cn)%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20(%5Cn%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CFlatList%5Cn%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%5Cn%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20%3CItem%20title%3D%7Bitem.title%7D%20%2F%3E%7D%5Cn%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%3C%2FSafeAreaProvider%3E%5Cn)%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20marginTop%3A%20StatusBar.currentHeight%20%7C%7C%200%2C%5Cn%20%20%7D%2C%5Cn%20%20item%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%5Cn%20%20%20%20padding%3A%2020%2C%5Cn%20%20%20%20marginVertical%3A%208%2C%5Cn%20%20%20%20marginHorizontal%3A%2016%2C%5Cn%20%20%7D%2C%5Cn%20%20title%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2032%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div><div role=tabpanel class=tabItem_wHwb><div class=snack-player data-snack-name="Simple FlatList Example" data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%20from%20'react'%3B%5Cnimport%20%7BView%2C%20FlatList%2C%20StyleSheet%2C%20Text%2C%20StatusBar%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20DATA%20%3D%20%5B%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%5Cn%20%20%20%20title%3A%20'First%20Item'%2C%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%5Cn%20%20%20%20title%3A%20'Second%20Item'%2C%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%5Cn%20%20%20%20title%3A%20'Third%20Item'%2C%5Cn%20%20%7D%2C%5Cn%5D%3B%5Cn%5Cntype%20ItemProps%20%3D%20%7Btitle%3A%20string%7D%3B%5Cn%5Cnconst%20Item%20%3D%20(%7Btitle%7D%3A%20ItemProps)%20%3D%3E%20(%5Cn%20%20%3CView%20style%3D%7Bstyles.item%7D%3E%5Cn%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Btitle%7D%3C%2FText%3E%5Cn%20%20%3C%2FView%3E%5Cn)%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20(%5Cn%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%3CFlatList%5Cn%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%5Cn%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20%3CItem%20title%3D%7Bitem.title%7D%20%2F%3E%7D%5Cn%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%3C%2FSafeAreaProvider%3E%5Cn)%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20marginTop%3A%20StatusBar.currentHeight%20%7C%7C%200%2C%5Cn%20%20%7D%2C%5Cn%20%20item%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'%23f9c2ff'%2C%5Cn%20%20%20%20padding%3A%2020%2C%5Cn%20%20%20%20marginVertical%3A%208%2C%5Cn%20%20%20%20marginHorizontal%3A%2016%2C%5Cn%20%20%7D%2C%5Cn%20%20title%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2032%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div></div></div> 20<p>To render multiple columns, use the <a href=/docs/flatlist#numcolumns><code>numColumns</code></a> prop. Using this approach instead of a <code>flexWrap</code> layout can prevent conflicts with the item height logic.</p> 21<p>More complex, selectable example below.</p> 22<ul> 23<li>By passing <code>extraData={selectedId}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render when the state changes. Without setting this prop, <code>FlatList</code> would not know it needs to re-render any items because it is a <code>PureComponent</code> and the prop comparison will not show any changes.</li> 24<li><code>keyExtractor</code> tells the list to use the <code>id</code>s for the react keys instead of the default <code>key</code> property.</li> 25</ul> 26<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">TypeScript<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">JavaScript</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb hidden><div class=snack-player data-snack-name=flatlist-selectable data-snack-description="Example usage" data-snack-files="%7B%22App.js%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7B%5Cn%20%20FlatList%2C%5Cn%20%20StatusBar%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Text%2C%5Cn%20%20TouchableOpacity%2C%5Cn%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cnconst%20DATA%20%3D%20%5B%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%5Cn%20%20%20%20title%3A%20'First%20Item'%2C%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%5Cn%20%20%20%20title%3A%20'Second%20Item'%2C%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%5Cn%20%20%20%20title%3A%20'Third%20Item'%2C%5Cn%20%20%7D%2C%5Cn%5D%3B%5Cn%5Cnconst%20Item%20%3D%20(%7Bitem%2C%20onPress%2C%20backgroundColor%2C%20textColor%7D)%20%3D%3E%20(%5Cn%20%20%3CTouchableOpacity%20onPress%3D%7BonPress%7D%20style%3D%7B%5Bstyles.item%2C%20%7BbackgroundColor%7D%5D%7D%3E%5Cn%20%20%20%20%3CText%20style%3D%7B%5Bstyles.title%2C%20%7Bcolor%3A%20textColor%7D%5D%7D%3E%7Bitem.title%7D%3C%2FText%3E%5Cn%20%20%3C%2FTouchableOpacity%3E%5Cn)%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BselectedId%2C%20setSelectedId%5D%20%3D%20useState()%3B%5Cn%5Cn%20%20const%20renderItem%20%3D%20(%7Bitem%7D)%20%3D%3E%20%7B%5Cn%20%20%20%20const%20backgroundColor%20%3D%20item.id%20%3D%3D%3D%20selectedId%20%3F%20'%236e3b6e'%20%3A%20'%23f9c2ff'%3B%5Cn%20%20%20%20const%20color%20%3D%20item.id%20%3D%3D%3D%20selectedId%20%3F%20'white'%20%3A%20'black'%3B%5Cn%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3CItem%5Cn%20%20%20%20%20%20%20%20item%3D%7Bitem%7D%5Cn%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20setSelectedId(item.id)%7D%5Cn%20%20%20%20%20%20%20%20backgroundColor%3D%7BbackgroundColor%7D%5Cn%20%20%20%20%20%20%20%20textColor%3D%7Bcolor%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CFlatList%5Cn%20%20%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%5Cn%20%20%20%20%20%20%20%20%20%20renderItem%3D%7BrenderItem%7D%5Cn%20%20%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%5Cn%20%20%20%20%20%20%20%20%20%20extraData%3D%7BselectedId%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20marginTop%3A%20StatusBar.currentHeight%20%7C%7C%200%2C%5Cn%20%20%7D%2C%5Cn%20%20item%3A%20%7B%5Cn%20%20%20%20padding%3A%2020%2C%5Cn%20%20%20%20marginVertical%3A%208%2C%5Cn%20%20%20%20marginHorizontal%3A%2016%2C%5Cn%20%20%7D%2C%5Cn%20%20title%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2032%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div><div role=tabpanel class=tabItem_wHwb><div class=snack-player data-snack-name=flatlist-selectable data-snack-description="Example usage" data-snack-files="%7B%22App.tsx%22%3A%7B%22type%22%3A%22CODE%22%2C%22contents%22%3A%22import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%5Cnimport%20%7B%5Cn%20%20FlatList%2C%5Cn%20%20StatusBar%2C%5Cn%20%20StyleSheet%2C%5Cn%20%20Text%2C%5Cn%20%20TouchableOpacity%2C%5Cn%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%3B%5Cn%5Cntype%20ItemData%20%3D%20%7B%5Cn%20%20id%3A%20string%3B%5Cn%20%20title%3A%20string%3B%5Cn%7D%3B%5Cn%5Cnconst%20DATA%3A%20ItemData%5B%5D%20%3D%20%5B%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'%2C%5Cn%20%20%20%20title%3A%20'First%20Item'%2C%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'%2C%5Cn%20%20%20%20title%3A%20'Second%20Item'%2C%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20id%3A%20'58694a0f-3da1-471f-bd96-145571e29d72'%2C%5Cn%20%20%20%20title%3A%20'Third%20Item'%2C%5Cn%20%20%7D%2C%5Cn%5D%3B%5Cn%5Cntype%20ItemProps%20%3D%20%7B%5Cn%20%20item%3A%20ItemData%3B%5Cn%20%20onPress%3A%20()%20%3D%3E%20void%3B%5Cn%20%20backgroundColor%3A%20string%3B%5Cn%20%20textColor%3A%20string%3B%5Cn%7D%3B%5Cn%5Cnconst%20Item%20%3D%20(%7Bitem%2C%20onPress%2C%20backgroundColor%2C%20textColor%7D%3A%20ItemProps)%20%3D%3E%20(%5Cn%20%20%3CTouchableOpacity%20onPress%3D%7BonPress%7D%20style%3D%7B%5Bstyles.item%2C%20%7BbackgroundColor%7D%5D%7D%3E%5Cn%20%20%20%20%3CText%20style%3D%7B%5Bstyles.title%2C%20%7Bcolor%3A%20textColor%7D%5D%7D%3E%7Bitem.title%7D%3C%2FText%3E%5Cn%20%20%3C%2FTouchableOpacity%3E%5Cn)%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20%7B%5Cn%20%20const%20%5BselectedId%2C%20setSelectedId%5D%20%3D%20useState%3Cstring%3E()%3B%5Cn%5Cn%20%20const%20renderItem%20%3D%20(%7Bitem%7D%3A%20%7Bitem%3A%20ItemData%7D)%20%3D%3E%20%7B%5Cn%20%20%20%20const%20backgroundColor%20%3D%20item.id%20%3D%3D%3D%20selectedId%20%3F%20'%236e3b6e'%20%3A%20'%23f9c2ff'%3B%5Cn%20%20%20%20const%20color%20%3D%20item.id%20%3D%3D%3D%20selectedId%20%3F%20'white'%20%3A%20'black'%3B%5Cn%5Cn%20%20%20%20return%20(%5Cn%20%20%20%20%20%20%3CItem%5Cn%20%20%20%20%20%20%20%20item%3D%7Bitem%7D%5Cn%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20setSelectedId(item.id)%7D%5Cn%20%20%20%20%20%20%20%20backgroundColor%3D%7BbackgroundColor%7D%5Cn%20%20%20%20%20%20%20%20textColor%3D%7Bcolor%7D%5Cn%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20)%3B%5Cn%20%20%7D%3B%5Cn%5Cn%20%20return%20(%5Cn%20%20%20%20%3CSafeAreaProvider%3E%5Cn%20%20%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CFlatList%5Cn%20%20%20%20%20%20%20%20%20%20data%3D%7BDATA%7D%5Cn%20%20%20%20%20%20%20%20%20%20renderItem%3D%7BrenderItem%7D%5Cn%20%20%20%20%20%20%20%20%20%20keyExtractor%3D%7Bitem%20%3D%3E%20item.id%7D%5Cn%20%20%20%20%20%20%20%20%20%20extraData%3D%7BselectedId%7D%5Cn%20%20%20%20%20%20%20%20%2F%3E%5Cn%20%20%20%20%20%20%3C%2FSafeAreaView%3E%5Cn%20%20%20%20%3C%2FSafeAreaProvider%3E%5Cn%20%20)%3B%5Cn%7D%3B%5Cn%5Cnconst%20styles%20%3D%20StyleSheet.create(%7B%5Cn%20%20container%3A%20%7B%5Cn%20%20%20%20flex%3A%201%2C%5Cn%20%20%20%20marginTop%3A%20StatusBar.currentHeight%20%7C%7C%200%2C%5Cn%20%20%7D%2C%5Cn%20%20item%3A%20%7B%5Cn%20%20%20%20padding%3A%2020%2C%5Cn%20%20%20%20marginVertical%3A%208%2C%5Cn%20%20%20%20marginHorizontal%3A%2016%2C%5Cn%20%20%7D%2C%5Cn%20%20title%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2032%2C%5Cn%20%20%7D%2C%5Cn%7D)%3B%5Cn%5Cnexport%20default%20App%3B%22%7D%7D" data-snack-dependencies=react-native-safe-area-context data-snack-platform=web data-snack-supported-platforms=ios,android,web data-snack-theme=light data-snack-preview=true data-snack-loading=lazy data-snack-device-frame=false></div></div></div></div> 27<p>This is a convenience wrapper around <a href=/docs/virtualizedlist><code>&lt;VirtualizedList></code></a>, and thus inherits its props (as well as those of <a href=/docs/scrollview><code>&lt;ScrollView></code></a>) that aren't explicitly listed here, along with the following caveats:</p> 28<ul> 29<li>Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li> 30<li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow-equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop (e.g. <code>extraData</code>) that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state.</li> 31<li>In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.</li> 32<li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key. Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li> 33</ul> 34<hr> 35<h1>Reference</h1> 36<h2 class="anchor anchorWithStickyNavbar_JmGV" id=props>Props<a href=#props class=hash-link aria-label="Direct link to Props" title="Direct link to Props">​</a></h2> 37<h3 class="anchor anchorWithStickyNavbar_JmGV" id=virtualizedlist-props><a href=/docs/virtualizedlist#props>VirtualizedList Props</a><a href=#virtualizedlist-props class=hash-link aria-label="Direct link to virtualizedlist-props" title="Direct link to virtualizedlist-props">​</a></h3> 38<p>Inherits <a href=/docs/virtualizedlist#props>VirtualizedList Props</a>.</p> 39<hr> 40<h3 class="anchor anchorWithStickyNavbar_JmGV" id=required-renderitem><div class="label required basic">Required</div> <strong><code>renderItem</code></strong><a href=#required-renderitem class=hash-link aria-label="Direct link to required-renderitem" title="Direct link to required-renderitem">​</a></h3> 41<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>renderItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> item</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">ItemT</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> index</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> separators</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token function-variable function" style=color:#79b6f2>highlight</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token function-variable function" style=color:#79b6f2>unhighlight</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> updateProps</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">select</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'leading'</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'trailing'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> newProps</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>any</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token constant" style=color:#5a9bcf>JSX</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access maybe-class-name">Element</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 42<p>Takes an item from <code>data</code> and renders it into the list.</p> 43<p>Provides additional metadata like <code>index</code> if you need it, as well as a more generic <code>separators.updateProps</code> function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common <code>highlight</code> and <code>unhighlight</code> (which set the <code>highlighted: boolean</code> prop) are insufficient for your use case.</p> 44<table><thead><tr><th>Type<tbody><tr><td>function</table> 45<ul> 46<li><code>item</code> (Object): The item from <code>data</code> being rendered.</li> 47<li><code>index</code> (number): The index corresponding to this item in the <code>data</code> array.</li> 48<li><code>separators</code> (Object)<!-- --> 49<ul> 50<li><code>highlight</code> (Function)</li> 51<li><code>unhighlight</code> (Function)</li> 52<li><code>updateProps</code> (Function)<!-- --> 53<ul> 54<li><code>select</code> (enum('leading', 'trailing'))</li> 55<li><code>newProps</code> (Object)</li> 56</ul> 57</li> 58</ul> 59</li> 60</ul> 61<p>Example usage:</p> 62<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>FlatList</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>ItemSeparatorComponent</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript maybe-class-name" style=color:#fc929e>Platform</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript constant" style=color:#5a9bcf>OS</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript operator" style=color:#fc929e>!==</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string" style=color:#8dc891>'android'</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript operator" style=color:#fc929e>&&</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>(</span><span class="token tag script language-javascript punctuation" style=color:#657b83>(</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>highlighted</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>)</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript arrow operator" style=color:#fc929e>=></span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>(</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>&lt;</span><span class="token tag script language-javascript tag class-name" style=color:#fac863>View</span><span class="token tag script language-javascript tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript tag" style=color:#fc929e> </span><span class="token tag script language-javascript tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>[</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e>style</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript tag script language-javascript property-access" style=color:#fc929e>separator</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e> highlighted </span><span class="token tag script language-javascript tag script language-javascript operator" style=color:#fc929e>&&</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e>marginLeft</span><span class="token tag script language-javascript tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript tag script language-javascript number" style=color:#5a9bcf>0</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>]</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript tag" style=color:#fc929e> </span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>/></span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>)</span><span class="token tag script language-javascript punctuation" style=color:#657b83>)</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>data</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript punctuation" style=color:#657b83>[</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>title</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string" style=color:#8dc891>'Title Text'</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e> key</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string" style=color:#8dc891>'item1'</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>]</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>renderItem</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript punctuation" style=color:#657b83>(</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>item</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e> index</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e> separators</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>)</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript arrow operator" style=color:#fc929e>=></span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>(</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>&lt;</span><span class="token tag script language-javascript tag class-name" style=color:#fac863>TouchableHighlight</span><span class="token tag script language-javascript tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript tag" style=color:#fc929e> </span><span class="token tag script language-javascript tag attr-name" style=color:#c5a5c5>key</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e>item</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript tag script language-javascript property-access" style=color:#fc929e>key</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript tag" style=color:#fc929e> </span><span class="token tag script language-javascript tag attr-name" style=color:#c5a5c5>onPress</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>(</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>)</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript tag script language-javascript arrow operator" style=color:#fc929e>=></span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript tag script language-javascript keyword" style=color:#c5a5c5>this</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript tag script language-javascript method function property-access" style=color:#79b6f2>_onPress</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>(</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e>item</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>)</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript tag" style=color:#fc929e> </span><span class="token tag script language-javascript tag attr-name" style=color:#c5a5c5>onShowUnderlay</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e>separators</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript tag script language-javascript property-access" style=color:#fc929e>highlight</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript tag" style=color:#fc929e> </span><span class="token tag script language-javascript tag attr-name" style=color:#c5a5c5>onHideUnderlay</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e>separators</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript tag script language-javascript property-access" style=color:#fc929e>unhighlight</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>></span><span class="token tag script language-javascript plain-text" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript plain-text" style=color:#fc929e> </span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>&lt;</span><span class="token tag script language-javascript tag class-name" style=color:#fac863>View</span><span class="token tag script language-javascript tag" style=color:#fc929e> </span><span class="token tag script language-javascript tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e>backgroundColor</span><span class="token tag script language-javascript tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript tag script language-javascript string" style=color:#8dc891>'white'</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>></span><span class="token tag script language-javascript plain-text" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript plain-text" style=color:#fc929e> </span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>&lt;</span><span class="token tag script language-javascript tag class-name" style=color:#fac863>Text</span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>></span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>item</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>title</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag script language-javascript tag class-name" style=color:#fac863>Text</span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>></span><span class="token tag script language-javascript plain-text" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript plain-text" style=color:#fc929e> </span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag script language-javascript tag class-name" style=color:#fac863>View</span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>></span><span class="token tag script language-javascript plain-text" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript plain-text" style=color:#fc929e> </span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag script language-javascript tag class-name" style=color:#fac863>TouchableHighlight</span><span class="token tag script language-javascript tag punctuation" style=color:#657b83>></span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>)</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e></span><span class="token tag punctuation" style=color:#657b83>/></span><br></span></code></pre></div></div> 63<hr> 64<h3 class="anchor anchorWithStickyNavbar_JmGV" id=required-data><div class="label required basic">Required</div> <strong><code>data</code></strong><a href=#required-data class=hash-link aria-label="Direct link to required-data" title="Direct link to required-data">​</a></h3> 65<p>An array (or array-like list) of items to render. Other data types can be used by targeting <a href=/docs/virtualizedlist><code>VirtualizedList</code></a> directly.</p> 66<table><thead><tr><th>Type<tbody><tr><td>ArrayLike</table> 67<hr> 68<h3 class="anchor anchorWithStickyNavbar_JmGV" id=itemseparatorcomponent><code>ItemSeparatorComponent</code><a href=#itemseparatorcomponent class=hash-link aria-label="Direct link to itemseparatorcomponent" title="Direct link to itemseparatorcomponent">​</a></h3> 69<p>Rendered in between each item, but not at the top or bottom. By default, <code>highlighted</code> and <code>leadingItem</code> props are provided. <code>renderItem</code> provides <code>separators.highlight</code>/<code>unhighlight</code> which will update the <code>highlighted</code> prop, but you can also add custom props with <code>separators.updateProps</code>. Can be a React Component (e.g. <code>SomeComponent</code>), or a React element (e.g. <code>&lt;SomeComponent /></code>).</p> 70<table><thead><tr><th>Type<tbody><tr><td>component, function, element</table> 71<hr> 72<h3 class="anchor anchorWithStickyNavbar_JmGV" id=listemptycomponent><code>ListEmptyComponent</code><a href=#listemptycomponent class=hash-link aria-label="Direct link to listemptycomponent" title="Direct link to listemptycomponent">​</a></h3> 73<p>Rendered when the list is empty. Can be a React Component (e.g. <code>SomeComponent</code>), or a React element (e.g. <code>&lt;SomeComponent /></code>).</p> 74<table><thead><tr><th>Type<tbody><tr><td>component, element</table> 75<hr> 76<h3 class="anchor anchorWithStickyNavbar_JmGV" id=listfootercomponent><code>ListFooterComponent</code><a href=#listfootercomponent class=hash-link aria-label="Direct link to listfootercomponent" title="Direct link to listfootercomponent">​</a></h3> 77<p>Rendered at the bottom of all the items. Can be a React Component (e.g. <code>SomeComponent</code>), or a React element (e.g. <code>&lt;SomeComponent /></code>).</p> 78<table><thead><tr><th>Type<tbody><tr><td>component, element</table> 79<hr> 80<h3 class="anchor anchorWithStickyNavbar_JmGV" id=listfootercomponentstyle><code>ListFooterComponentStyle</code><a href=#listfootercomponentstyle class=hash-link aria-label="Direct link to listfootercomponentstyle" title="Direct link to listfootercomponentstyle">​</a></h3> 81<p>Styling for internal View for <code>ListFooterComponent</code>.</p> 82<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/view-style-props>View Style</a></table> 83<hr> 84<h3 class="anchor anchorWithStickyNavbar_JmGV" id=listheadercomponent><code>ListHeaderComponent</code><a href=#listheadercomponent class=hash-link aria-label="Direct link to listheadercomponent" title="Direct link to listheadercomponent">​</a></h3> 85<p>Rendered at the top of all the items. Can be a React Component (e.g. <code>SomeComponent</code>), or a React element (e.g. <code>&lt;SomeComponent /></code>).</p> 86<table><thead><tr><th>Type<tbody><tr><td>component, element</table> 87<hr> 88<h3 class="anchor anchorWithStickyNavbar_JmGV" id=listheadercomponentstyle><code>ListHeaderComponentStyle</code><a href=#listheadercomponentstyle class=hash-link aria-label="Direct link to listheadercomponentstyle" title="Direct link to listheadercomponentstyle">​</a></h3> 89<p>Styling for internal View for <code>ListHeaderComponent</code>.</p> 90<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/view-style-props>View Style</a></table> 91<hr> 92<h3 class="anchor anchorWithStickyNavbar_JmGV" id=columnwrapperstyle><code>columnWrapperStyle</code><a href=#columnwrapperstyle class=hash-link aria-label="Direct link to columnwrapperstyle" title="Direct link to columnwrapperstyle">​</a></h3> 93<p>Optional custom style for multi-item rows generated when <code>numColumns > 1</code>.</p> 94<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/view-style-props>View Style</a></table> 95<hr> 96<h3 class="anchor anchorWithStickyNavbar_JmGV" id=extradata><code>extraData</code><a href=#extradata class=hash-link aria-label="Direct link to extradata" title="Direct link to extradata">​</a></h3> 97<p>A marker property for telling the list to re-render (since it implements <code>PureComponent</code>). If any of your <code>renderItem</code>, Header, Footer, etc. functions depend on anything outside of the <code>data</code> prop, stick it here and treat it immutably.</p> 98<table><thead><tr><th>Type<tbody><tr><td>any</table> 99<hr> 100<h3 class="anchor anchorWithStickyNavbar_JmGV" id=getitemlayout><code>getItemLayout</code><a href=#getitemlayout class=hash-link aria-label="Direct link to getitemlayout" title="Direct link to getitemlayout">​</a></h3> 101<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">data</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> index</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">length</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> offset</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> index</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 102<p><code>getItemLayout</code> is an optional optimization that allows skipping the measurement of dynamic content if you know the size (height or width) of items ahead of time. <code>getItemLayout</code> is efficient if you have fixed size items, for example:</p> 103<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain"> getItemLayout</span><span class="token operator" style=color:#fc929e>=</span><span class="token punctuation" style=color:#657b83>{</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">data</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> index</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">length</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token constant" style=color:#5a9bcf>ITEM_HEIGHT</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> offset</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token constant" style=color:#5a9bcf>ITEM_HEIGHT</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>*</span><span class="token plain"> index</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> index</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 104<p>Adding <code>getItemLayout</code> can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify <code>ItemSeparatorComponent</code>.</p> 105<table><thead><tr><th>Type<tbody><tr><td>function</table> 106<hr> 107<h3 class="anchor anchorWithStickyNavbar_JmGV" id=horizontal><code>horizontal</code><a href=#horizontal class=hash-link aria-label="Direct link to horizontal" title="Direct link to horizontal">​</a></h3> 108<p>If <code>true</code>, renders items next to each other horizontally instead of stacked vertically.</p> 109<table><thead><tr><th>Type<tbody><tr><td>boolean</table> 110<hr> 111<h3 class="anchor anchorWithStickyNavbar_JmGV" id=initialnumtorender><code>initialNumToRender</code><a href=#initialnumtorender class=hash-link aria-label="Direct link to initialnumtorender" title="Direct link to initialnumtorender">​</a></h3> 112<p>How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.</p> 113<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>10</code></table> 114<hr> 115<h3 class="anchor anchorWithStickyNavbar_JmGV" id=initialscrollindex><code>initialScrollIndex</code><a href=#initialscrollindex class=hash-link aria-label="Direct link to initialscrollindex" title="Direct link to initialscrollindex">​</a></h3> 116<p>Instead of starting at the top with the first item, start at <code>initialScrollIndex</code>. This disables the "scroll to top" optimization that keeps the first <code>initialNumToRender</code> items always rendered and immediately renders the items starting at this initial index. Requires <code>getItemLayout</code> to be implemented.</p> 117<table><thead><tr><th>Type<tbody><tr><td>number</table> 118<hr> 119<h3 class="anchor anchorWithStickyNavbar_JmGV" id=inverted><code>inverted</code><a href=#inverted class=hash-link aria-label="Direct link to inverted" title="Direct link to inverted">​</a></h3> 120<p>Reverses the direction of scroll. Uses scale transforms of <code>-1</code>.</p> 121<table><thead><tr><th>Type<tbody><tr><td>boolean</table> 122<hr> 123<h3 class="anchor anchorWithStickyNavbar_JmGV" id=keyextractor><code>keyExtractor</code><a href=#keyextractor class=hash-link aria-label="Direct link to keyextractor" title="Direct link to keyextractor">​</a></h3> 124<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">item</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">ItemT</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> index</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 125<p>Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks <code>item.key</code>, then <code>item.id</code>, and then falls back to using the index, like React does.</p> 126<table><thead><tr><th>Type<tbody><tr><td>function</table> 127<hr> 128<h3 class="anchor anchorWithStickyNavbar_JmGV" id=numcolumns><code>numColumns</code><a href=#numcolumns class=hash-link aria-label="Direct link to numcolumns" title="Direct link to numcolumns">​</a></h3> 129<p>Multiple columns can only be rendered with <code>horizontal={false}</code> and will zig-zag like a <code>flexWrap</code> layout. Items should all be the same height - masonry layouts are not supported.</p> 130<table><thead><tr><th>Type<tbody><tr><td>number</table> 131<hr> 132<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onrefresh><code>onRefresh</code><a href=#onrefresh class=hash-link aria-label="Direct link to onrefresh" title="Direct link to onrefresh">​</a></h3> 133<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 134<p>If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the <code>refreshing</code> prop correctly.</p> 135<table><thead><tr><th>Type<tbody><tr><td>function</table> 136<hr> 137<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onviewableitemschanged><code>onViewableItemsChanged</code><a href=#onviewableitemschanged class=hash-link aria-label="Direct link to onviewableitemschanged" title="Direct link to onviewableitemschanged">​</a></h3> 138<p>Called when the viewability of rows changes, as defined by the <code>viewabilityConfig</code> prop.</p> 139<table><thead><tr><th>Type<tbody><tr><td><code>(callback: {changed: <a href=/docs/viewtoken>ViewToken</a>[], viewableItems: <a href=/docs/viewtoken>ViewToken</a>[]} => void;</code></table> 140<hr> 141<h3 class="anchor anchorWithStickyNavbar_JmGV" id=progressviewoffset><code>progressViewOffset</code><a href=#progressviewoffset class=hash-link aria-label="Direct link to progressviewoffset" title="Direct link to progressviewoffset">​</a></h3> 142<p>Set this when offset is needed for the loading indicator to show correctly.</p> 143<table><thead><tr><th>Type<tbody><tr><td>number</table> 144<hr> 145<h3 class="anchor anchorWithStickyNavbar_JmGV" id=refreshing><code>refreshing</code><a href=#refreshing class=hash-link aria-label="Direct link to refreshing" title="Direct link to refreshing">​</a></h3> 146<p>Set this true while waiting for new data from a refresh.</p> 147<table><thead><tr><th>Type<tbody><tr><td>boolean</table> 148<hr> 149<h3 class="anchor anchorWithStickyNavbar_JmGV" id=removeclippedsubviews><code>removeClippedSubviews</code><a href=#removeclippedsubviews class=hash-link aria-label="Direct link to removeclippedsubviews" title="Direct link to removeclippedsubviews">​</a></h3> 150<p>This may improve scroll performance for large lists. On Android the default value is <code>true</code>.</p> 151<blockquote> 152<p>Note: May have bugs (missing content) in some circumstances - use at your own risk.</p> 153</blockquote> 154<table><thead><tr><th>Type<tbody><tr><td>boolean</table> 155<hr> 156<h3 class="anchor anchorWithStickyNavbar_JmGV" id=viewabilityconfig><code>viewabilityConfig</code><a href=#viewabilityconfig class=hash-link aria-label="Direct link to viewabilityconfig" title="Direct link to viewabilityconfig">​</a></h3> 157<p>See <a href=https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Lists/ViewabilityHelper.js target=_blank rel="noopener noreferrer"><code>ViewabilityHelper.js</code></a> for flow type and further documentation.</p> 158<table><thead><tr><th>Type<tbody><tr><td>ViewabilityConfig</table> 159<p><code>viewabilityConfig</code> takes a type <code>ViewabilityConfig</code> an object with following properties</p> 160<table><thead><tr><th>Property<th>Type<tbody><tr><td>minimumViewTime<td>number<tr><td>viewAreaCoveragePercentThreshold<td>number<tr><td>itemVisiblePercentThreshold<td>number<tr><td>waitForInteraction<td>boolean</table> 161<p>At least one of the <code>viewAreaCoveragePercentThreshold</code> or <code>itemVisiblePercentThreshold</code> is required. This needs to be done in the <code>constructor</code> to avoid following error (<a href=https://github.com/facebook/react-native/issues/17408 target=_blank rel="noopener noreferrer">ref</a>):</p> 162<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token known-class-name class-name" style=color:#fac863>Error</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">Changing</span><span class="token plain"> viewabilityConfig on the fly </span><span class="token keyword" style=color:#c5a5c5>is</span><span class="token plain"> not supported</span><br></span></code></pre></div></div> 163<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>constructor</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">props</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>super</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">props</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">viewabilityConfig</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> waitForInteraction</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> viewAreaCoveragePercentThreshold</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>95</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 164<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token operator" style=color:#fc929e>&lt;</span><span class="token maybe-class-name">FlatList</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> viewabilityConfig</span><span class="token operator" style=color:#fc929e>=</span><span class="token punctuation" style=color:#657b83>{</span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">viewabilityConfig</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token spread operator" style=color:#fc929e>...</span><br></span></code></pre></div></div> 165<h4 class="anchor anchorWithStickyNavbar_JmGV" id=minimumviewtime>minimumViewTime<a href=#minimumviewtime class=hash-link aria-label="Direct link to minimumViewTime" title="Direct link to minimumViewTime">​</a></h4> 166<p>Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired. A high number means that scrolling through content without stopping will not mark the content as viewable.</p> 167<h4 class="anchor anchorWithStickyNavbar_JmGV" id=viewareacoveragepercentthreshold>viewAreaCoveragePercentThreshold<a href=#viewareacoveragepercentthreshold class=hash-link aria-label="Direct link to viewAreaCoveragePercentThreshold" title="Direct link to viewAreaCoveragePercentThreshold">​</a></h4> 168<p>Percent of viewport that must be covered for a partially occluded item to count as "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means that a single pixel in the viewport makes the item viewable, and a value of 100 means that an item must be either entirely visible or cover the entire viewport to count as viewable.</p> 169<h4 class="anchor anchorWithStickyNavbar_JmGV" id=itemvisiblepercentthreshold>itemVisiblePercentThreshold<a href=#itemvisiblepercentthreshold class=hash-link aria-label="Direct link to itemVisiblePercentThreshold" title="Direct link to itemVisiblePercentThreshold">​</a></h4> 170<p>Similar to <code>viewAreaCoveragePercentThreshold</code>, but considers the percent of the item that is visible, rather than the fraction of the viewable area it covers.</p> 171<h4 class="anchor anchorWithStickyNavbar_JmGV" id=waitforinteraction>waitForInteraction<a href=#waitforinteraction class=hash-link aria-label="Direct link to waitForInteraction" title="Direct link to waitForInteraction">​</a></h4> 172<p>Nothing is considered viewable until the user scrolls or <code>recordInteraction</code> is called after render.</p> 173<hr> 174<h3 class="anchor anchorWithStickyNavbar_JmGV" id=viewabilityconfigcallbackpairs><code>viewabilityConfigCallbackPairs</code><a href=#viewabilityconfigcallbackpairs class=hash-link aria-label="Direct link to viewabilityconfigcallbackpairs" title="Direct link to viewabilityconfigcallbackpairs">​</a></h3> 175<p>List of <code>ViewabilityConfig</code>/<code>onViewableItemsChanged</code> pairs. A specific <code>onViewableItemsChanged</code> will be called when its corresponding <code>ViewabilityConfig</code>'s conditions are met. See <code>ViewabilityHelper.js</code> for flow type and further documentation.</p> 176<table><thead><tr><th>Type<tbody><tr><td>array of ViewabilityConfigCallbackPair</table> 177<h2 class="anchor anchorWithStickyNavbar_JmGV" id=methods>Methods<a href=#methods class=hash-link aria-label="Direct link to Methods" title="Direct link to Methods">​</a></h2> 178<h3 class="anchor anchorWithStickyNavbar_JmGV" id=flashscrollindicators><code>flashScrollIndicators()</code><a href=#flashscrollindicators class=hash-link aria-label="Direct link to flashscrollindicators" title="Direct link to flashscrollindicators">​</a></h3> 179<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>flashScrollIndicators</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 180<p>Displays the scroll indicators momentarily.</p> 181<hr> 182<h3 class="anchor anchorWithStickyNavbar_JmGV" id=getnativescrollref><code>getNativeScrollRef()</code><a href=#getnativescrollref class=hash-link aria-label="Direct link to getnativescrollref" title="Direct link to getnativescrollref">​</a></h3> 183<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>getNativeScrollRef</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access maybe-class-name">ElementRef</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token keyword" style=color:#c5a5c5>typeof</span><span class="token plain"> </span><span class="token maybe-class-name">ScrollViewComponent</span><span class="token operator" style=color:#fc929e>></span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 184<p>Provides a reference to the underlying scroll component</p> 185<hr> 186<h3 class="anchor anchorWithStickyNavbar_JmGV" id=getscrollresponder><code>getScrollResponder()</code><a href=#getscrollresponder class=hash-link aria-label="Direct link to getscrollresponder" title="Direct link to getscrollresponder">​</a></h3> 187<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>getScrollResponder</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">ScrollResponderMixin</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 188<p>Provides a handle to the underlying scroll responder.</p> 189<hr> 190<h3 class="anchor anchorWithStickyNavbar_JmGV" id=getscrollablenode><code>getScrollableNode()</code><a href=#getscrollablenode class=hash-link aria-label="Direct link to getscrollablenode" title="Direct link to getscrollablenode">​</a></h3> 191<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>getScrollableNode</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>any</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 192<p>Provides a handle to the underlying scroll node.</p> 193<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrolltoend><code>scrollToEnd()</code><a href=#scrolltoend class=hash-link aria-label="Direct link to scrolltoend" title="Direct link to scrolltoend">​</a></h3> 194<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>scrollToEnd</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">params</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">animated</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>boolean</span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 195<p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p> 196<p><strong>Parameters:</strong></p> 197<table><thead><tr><th>Name<th>Type<tbody><tr><td>params<td>object</table> 198<p>Valid <code>params</code> keys are:</p> 199<ul> 200<li>'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to <code>true</code>.</li> 201</ul> 202<hr> 203<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrolltoindex><code>scrollToIndex()</code><a href=#scrolltoindex class=hash-link aria-label="Direct link to scrolltoindex" title="Direct link to scrolltoindex">​</a></h3> 204<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">scrollToIndex</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">params</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> index</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> animated</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>boolean</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> viewOffset</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> viewPosition</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 205<p>Scrolls to the item at the specified index such that it is positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle.</p> 206<blockquote> 207<p>Note: Cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p> 208</blockquote> 209<p><strong>Parameters:</strong></p> 210<table><thead><tr><th>Name<th>Type<tbody><tr><td>params <div class="label basic required">Required</div><td>object</table> 211<p>Valid <code>params</code> keys are:</p> 212<ul> 213<li>'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to <code>true</code>.</li> 214<li>'index' (number) - The index to scroll to. Required.</li> 215<li>'viewOffset' (number) - A fixed number of pixels to offset the final target position.</li> 216<li>'viewPosition' (number) - A value of <code>0</code> places the item specified by index at the top, <code>1</code> at the bottom, and <code>0.5</code> centered in the middle.</li> 217</ul> 218<hr> 219<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrolltoitem><code>scrollToItem()</code><a href=#scrolltoitem class=hash-link aria-label="Direct link to scrolltoitem" title="Direct link to scrolltoitem">​</a></h3> 220<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>scrollToItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">params</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> animated</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>?</span><span class="token builtin" style=color:#2aa198>boolean</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> item</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">Item</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> viewPosition</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 221<p>Requires linear scan through data - use <code>scrollToIndex</code> instead if possible.</p> 222<blockquote> 223<p>Note: Cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p> 224</blockquote> 225<p><strong>Parameters:</strong></p> 226<table><thead><tr><th>Name<th>Type<tbody><tr><td>params <div class="label basic required">Required</div><td>object</table> 227<p>Valid <code>params</code> keys are:</p> 228<ul> 229<li>'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to <code>true</code>.</li> 230<li>'item' (object) - The item to scroll to. Required.</li> 231<li>'viewPosition' (number)</li> 232</ul> 233<hr> 234<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrolltooffset><code>scrollToOffset()</code><a href=#scrolltooffset class=hash-link aria-label="Direct link to scrolltooffset" title="Direct link to scrolltooffset">​</a></h3> 235<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>scrollToOffset</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">params</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> offset</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> animated</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>boolean</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 236<p>Scroll to a specific content pixel offset in the list.</p> 237<p><strong>Parameters:</strong></p> 238<table><thead><tr><th>Name<th>Type<tbody><tr><td>params <div class="label basic required">Required</div><td>object</table> 239<p>Valid <code>params</code> keys are:</p> 240<ul> 241<li>'offset' (number) - The offset to scroll to. In case of <code>horizontal</code> being true, the offset is the x-value, in any other case the offset is the y-value. Required.</li> 242<li>'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to <code>true</code>.</li> 243</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/flatlist.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/flatlist.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-04-14T14:14:17.000Z itemprop=dateModified>Apr 14, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/button><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Button</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/image><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Image</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#example class="table-of-contents__link toc-highlight">Example</a><li><a href=#props class="table-of-contents__link toc-highlight">Props</a><ul><li><a href=#virtualizedlist-props class="table-of-contents__link toc-highlight">VirtualizedList Props</a><li><a href=#required-renderitem class="table-of-contents__link toc-highlight"><div class="label required basic">Required</div> <strong><code>renderItem</code></strong></a><li><a href=#required-data class="table-of-contents__link toc-highlight"><div class="label required basic">Required</div> <strong><code>data</code></strong></a><li><a href=#itemseparatorcomponent class="table-of-contents__link toc-highlight"><code>ItemSeparatorComponent</code></a><li><a href=#listemptycomponent class="table-of-contents__link toc-highlight"><code>ListEmptyComponent</code></a><li><a href=#listfootercomponent class="table-of-contents__link toc-highlight"><code>ListFooterComponent</code></a><li><a href=#listfootercomponentstyle class="table-of-contents__link toc-highlight"><code>ListFooterComponentStyle</code></a><li><a href=#listheadercomponent class="table-of-contents__link toc-highlight"><code>ListHeaderComponent</code></a><li><a href=#listheadercomponentstyle class="table-of-contents__link toc-highlight"><code>ListHeaderComponentStyle</code></a><li><a href=#columnwrapperstyle class="table-of-contents__link toc-highlight"><code>columnWrapperStyle</code></a><li><a href=#extradata class="table-of-contents__link toc-highlight"><code>extraData</code></a><li><a href=#getitemlayout class="table-of-contents__link toc-highlight"><code>getItemLayout</code></a><li><a href=#horizontal class="table-of-contents__link toc-highlight"><code>horizontal</code></a><li><a href=#initialnumtorender class="table-of-contents__link toc-highlight"><code>initialNumToRender</code></a><li><a href=#initialscrollindex class="table-of-contents__link toc-highlight"><code>initialScrollIndex</code></a><li><a href=#inverted class="table-of-contents__link toc-highlight"><code>inverted</code></a><li><a href=#keyextractor class="table-of-contents__link toc-highlight"><code>keyExtractor</code></a><li><a href=#numcolumns class="table-of-contents__link toc-highlight"><code>numColumns</code></a><li><a href=#onrefresh class="table-of-contents__link toc-highlight"><code>onRefresh</code></a><li><a href=#onviewableitemschanged class="table-of-contents__link toc-highlight"><code>onViewableItemsChanged</code></a><li><a href=#progressviewoffset class="table-of-contents__link toc-highlight"><code>progressViewOffset</code></a><li><a href=#refreshing class="table-of-contents__link toc-highlight"><code>refreshing</code></a><li><a href=#removeclippedsubviews class="table-of-contents__link toc-highlight"><code>removeClippedSubviews</code></a><li><a href=#viewabilityconfig class="table-of-contents__link toc-highlight"><code>viewabilityConfig</code></a><li><a href=#viewabilityconfigcallbackpairs class="table-of-contents__link toc-highlight"><code>viewabilityConfigCallbackPairs</code></a></ul><li><a href=#methods class="table-of-contents__link toc-highlight">Methods</a><ul><li><a href=#flashscrollindicators class="table-of-contents__link toc-highlight"><code>flashScrollIndicators()</code></a><li><a href=#getnativescrollref class="table-of-contents__link toc-highlight"><code>getNativeScrollRef()</code></a><li><a href=#getscrollresponder class="table-of-contents__link toc-highlight"><code>getScrollResponder()</code></a><li><a href=#getscrollablenode class="table-of-contents__link toc-highlight"><code>getScrollableNode()</code></a><li><a href=#scrolltoend class="table-of-contents__link toc-highlight"><code>scrollToEnd()</code></a><li><a href=#scrolltoindex class="table-of-contents__link toc-highlight"><code>scrollToIndex()</code></a><li><a href=#scrolltoitem class="table-of-contents__link toc-highlight"><code>scrollToItem()</code></a><li><a href=#scrolltooffset class="table-of-contents__link toc-highlight"><code>scrollToOffset()</code></a></ul></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>