this repo has no description
kitten.sh
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-sectionlist" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>SectionList · 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/sectionlist><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="SectionList · React Native"><meta data-rh=true name=description content="A performant interface for rendering sectioned lists, supporting the most handy features:"><meta data-rh=true property=og:description content="A performant interface for rendering sectioned 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/sectionlist><link data-rh=true rel=alternate href=https://reactnative.dev/docs/sectionlist hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/sectionlist 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/sectionlist>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/sectionlist>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/sectionlist>0.79</a><li><a class=dropdown__link href=/docs/0.78/sectionlist>0.78</a><li><a class=dropdown__link href=/docs/0.77/sectionlist>0.77</a><li><a class=dropdown__link href=/docs/0.76/sectionlist>0.76</a><li><a class=dropdown__link href=/docs/0.75/sectionlist>0.75</a><li><a class=dropdown__link href=/docs/0.74/sectionlist>0.74</a><li><a class=dropdown__link href=/docs/0.73/sectionlist>0.73</a><li><a class=dropdown__link href=/docs/0.72/sectionlist>0.72</a><li><a class=dropdown__link href=/docs/0.71/sectionlist>0.71</a><li><a class=dropdown__link href=/docs/0.70/sectionlist>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 menu__link--active" aria-current=page 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>SectionList</h1></header><p>A performant interface for rendering sectioned lists, supporting the most handy features:</p>
5<ul>
6<li>Fully cross-platform.</li>
7<li>Configurable viewability callbacks.</li>
8<li>List header support.</li>
9<li>List footer support.</li>
10<li>Item separator support.</li>
11<li>Section header support.</li>
12<li>Section separator support.</li>
13<li>Heterogeneous data and item rendering support.</li>
14<li>Pull to Refresh.</li>
15<li>Scroll loading.</li>
16</ul>
17<p>If you don't need section support and want a simpler interface, use <a href=/docs/flatlist><code><FlatList></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=snack-player data-snack-name="SectionList 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%7BStyleSheet%2C%20Text%2C%20View%2C%20SectionList%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%20title%3A%20'Main%20dishes'%2C%5Cn%20%20%20%20data%3A%20%5B'Pizza'%2C%20'Burger'%2C%20'Risotto'%5D%2C%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20title%3A%20'Sides'%2C%5Cn%20%20%20%20data%3A%20%5B'French%20Fries'%2C%20'Onion%20Rings'%2C%20'Fried%20Shrimps'%5D%2C%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20title%3A%20'Drinks'%2C%5Cn%20%20%20%20data%3A%20%5B'Water'%2C%20'Coke'%2C%20'Beer'%5D%2C%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20title%3A%20'Desserts'%2C%5Cn%20%20%20%20data%3A%20%5B'Cheese%20Cake'%2C%20'Ice%20Cream'%5D%2C%5Cn%20%20%7D%2C%5Cn%5D%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%3CSectionList%5Cn%20%20%20%20%20%20%20%20sections%3D%7BDATA%7D%5Cn%20%20%20%20%20%20%20%20keyExtractor%3D%7B(item%2C%20index)%20%3D%3E%20item%20%2B%20index%7D%5Cn%20%20%20%20%20%20%20%20renderItem%3D%7B(%7Bitem%7D)%20%3D%3E%20(%5Cn%20%20%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.item%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%7Bitem%7D%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%5Cn%20%20%20%20%20%20%20%20)%7D%5Cn%20%20%20%20%20%20%20%20renderSectionHeader%3D%7B(%7Bsection%3A%20%7Btitle%7D%7D)%20%3D%3E%20(%5Cn%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.header%7D%3E%7Btitle%7D%3C%2FText%3E%5Cn%20%20%20%20%20%20%20%20)%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%20paddingTop%3A%20StatusBar.currentHeight%2C%5Cn%20%20%20%20marginHorizontal%3A%2016%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%7D%2C%5Cn%20%20header%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2032%2C%5Cn%20%20%20%20backgroundColor%3A%20'%23fff'%2C%5Cn%20%20%7D%2C%5Cn%20%20title%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2024%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>
20<p>This is a convenience wrapper around <a href=/docs/virtualizedlist><code><VirtualizedList></code></a>, and thus inherits its props (as well as those of <a href=/docs/scrollview><code><ScrollView></code></a>) that aren't explicitly listed here, along with the following caveats:</p>
21<ul>
22<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>
23<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>
24<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>
25<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>
26</ul>
27<hr>
28<h1>Reference</h1>
29<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>
30<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>
31<p>Inherits <a href=/docs/virtualizedlist#props>VirtualizedList Props</a>.</p>
32<hr>
33<h3 class="anchor anchorWithStickyNavbar_JmGV" id=requiredrenderitem><div class="label required basic">Required</div><strong><code>renderItem</code></strong><a href=#requiredrenderitem class=hash-link aria-label="Direct link to requiredrenderitem" title="Direct link to requiredrenderitem"></a></h3>
34<p>Default renderer for every item in every section. Can be over-ridden on a per-section basis. Should return a React element.</p>
35<table><thead><tr><th>Type<tbody><tr><td>function</table>
36<p>The render function will be passed an object with the following keys:</p>
37<ul>
38<li>'item' (object) - the item object as specified in this section's <code>data</code> key</li>
39<li>'index' (number) - Item's index within the section.</li>
40<li>'section' (object) - The full section object as specified in <code>sections</code>.</li>
41<li>'separators' (object) - An object with the following keys:<!-- -->
42<ul>
43<li>'highlight' (function) - <code>() => void</code></li>
44<li>'unhighlight' (function) - <code>() => void</code></li>
45<li>'updateProps' (function) - <code>(select, newProps) => void</code>
46<ul>
47<li>'select' (enum) - possible values are 'leading', 'trailing'</li>
48<li>'newProps' (object)</li>
49</ul>
50</li>
51</ul>
52</li>
53</ul>
54<hr>
55<h3 class="anchor anchorWithStickyNavbar_JmGV" id=requiredsections><div class="label required basic">Required</div><strong><code>sections</code></strong><a href=#requiredsections class=hash-link aria-label="Direct link to requiredsections" title="Direct link to requiredsections"></a></h3>
56<p>The actual data to render, akin to the <code>data</code> prop in <a href=/docs/flatlist><code>FlatList</code></a>.</p>
57<table><thead><tr><th>Type<tbody><tr><td>array of <a href=/docs/sectionlist#section>Section</a>s</table>
58<hr>
59<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>
60<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>
61<table><thead><tr><th>Type<tbody><tr><td>any</table>
62<hr>
63<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>
64<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>
65<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>10</code></table>
66<hr>
67<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>
68<p>Reverses the direction of scroll. Uses scale transforms of -1.</p>
69<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td><code>false</code></table>
70<hr>
71<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>
72<p>Rendered in between each item, but not at the top or bottom. By default, <code>highlighted</code>, <code>section</code>, and <code>[leading/trailing][Item/Section]</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><SomeComponent /></code>).</p>
73<table><thead><tr><th>Type<tbody><tr><td>component, function, element</table>
74<hr>
75<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>
76<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. Note that this sets keys for each item, but each overall section still needs its own key.</p>
77<table><thead><tr><th>Type<tbody><tr><td>(item: object, index: number) => string</table>
78<hr>
79<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>
80<p>Rendered when the list is empty. Can be a React Component (e.g. <code>SomeComponent</code>), or a React element (e.g. <code><SomeComponent /></code>).</p>
81<table><thead><tr><th>Type<tbody><tr><td>component, element</table>
82<hr>
83<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>
84<p>Rendered at the very end of the list. Can be a React Component (e.g. <code>SomeComponent</code>), or a React element (e.g. <code><SomeComponent /></code>).</p>
85<table><thead><tr><th>Type<tbody><tr><td>component, element</table>
86<hr>
87<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>
88<p>Rendered at the very beginning of the list. Can be a React Component (e.g. <code>SomeComponent</code>), or a React element (e.g. <code><SomeComponent /></code>).</p>
89<table><thead><tr><th>Type<tbody><tr><td>component, element</table>
90<hr>
91<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>
92<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. To offset the RefreshControl from the top (e.g. by 100 pts), use <code>progressViewOffset={100}</code>.</p>
93<table><thead><tr><th>Type<tbody><tr><td>function</table>
94<hr>
95<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>
96<p>Called when the viewability of rows changes, as defined by the <code>viewabilityConfig</code> prop.</p>
97<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>
98<hr>
99<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>
100<p>Set this true while waiting for new data from a refresh.</p>
101<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td><code>false</code></table>
102<hr>
103<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>
104<blockquote>
105<p>Note: may have bugs (missing content) in some circumstances - use at your own risk.</p>
106</blockquote>
107<p>This may improve scroll performance for large lists.</p>
108<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td><code>false</code></table>
109<hr>
110<h3 class="anchor anchorWithStickyNavbar_JmGV" id=rendersectionfooter><code>renderSectionFooter</code><a href=#rendersectionfooter class=hash-link aria-label="Direct link to rendersectionfooter" title="Direct link to rendersectionfooter"></a></h3>
111<p>Rendered at the bottom of each section.</p>
112<table><thead><tr><th>Type<tbody><tr><td><code>(info: {section: <a href=/docs/sectionlist#section>Section</a>}) => element ｜ null</code></table>
113<hr>
114<h3 class="anchor anchorWithStickyNavbar_JmGV" id=rendersectionheader><code>renderSectionHeader</code><a href=#rendersectionheader class=hash-link aria-label="Direct link to rendersectionheader" title="Direct link to rendersectionheader"></a></h3>
115<p>Rendered at the top of each section. These stick to the top of the <code>ScrollView</code> by default on iOS. See <code>stickySectionHeadersEnabled</code>.</p>
116<table><thead><tr><th>Type<tbody><tr><td><code>(info: {section: <a href=/docs/sectionlist#section>Section</a>}) => element ｜ null</code></table>
117<hr>
118<h3 class="anchor anchorWithStickyNavbar_JmGV" id=sectionseparatorcomponent><code>SectionSeparatorComponent</code><a href=#sectionseparatorcomponent class=hash-link aria-label="Direct link to sectionseparatorcomponent" title="Direct link to sectionseparatorcomponent"></a></h3>
119<p>Rendered at the top and bottom of each section (note this is different from <code>ItemSeparatorComponent</code> which is only rendered between items). These are intended to separate sections from the headers above and below and typically have the same highlight response as <code>ItemSeparatorComponent</code>. Also receives <code>highlighted</code>, <code>[leading/trailing][Item/Section]</code>, and any custom props from <code>separators.updateProps</code>.</p>
120<table><thead><tr><th>Type<tbody><tr><td>component, element</table>
121<hr>
122<h3 class="anchor anchorWithStickyNavbar_JmGV" id=stickysectionheadersenabled><code>stickySectionHeadersEnabled</code><a href=#stickysectionheadersenabled class=hash-link aria-label="Direct link to stickysectionheadersenabled" title="Direct link to stickysectionheadersenabled"></a></h3>
123<p>Makes section headers stick to the top of the screen until the next one pushes it off. Only enabled by default on iOS because that is the platform standard there.</p>
124<table><thead><tr><th>Type<th>Default<tbody><tr><td>boolean<td><code>false</code> <div class="label android">Android</div><hr><code>true</code> <div class="label ios">iOS</div></table>
125<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>
126<h3 class="anchor anchorWithStickyNavbar_JmGV" id=flashscrollindicators-ios><code>flashScrollIndicators()</code> <div class="label ios">iOS</div><a href=#flashscrollindicators-ios class=hash-link aria-label="Direct link to flashscrollindicators-ios" title="Direct link to flashscrollindicators-ios"></a></h3>
127<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>
128<p>Displays the scroll indicators momentarily.</p>
129<hr>
130<h3 class="anchor anchorWithStickyNavbar_JmGV" id=recordinteraction><code>recordInteraction()</code><a href=#recordinteraction class=hash-link aria-label="Direct link to recordinteraction" title="Direct link to recordinteraction"></a></h3>
131<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>recordInteraction</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>
132<p>Tells the list an interaction has occurred, which should trigger viewability calculations, e.g. if <code>waitForInteractions</code> is true and the user has not scrolled. This is typically called by taps on items or by navigation actions.</p>
133<hr>
134<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrolltolocation><code>scrollToLocation()</code><a href=#scrolltolocation class=hash-link aria-label="Direct link to scrolltolocation" title="Direct link to scrolltolocation"></a></h3>
135<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>scrollToLocation</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 maybe-class-name">SectionListScrollParams</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
136<p>Scrolls to the item at the specified <code>sectionIndex</code> and <code>itemIndex</code> (within the section) positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle.</p>
137<blockquote>
138<p>Note: Cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> or <code>onScrollToIndexFailed</code> prop.</p>
139</blockquote>
140<p><strong>Parameters:</strong></p>
141<table><thead><tr><th>Name<th>Type<tbody><tr><td>params <div class="label basic required">Required</div><td>object</table>
142<p>Valid <code>params</code> keys are:</p>
143<ul>
144<li>'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to <code>true</code>.</li>
145<li>'itemIndex' (number) - Index within section for the item to scroll to. Required.</li>
146<li>'sectionIndex' (number) - Index for section that contains the item to scroll to. Required.</li>
147<li>'viewOffset' (number) - A fixed number of pixels to offset the final target position, e.g. to compensate for sticky headers.</li>
148<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>
149</ul>
150<h2 class="anchor anchorWithStickyNavbar_JmGV" id=type-definitions>Type Definitions<a href=#type-definitions class=hash-link aria-label="Direct link to Type Definitions" title="Direct link to Type Definitions"></a></h2>
151<h3 class="anchor anchorWithStickyNavbar_JmGV" id=section>Section<a href=#section class=hash-link aria-label="Direct link to Section" title="Direct link to Section"></a></h3>
152<p>An object that identifies the data to be rendered for a given section.</p>
153<table><thead><tr><th>Type<tbody><tr><td>any</table>
154<p><strong>Properties:</strong></p>
155<table><thead><tr><th>Name<th>Type<th>Description<tbody><tr><td>data <div class="label basic required">Required</div><td>array<td>The data for rendering items in this section. Array of objects, much like <a href=/docs/flatlist#required-data><code>FlatList</code>'s data prop</a>.<tr><td>key<td>string<td>Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections, the array index will be used by default.<tr><td>renderItem<td>function<td>Optionally define an arbitrary item renderer for this section, overriding the default <a href=/docs/sectionlist#renderitem><code>renderItem</code></a> for the list.<tr><td>ItemSeparatorComponent<td>component, element<td>Optionally define an arbitrary item separator for this section, overriding the default <a href=/docs/sectionlist#itemseparatorcomponent><code>ItemSeparatorComponent</code></a> for the list.<tr><td>keyExtractor<td>function<td>Optionally define an arbitrary key extractor for this section, overriding the default <a href=/docs/sectionlist#keyextractor><code>keyExtractor</code></a>.</table></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/sectionlist.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/sectionlist.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/scrollview><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>ScrollView</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/statusbar><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>StatusBar</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=#requiredrenderitem class="table-of-contents__link toc-highlight"><div class="label required basic">Required</div><strong><code>renderItem</code></strong></a><li><a href=#requiredsections class="table-of-contents__link toc-highlight"><div class="label required basic">Required</div><strong><code>sections</code></strong></a><li><a href=#extradata class="table-of-contents__link toc-highlight"><code>extraData</code></a><li><a href=#initialnumtorender class="table-of-contents__link toc-highlight"><code>initialNumToRender</code></a><li><a href=#inverted class="table-of-contents__link toc-highlight"><code>inverted</code></a><li><a href=#itemseparatorcomponent class="table-of-contents__link toc-highlight"><code>ItemSeparatorComponent</code></a><li><a href=#keyextractor class="table-of-contents__link toc-highlight"><code>keyExtractor</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=#listheadercomponent class="table-of-contents__link toc-highlight"><code>ListHeaderComponent</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=#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=#rendersectionfooter class="table-of-contents__link toc-highlight"><code>renderSectionFooter</code></a><li><a href=#rendersectionheader class="table-of-contents__link toc-highlight"><code>renderSectionHeader</code></a><li><a href=#sectionseparatorcomponent class="table-of-contents__link toc-highlight"><code>SectionSeparatorComponent</code></a><li><a href=#stickysectionheadersenabled class="table-of-contents__link toc-highlight"><code>stickySectionHeadersEnabled</code></a></ul><li><a href=#methods class="table-of-contents__link toc-highlight">Methods</a><ul><li><a href=#flashscrollindicators-ios class="table-of-contents__link toc-highlight"><code>flashScrollIndicators()</code> <div class="label ios">iOS</div></a><li><a href=#recordinteraction class="table-of-contents__link toc-highlight"><code>recordInteraction()</code></a><li><a href=#scrolltolocation class="table-of-contents__link toc-highlight"><code>scrollToLocation()</code></a></ul><li><a href=#type-definitions class="table-of-contents__link toc-highlight">Type Definitions</a><ul><li><a href=#section class="table-of-contents__link toc-highlight">Section</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>