kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_virtualizedlist.html
at main 87 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-virtualizedlist" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>VirtualizedList · 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/virtualizedlist><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="VirtualizedList · React Native"><meta data-rh=true name=description content="Base implementation for the more convenient ` and components, which are also better documented. In general, this should only really be used if you need more flexibility than FlatList` provides, e.g. for use with immutable data instead of plain arrays."><meta data-rh=true property=og:description content="Base implementation for the more convenient ` and components, which are also better documented. In general, this should only really be used if you need more flexibility than FlatList` provides, e.g. for use with immutable data instead of plain arrays."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/virtualizedlist><link data-rh=true rel=alternate href=https://reactnative.dev/docs/virtualizedlist hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/virtualizedlist 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/virtualizedlist>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/virtualizedlist>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/virtualizedlist>0.79</a><li><a class=dropdown__link href=/docs/0.78/virtualizedlist>0.78</a><li><a class=dropdown__link href=/docs/0.77/virtualizedlist>0.77</a><li><a class=dropdown__link href=/docs/0.76/virtualizedlist>0.76</a><li><a class=dropdown__link href=/docs/0.75/virtualizedlist>0.75</a><li><a class=dropdown__link href=/docs/0.74/virtualizedlist>0.74</a><li><a class=dropdown__link href=/docs/0.73/virtualizedlist>0.73</a><li><a class=dropdown__link href=/docs/0.72/virtualizedlist>0.72</a><li><a class=dropdown__link href=/docs/0.71/virtualizedlist>0.71</a><li><a class=dropdown__link href=/docs/0.70/virtualizedlist>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 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 menu__link--active" aria-current=page 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>VirtualizedList</h1></header><p>Base implementation for the more convenient <a href=/docs/flatlist><code>&lt;FlatList></code></a> and <a href=/docs/sectionlist><code>&lt;SectionList></code></a> components, which are also better documented. In general, this should only really be used if you need more flexibility than <a href=/docs/flatlist><code>FlatList</code></a> provides, e.g. for use with immutable data instead of plain arrays.</p> 5<p>Virtualization massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and replacing all items outside of the render window with appropriately sized blank space. The window adapts to scrolling behavior, and items are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.</p> 6<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> 7<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=VirtualizedListExample 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%20VirtualizedList%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%20getItem%20%3D%20(_data%2C%20index)%20%3D%3E%20(%7B%5Cn%20%20id%3A%20Math.random().toString(12).substring(0)%2C%5Cn%20%20title%3A%20%60Item%20%24%7Bindex%20%2B%201%7D%60%2C%5Cn%7D)%3B%5Cn%5Cnconst%20getItemCount%20%3D%20_data%20%3D%3E%2050%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%20edges%3D%7B%5B'top'%5D%7D%3E%5Cn%20%20%20%20%20%20%3CVirtualizedList%5Cn%20%20%20%20%20%20%20%20initialNumToRender%3D%7B4%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%20%20getItemCount%3D%7BgetItemCount%7D%5Cn%20%20%20%20%20%20%20%20getItem%3D%7BgetItem%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%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%20height%3A%20150%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20marginVertical%3A%208%2C%5Cn%20%20%20%20marginHorizontal%3A%2016%2C%5Cn%20%20%20%20padding%3A%2020%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=VirtualizedListExample 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%20VirtualizedList%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%5Cntype%20ItemData%20%3D%20%7B%5Cn%20%20id%3A%20string%3B%5Cn%20%20title%3A%20string%3B%5Cn%7D%3B%5Cn%5Cnconst%20getItem%20%3D%20(_data%3A%20unknown%2C%20index%3A%20number)%3A%20ItemData%20%3D%3E%20(%7B%5Cn%20%20id%3A%20Math.random().toString(12).substring(0)%2C%5Cn%20%20title%3A%20%60Item%20%24%7Bindex%20%2B%201%7D%60%2C%5Cn%7D)%3B%5Cn%5Cnconst%20getItemCount%20%3D%20(_data%3A%20unknown)%20%3D%3E%2050%3B%5Cn%5Cntype%20ItemProps%20%3D%20%7B%5Cn%20%20title%3A%20string%3B%5Cn%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%20edges%3D%7B%5B'top'%5D%7D%3E%5Cn%20%20%20%20%20%20%3CVirtualizedList%5Cn%20%20%20%20%20%20%20%20initialNumToRender%3D%7B4%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%20%20getItemCount%3D%7BgetItemCount%7D%5Cn%20%20%20%20%20%20%20%20getItem%3D%7BgetItem%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%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%20height%3A%20150%2C%5Cn%20%20%20%20justifyContent%3A%20'center'%2C%5Cn%20%20%20%20marginVertical%3A%208%2C%5Cn%20%20%20%20marginHorizontal%3A%2016%2C%5Cn%20%20%20%20padding%3A%2020%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> 8<hr> 9<p>Some caveats:</p> 10<ul> 11<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> 12<li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> are 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> 13<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> 14<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> 15</ul> 16<hr> 17<h1>Reference</h1> 18<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> 19<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrollview-props><a href=/docs/scrollview#props>ScrollView Props</a><a href=#scrollview-props class=hash-link aria-label="Direct link to scrollview-props" title="Direct link to scrollview-props">​</a></h3> 20<p>Inherits <a href=/docs/scrollview#props>ScrollView Props</a>.</p> 21<hr> 22<h3 class="anchor anchorWithStickyNavbar_JmGV" id=data><code>data</code><a href=#data class=hash-link aria-label="Direct link to data" title="Direct link to data">​</a></h3> 23<p>Opaque data type passed to <code>getItem</code> and <code>getItemCount</code> to retrieve items.</p> 24<table><thead><tr><th>Type<tbody><tr><td>any</table> 25<hr> 26<h3 class="anchor anchorWithStickyNavbar_JmGV" id=required-getitem><div class="label required basic">Required</div> <strong><code>getItem</code></strong><a href=#required-getitem class=hash-link aria-label="Direct link to required-getitem" title="Direct link to required-getitem">​</a></h3> 27<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 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"> 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>any</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 28<p>A generic accessor for extracting an item from any sort of data blob.</p> 29<table><thead><tr><th>Type<tbody><tr><td>function</table> 30<hr> 31<h3 class="anchor anchorWithStickyNavbar_JmGV" id=required-getitemcount><div class="label required basic">Required</div> <strong><code>getItemCount</code></strong><a href=#required-getitemcount class=hash-link aria-label="Direct link to required-getitemcount" title="Direct link to required-getitemcount">​</a></h3> 32<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 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 builtin" style=color:#2aa198>number</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 33<p>Determines how many items are in the data blob.</p> 34<table><thead><tr><th>Type<tbody><tr><td>function</table> 35<hr> 36<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> 37<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">info</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 operator" style=color:#fc929e>?</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">Element</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token builtin" style=color:#2aa198>any</span><span class="token operator" style=color:#fc929e>></span><br></span></code></pre></div></div> 38<p>Takes an item from <code>data</code> and renders it into the list</p> 39<table><thead><tr><th>Type<tbody><tr><td>function</table> 40<hr> 41<h3 class="anchor anchorWithStickyNavbar_JmGV" id=cellrenderercomponent><code>CellRendererComponent</code><a href=#cellrenderercomponent class=hash-link aria-label="Direct link to cellrenderercomponent" title="Direct link to cellrenderercomponent">​</a></h3> 42<p>CellRendererComponent allows customizing how cells rendered by <code>renderItem</code>/<code>ListItemComponent</code> are wrapped when placed into the underlying ScrollView. This component must accept event handlers which notify VirtualizedList of changes within the cell.</p> 43<table><thead><tr><th>Type<tbody><tr><td><code>React.ComponentType&lt;CellRendererProps></code></table> 44<hr> 45<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> 46<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> 47<table><thead><tr><th>Type<tbody><tr><td>component, function, element</table> 48<hr> 49<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> 50<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> 51<table><thead><tr><th>Type<tbody><tr><td>component, element</table> 52<hr> 53<h3 class="anchor anchorWithStickyNavbar_JmGV" id=listitemcomponent><code>ListItemComponent</code><a href=#listitemcomponent class=hash-link aria-label="Direct link to listitemcomponent" title="Direct link to listitemcomponent">​</a></h3> 54<p>Each data item is rendered using this element. Can be a React Component Class, or a render function.</p> 55<table><thead><tr><th>Type<tbody><tr><td>component, function</table> 56<hr> 57<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> 58<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> 59<table><thead><tr><th>Type<tbody><tr><td>component, element</table> 60<hr> 61<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> 62<p>Styling for internal View for <code>ListFooterComponent</code>.</p> 63<table><thead><tr><th>Type<th>Required<tbody><tr><td>ViewStyleProp<td>No</table> 64<hr> 65<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> 66<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> 67<table><thead><tr><th>Type<tbody><tr><td>component, element</table> 68<hr> 69<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> 70<p>Styling for internal View for <code>ListHeaderComponent</code>.</p> 71<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/view-style-props>View Style</a></table> 72<hr> 73<h3 class="anchor anchorWithStickyNavbar_JmGV" id=debug><code>debug</code><a href=#debug class=hash-link aria-label="Direct link to debug" title="Direct link to debug">​</a></h3> 74<p><code>debug</code> will turn on extra logging and visual overlays to aid with debugging both usage and implementation, but with a significant perf hit.</p> 75<table><thead><tr><th>Type<tbody><tr><td>boolean</table> 76<hr> 77<h3 class="anchor anchorWithStickyNavbar_JmGV" id=disablevirtualization><code>disableVirtualization</code><a href=#disablevirtualization class=hash-link aria-label="Direct link to disablevirtualization" title="Direct link to disablevirtualization">​</a></h3> 78<blockquote> 79<p><strong>Deprecated.</strong> Virtualization provides significant performance and memory optimizations, but fully unmounts react instances that are outside of the render window. You should only need to disable this for debugging purposes.</p> 80</blockquote> 81<table><thead><tr><th>Type<tbody><tr><td>boolean</table> 82<hr> 83<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> 84<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> 85<table><thead><tr><th>Type<tbody><tr><td>any</table> 86<hr> 87<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> 88<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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> data</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><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"></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> 89<table><thead><tr><th>Type<tbody><tr><td>function</table> 90<hr> 91<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> 92<p>If <code>true</code>, renders items next to each other horizontally instead of stacked vertically.</p> 93<table><thead><tr><th>Type<tbody><tr><td>boolean</table> 94<hr> 95<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> 96<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> 97<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>10</code></table> 98<hr> 99<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> 100<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> 101<table><thead><tr><th>Type<tbody><tr><td>number</table> 102<hr> 103<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> 104<p>Reverses the direction of scroll. Uses scale transforms of <code>-1</code>.</p> 105<table><thead><tr><th>Type<tbody><tr><td>boolean</table> 106<hr> 107<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> 108<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 builtin" style=color:#2aa198>any</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> 109<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> 110<table><thead><tr><th>Type<tbody><tr><td>function</table> 111<hr> 112<h3 class="anchor anchorWithStickyNavbar_JmGV" id=maxtorenderperbatch><code>maxToRenderPerBatch</code><a href=#maxtorenderperbatch class=hash-link aria-label="Direct link to maxtorenderperbatch" title="Direct link to maxtorenderperbatch">​</a></h3> 113<p>The maximum number of items to render in each incremental render batch. The more rendered at once, the better the fill rate, but responsiveness may suffer because rendering content may interfere with responding to button taps or other interactions.</p> 114<table><thead><tr><th>Type<tbody><tr><td>number</table> 115<hr> 116<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onendreached><code>onEndReached</code><a href=#onendreached class=hash-link aria-label="Direct link to onendreached" title="Direct link to onendreached">​</a></h3> 117<p>Called once when the scroll position gets within <code>onEndReachedThreshold</code> from the logical end of the list.</p> 118<table><thead><tr><th>Type<tbody><tr><td><code>(info: {distanceFromEnd: number}) => void</code></table> 119<hr> 120<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onendreachedthreshold><code>onEndReachedThreshold</code><a href=#onendreachedthreshold class=hash-link aria-label="Direct link to onendreachedthreshold" title="Direct link to onendreachedthreshold">​</a></h3> 121<p>How far from the end (in units of visible length of the list) the trailing edge of the list must be from the end of the content to trigger the <code>onEndReached</code> callback. Thus, a value of 0.5 will trigger <code>onEndReached</code> when the end of the content is within half the visible length of the list.</p> 122<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>2</code></table> 123<hr> 124<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> 125<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> 126<p>If provided, a standard <code>RefreshControl</code> will be added for "Pull to Refresh" functionality. Make sure to also set the <code>refreshing</code> prop correctly.</p> 127<table><thead><tr><th>Type<tbody><tr><td>function</table> 128<hr> 129<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onscrolltoindexfailed><code>onScrollToIndexFailed</code><a href=#onscrolltoindexfailed class=hash-link aria-label="Direct link to onscrolltoindexfailed" title="Direct link to onscrolltoindexfailed">​</a></h3> 130<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">info</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"> highestMeasuredFrameIndex</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"> averageItemLength</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 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> 131<p>Used to handle failures when scrolling to an index that has not been measured yet. Recommended action is to either compute your own offset and <code>scrollTo</code> it, or scroll as far as possible and then try again after more items have been rendered.</p> 132<table><thead><tr><th>Type<tbody><tr><td>function</table> 133<hr> 134<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onstartreached><code>onStartReached</code><a href=#onstartreached class=hash-link aria-label="Direct link to onstartreached" title="Direct link to onstartreached">​</a></h3> 135<p>Called once when the scroll position gets within <code>onStartReachedThreshold</code> from the logical start of the list.</p> 136<table><thead><tr><th>Type<tbody><tr><td><code>(info: {distanceFromStart: number}) => void</code></table> 137<hr> 138<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onstartreachedthreshold><code>onStartReachedThreshold</code><a href=#onstartreachedthreshold class=hash-link aria-label="Direct link to onstartreachedthreshold" title="Direct link to onstartreachedthreshold">​</a></h3> 139<p>How far from the start (in units of visible length of the list) the leading edge of the list must be from the start of the content to trigger the <code>onStartReached</code> callback. Thus, a value of 0.5 will trigger <code>onStartReached</code> when the start of the content is within half the visible length of the list.</p> 140<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>2</code></table> 141<hr> 142<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> 143<p>Called when the viewability of rows changes, as defined by the <code>viewabilityConfig</code> prop.</p> 144<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> 145<hr> 146<h3 class="anchor anchorWithStickyNavbar_JmGV" id=persistentscrollbar><code>persistentScrollbar</code><a href=#persistentscrollbar class=hash-link aria-label="Direct link to persistentscrollbar" title="Direct link to persistentscrollbar">​</a></h3> 147<table><thead><tr><th>Type<tbody><tr><td>bool</table> 148<hr> 149<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> 150<p>Set this when offset is needed for the loading indicator to show correctly.</p> 151<table><thead><tr><th>Type<tbody><tr><td>number</table> 152<hr> 153<h3 class="anchor anchorWithStickyNavbar_JmGV" id=refreshcontrol><code>refreshControl</code><a href=#refreshcontrol class=hash-link aria-label="Direct link to refreshcontrol" title="Direct link to refreshcontrol">​</a></h3> 154<p>A custom refresh control element. When set, it overrides the default <code>&lt;RefreshControl></code> component built internally. The onRefresh and refreshing props are also ignored. Only works for vertical VirtualizedList.</p> 155<table><thead><tr><th>Type<tbody><tr><td>element</table> 156<hr> 157<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> 158<p>Set this true while waiting for new data from a refresh.</p> 159<table><thead><tr><th>Type<tbody><tr><td>boolean</table> 160<hr> 161<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> 162<p>This may improve scroll performance for large lists.</p> 163<blockquote> 164<p>Note: May have bugs (missing content) in some circumstances - use at your own risk.</p> 165</blockquote> 166<table><thead><tr><th>Type<tbody><tr><td>boolean</table> 167<hr> 168<h3 class="anchor anchorWithStickyNavbar_JmGV" id=renderscrollcomponent><code>renderScrollComponent</code><a href=#renderscrollcomponent class=hash-link aria-label="Direct link to renderscrollcomponent" title="Direct link to renderscrollcomponent">​</a></h3> 169<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">props</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> object</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"> element</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 170<p>Render a custom scroll component, e.g. with a differently styled <code>RefreshControl</code>.</p> 171<table><thead><tr><th>Type<tbody><tr><td>function</table> 172<hr> 173<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> 174<p>See <code>ViewabilityHelper.js</code> for flow type and further documentation.</p> 175<table><thead><tr><th>Type<tbody><tr><td>ViewabilityConfig</table> 176<hr> 177<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> 178<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> 179<table><thead><tr><th>Type<tbody><tr><td>array of ViewabilityConfigCallbackPair</table> 180<hr> 181<h3 class="anchor anchorWithStickyNavbar_JmGV" id=updatecellsbatchingperiod><code>updateCellsBatchingPeriod</code><a href=#updatecellsbatchingperiod class=hash-link aria-label="Direct link to updatecellsbatchingperiod" title="Direct link to updatecellsbatchingperiod">​</a></h3> 182<p>Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off screen. Similar fill rate/responsiveness tradeoff as <code>maxToRenderPerBatch</code>.</p> 183<table><thead><tr><th>Type<tbody><tr><td>number</table> 184<hr> 185<h3 class="anchor anchorWithStickyNavbar_JmGV" id=windowsize><code>windowSize</code><a href=#windowsize class=hash-link aria-label="Direct link to windowsize" title="Direct link to windowsize">​</a></h3> 186<p>Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then <code>windowSize={21}</code> (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing this number will reduce memory consumption and may improve performance, but will increase the chance that fast scrolling may reveal momentary blank areas of unrendered content.</p> 187<table><thead><tr><th>Type<tbody><tr><td>number</table> 188<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> 189<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> 190<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> 191<hr> 192<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> 193<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> 194<hr> 195<h3 class="anchor anchorWithStickyNavbar_JmGV" id=getscrollref><code>getScrollRef()</code><a href=#getscrollref class=hash-link aria-label="Direct link to getscrollref" title="Direct link to getscrollref">​</a></h3> 196<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>getScrollRef</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><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </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">ScrollView</span><span class="token operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </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">View</span><span class="token operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 197<hr> 198<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> 199<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 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 maybe-class-name">ScrollResponderMixin</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 200<p>Provides a handle to the underlying scroll responder. Note that <code>this._scrollRef</code> might not be a <code>ScrollView</code>, so we need to check that it responds to <code>getScrollResponder</code> before calling it.</p> 201<hr> 202<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> 203<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> 204<p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p> 205<p><strong>Parameters:</strong></p> 206<table><thead><tr><th>Name<th>Type<tbody><tr><td>params<td>object</table> 207<p>Valid <code>params</code> keys are:</p> 208<ul> 209<li><code>'animated'</code> (boolean) - Whether the list should do an animation while scrolling. Defaults to <code>true</code>.</li> 210</ul> 211<hr> 212<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> 213<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>scrollToIndex</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> 214<p>Valid <code>params</code> consist of:</p> 215<ul> 216<li>'index' (number). Required.</li> 217<li>'animated' (boolean). Optional.</li> 218<li>'viewOffset' (number). Optional.</li> 219<li>'viewPosition' (number). Optional.</li> 220</ul> 221<hr> 222<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> 223<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"> 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"> 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><br></span></code></pre></div></div> 224<p>Valid <code>params</code> consist of:</p> 225<ul> 226<li>'item' (Item). Required.</li> 227<li>'animated' (boolean). Optional.</li> 228<li>'viewOffset' (number). Optional.</li> 229<li>'viewPosition' (number). Optional.</li> 230</ul> 231<hr> 232<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> 233<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> 234<p>Scroll to a specific content pixel offset in the list.</p> 235<p>Param <code>offset</code> expects the offset to scroll to. In case of <code>horizontal</code> is true, the offset is the x-value, in any other case the offset is the y-value.</p> 236<p>Param <code>animated</code> (<code>true</code> by default) defines whether the list should do an animation while scrolling.</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/virtualizedlist.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/virtualizedlist.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/view><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>View</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/drawerlayoutandroid><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>DrawerLayoutAndroid</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=#scrollview-props class="table-of-contents__link toc-highlight">ScrollView Props</a><li><a href=#data class="table-of-contents__link toc-highlight"><code>data</code></a><li><a href=#required-getitem class="table-of-contents__link toc-highlight"><div class="label required basic">Required</div> <strong><code>getItem</code></strong></a><li><a href=#required-getitemcount class="table-of-contents__link toc-highlight"><div class="label required basic">Required</div> <strong><code>getItemCount</code></strong></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=#cellrenderercomponent class="table-of-contents__link toc-highlight"><code>CellRendererComponent</code></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=#listitemcomponent class="table-of-contents__link toc-highlight"><code>ListItemComponent</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=#debug class="table-of-contents__link toc-highlight"><code>debug</code></a><li><a href=#disablevirtualization class="table-of-contents__link toc-highlight"><code>disableVirtualization</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=#maxtorenderperbatch class="table-of-contents__link toc-highlight"><code>maxToRenderPerBatch</code></a><li><a href=#onendreached class="table-of-contents__link toc-highlight"><code>onEndReached</code></a><li><a href=#onendreachedthreshold class="table-of-contents__link toc-highlight"><code>onEndReachedThreshold</code></a><li><a href=#onrefresh class="table-of-contents__link toc-highlight"><code>onRefresh</code></a><li><a href=#onscrolltoindexfailed class="table-of-contents__link toc-highlight"><code>onScrollToIndexFailed</code></a><li><a href=#onstartreached class="table-of-contents__link toc-highlight"><code>onStartReached</code></a><li><a href=#onstartreachedthreshold class="table-of-contents__link toc-highlight"><code>onStartReachedThreshold</code></a><li><a href=#onviewableitemschanged class="table-of-contents__link toc-highlight"><code>onViewableItemsChanged</code></a><li><a href=#persistentscrollbar class="table-of-contents__link toc-highlight"><code>persistentScrollbar</code></a><li><a href=#progressviewoffset class="table-of-contents__link toc-highlight"><code>progressViewOffset</code></a><li><a href=#refreshcontrol class="table-of-contents__link toc-highlight"><code>refreshControl</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=#renderscrollcomponent class="table-of-contents__link toc-highlight"><code>renderScrollComponent</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><li><a href=#updatecellsbatchingperiod class="table-of-contents__link toc-highlight"><code>updateCellsBatchingPeriod</code></a><li><a href=#windowsize class="table-of-contents__link toc-highlight"><code>windowSize</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=#getscrollablenode class="table-of-contents__link toc-highlight"><code>getScrollableNode()</code></a><li><a href=#getscrollref class="table-of-contents__link toc-highlight"><code>getScrollRef()</code></a><li><a href=#getscrollresponder class="table-of-contents__link toc-highlight"><code>getScrollResponder()</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>