kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_scrollview.html
at main 88 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-scrollview" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>ScrollView · 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/scrollview><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="ScrollView · React Native"><meta data-rh=true name=description content='Component that wraps platform ScrollView while providing integration with touch locking "responder" system.'><meta data-rh=true property=og:description content='Component that wraps platform ScrollView while providing integration with touch locking "responder" system.'><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/scrollview><link data-rh=true rel=alternate href=https://reactnative.dev/docs/scrollview hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/scrollview 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/scrollview>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/scrollview>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/scrollview>0.79</a><li><a class=dropdown__link href=/docs/0.78/scrollview>0.78</a><li><a class=dropdown__link href=/docs/0.77/scrollview>0.77</a><li><a class=dropdown__link href=/docs/0.76/scrollview>0.76</a><li><a class=dropdown__link href=/docs/0.75/scrollview>0.75</a><li><a class=dropdown__link href=/docs/0.74/scrollview>0.74</a><li><a class=dropdown__link href=/docs/0.73/scrollview>0.73</a><li><a class=dropdown__link href=/docs/0.72/scrollview>0.72</a><li><a class=dropdown__link href=/docs/0.71/scrollview>0.71</a><li><a class=dropdown__link href=/docs/0.70/scrollview>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 menu__link--active" aria-current=page tabindex=0 href=/docs/scrollview>ScrollView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/sectionlist>SectionList</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/statusbar>StatusBar</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/switch>Switch</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/text>Text</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/textinput>TextInput</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablehighlight>TouchableHighlight</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchableopacity>TouchableOpacity</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablewithoutfeedback>TouchableWithoutFeedback</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/view>View</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/virtualizedlist>VirtualizedList</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/drawerlayoutandroid>Android Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/drawerlayoutandroid>DrawerLayoutAndroid</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/touchablenativefeedback>TouchableNativeFeedback</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true tabindex=0 href=/docs/inputaccessoryview>iOS Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/inputaccessoryview>InputAccessoryView</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/safeareaview>SafeAreaView</a></ul></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/image-style-props>Props</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/boxshadowvalue>Object Types</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>ScrollView</h1></header><p>Component that wraps platform ScrollView while providing integration with touch locking "responder" system.</p> 5<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p> 6<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p> 7<p><code>&lt;ScrollView></code> vs <a href=/docs/flatlist><code>&lt;FlatList></code></a> - which one to use?</p> 8<p><code>ScrollView</code> renders all its react child components at once, but this has a performance downside.</p> 9<p>Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p> 10<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p> 11<p><code>FlatList</code> is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.</p> 12<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> 13<div class=snack-player data-snack-name="ScrollView 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%20ScrollView%2C%20StatusBar%7D%20from%20'react-native'%3B%5Cnimport%20%7BSafeAreaView%2C%20SafeAreaProvider%7D%20from%20'react-native-safe-area-context'%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%3CScrollView%20style%3D%7Bstyles.scrollView%7D%3E%5Cn%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.text%7D%3E%5Cn%20%20%20%20%20%20%20%20%20%20Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit%2C%20sed%20do%5Cn%20%20%20%20%20%20%20%20%20%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%5Cn%20%20%20%20%20%20%20%20%20%20minim%20veniam%2C%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%5Cn%20%20%20%20%20%20%20%20%20%20aliquip%20ex%20ea%20commodo%20consequat.%20Duis%20aute%20irure%20dolor%20in%5Cn%20%20%20%20%20%20%20%20%20%20reprehenderit%20in%20voluptate%20velit%20esse%20cillum%20dolore%20eu%20fugiat%20nulla%5Cn%20%20%20%20%20%20%20%20%20%20pariatur.%20Excepteur%20sint%20occaecat%20cupidatat%20non%20proident%2C%20sunt%20in%5Cn%20%20%20%20%20%20%20%20%20%20culpa%20qui%20officia%20deserunt%20mollit%20anim%20id%20est%20laborum.%5Cn%20%20%20%20%20%20%20%20%3C%2FText%3E%5Cn%20%20%20%20%20%20%3C%2FScrollView%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%7D%2C%5Cn%20%20scrollView%3A%20%7B%5Cn%20%20%20%20backgroundColor%3A%20'pink'%2C%5Cn%20%20%7D%2C%5Cn%20%20text%3A%20%7B%5Cn%20%20%20%20fontSize%3A%2042%2C%5Cn%20%20%20%20padding%3A%2012%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> 14<hr> 15<h1>Reference</h1> 16<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> 17<h3 class="anchor anchorWithStickyNavbar_JmGV" id=view-props><a href=/docs/view#props>View Props</a><a href=#view-props class=hash-link aria-label="Direct link to view-props" title="Direct link to view-props">​</a></h3> 18<p>Inherits <a href=/docs/view#props>View Props</a>.</p> 19<hr> 20<h3 class="anchor anchorWithStickyNavbar_JmGV" id=stickyheadercomponent><code>StickyHeaderComponent</code><a href=#stickyheadercomponent class=hash-link aria-label="Direct link to stickyheadercomponent" title="Direct link to stickyheadercomponent">​</a></h3> 21<p>A React Component that will be used to render sticky headers, should be used together with <code>stickyHeaderIndices</code>. You may need to set this component if your sticky header uses custom transforms, for example, when you want your list to have an animated and hidable header. If a component has not been provided, the default <a href=https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js target=_blank rel="noopener noreferrer"><code>ScrollViewStickyHeader</code></a> component will be used.</p> 22<table><thead><tr><th>Type<tbody><tr><td>component, element</table> 23<hr> 24<h3 class="anchor anchorWithStickyNavbar_JmGV" id=alwaysbouncehorizontal-ios><code>alwaysBounceHorizontal</code> <div class="label ios">iOS</div><a href=#alwaysbouncehorizontal-ios class=hash-link aria-label="Direct link to alwaysbouncehorizontal-ios" title="Direct link to alwaysbouncehorizontal-ios">​</a></h3> 25<p>When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself.</p> 26<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code> when <code>horizontal={true}</code><hr><code>false</code> otherwise</table> 27<hr> 28<h3 class="anchor anchorWithStickyNavbar_JmGV" id=alwaysbouncevertical-ios><code>alwaysBounceVertical</code> <div class="label ios">iOS</div><a href=#alwaysbouncevertical-ios class=hash-link aria-label="Direct link to alwaysbouncevertical-ios" title="Direct link to alwaysbouncevertical-ios">​</a></h3> 29<p>When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself.</p> 30<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code> when <code>vertical={true}</code><hr><code>true</code> otherwise</table> 31<hr> 32<h3 class="anchor anchorWithStickyNavbar_JmGV" id=automaticallyadjustcontentinsets-ios><code>automaticallyAdjustContentInsets</code> <div class="label ios">iOS</div><a href=#automaticallyadjustcontentinsets-ios class=hash-link aria-label="Direct link to automaticallyadjustcontentinsets-ios" title="Direct link to automaticallyadjustcontentinsets-ios">​</a></h3> 33<p>Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/toolbar.</p> 34<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 35<hr> 36<h3 class="anchor anchorWithStickyNavbar_JmGV" id=automaticallyadjustkeyboardinsets-ios><code>automaticallyAdjustKeyboardInsets</code> <div class="label ios">iOS</div><a href=#automaticallyadjustkeyboardinsets-ios class=hash-link aria-label="Direct link to automaticallyadjustkeyboardinsets-ios" title="Direct link to automaticallyadjustkeyboardinsets-ios">​</a></h3> 37<p>Controls whether the ScrollView should automatically adjust its <code>contentInset</code> and <code>scrollViewInsets</code> when the Keyboard changes its size.</p> 38<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 39<hr> 40<h3 class="anchor anchorWithStickyNavbar_JmGV" id=automaticallyadjustsscrollindicatorinsets-ios><code>automaticallyAdjustsScrollIndicatorInsets</code> <div class="label ios">iOS</div><a href=#automaticallyadjustsscrollindicatorinsets-ios class=hash-link aria-label="Direct link to automaticallyadjustsscrollindicatorinsets-ios" title="Direct link to automaticallyadjustsscrollindicatorinsets-ios">​</a></h3> 41<p>Controls whether iOS should automatically adjust the scroll indicator insets. See Apple's <a href=https://developer.apple.com/documentation/uikit/uiscrollview/3198043-automaticallyadjustsscrollindica target=_blank rel="noopener noreferrer">documentation on the property</a>.</p> 42<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 43<hr> 44<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bounces-ios><code>bounces</code> <div class="label ios">iOS</div><a href=#bounces-ios class=hash-link aria-label="Direct link to bounces-ios" title="Direct link to bounces-ios">​</a></h3> 45<p>When true, the scroll view bounces when it reaches the end of the content if the content is larger than the scroll view along the axis of the scroll direction. When <code>false</code>, it disables all bouncing even if the <code>alwaysBounce*</code> props are <code>true</code>.</p> 46<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 47<hr> 48<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bounceszoom-ios><code>bouncesZoom</code> <div class="label ios">iOS</div><a href=#bounceszoom-ios class=hash-link aria-label="Direct link to bounceszoom-ios" title="Direct link to bounceszoom-ios">​</a></h3> 49<p>When <code>true</code>, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits.</p> 50<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 51<hr> 52<h3 class="anchor anchorWithStickyNavbar_JmGV" id=cancancelcontenttouches-ios><code>canCancelContentTouches</code> <div class="label ios">iOS</div><a href=#cancancelcontenttouches-ios class=hash-link aria-label="Direct link to cancancelcontenttouches-ios" title="Direct link to cancancelcontenttouches-ios">​</a></h3> 53<p>When <code>false</code>, once tracking starts, won't try to drag if the touch moves.</p> 54<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 55<hr> 56<h3 class="anchor anchorWithStickyNavbar_JmGV" id=centercontent-ios><code>centerContent</code> <div class="label ios">iOS</div><a href=#centercontent-ios class=hash-link aria-label="Direct link to centercontent-ios" title="Direct link to centercontent-ios">​</a></h3> 57<p>When <code>true</code>, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect.</p> 58<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 59<hr> 60<h3 class="anchor anchorWithStickyNavbar_JmGV" id=contentcontainerstyle><code>contentContainerStyle</code><a href=#contentcontainerstyle class=hash-link aria-label="Direct link to contentcontainerstyle" title="Direct link to contentcontainerstyle">​</a></h3> 61<p>These styles will be applied to the scroll view content container which wraps all of the child views. Example:</p> 62<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>ScrollView</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>contentContainerStyle</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>contentContainer</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>ScrollView</span><span class="token tag 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><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token spread 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 keyword" style=color:#c5a5c5>const</span><span class="token plain"> styles </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token maybe-class-name">StyleSheet</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>create</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> contentContainer</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"> paddingVertical</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>20</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div> 63<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/view-style-props>View Style</a></table> 64<hr> 65<h3 class="anchor anchorWithStickyNavbar_JmGV" id=contentinset-ios><code>contentInset</code> <div class="label ios">iOS</div><a href=#contentinset-ios class=hash-link aria-label="Direct link to contentinset-ios" title="Direct link to contentinset-ios">​</a></h3> 66<p>The amount by which the scroll view content is inset from the edges of the scroll view.</p> 67<table><thead><tr><th>Type<th>Default<tbody><tr><td>object: <code>{top: number, left: number, bottom: number, right: number}</code><td><code>{top: 0, left: 0, bottom: 0, right: 0}</code></table> 68<hr> 69<h3 class="anchor anchorWithStickyNavbar_JmGV" id=contentinsetadjustmentbehavior-ios><code>contentInsetAdjustmentBehavior</code> <div class="label ios">iOS</div><a href=#contentinsetadjustmentbehavior-ios class=hash-link aria-label="Direct link to contentinsetadjustmentbehavior-ios" title="Direct link to contentinsetadjustmentbehavior-ios">​</a></h3> 70<p>This property specifies how the safe area insets are used to modify the content area of the scroll view. Available on iOS 11 and later.</p> 71<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'automatic'</code>, <code>'scrollableAxes'</code>, <code>'never'</code>, <code>'always'</code>)<td><code>'never'</code></table> 72<hr> 73<h3 class="anchor anchorWithStickyNavbar_JmGV" id=contentoffset><code>contentOffset</code><a href=#contentoffset class=hash-link aria-label="Direct link to contentoffset" title="Direct link to contentoffset">​</a></h3> 74<p>Used to manually set the starting scroll offset.</p> 75<table><thead><tr><th>Type<th>Default<tbody><tr><td>Point<td><code>{x: 0, y: 0}</code></table> 76<hr> 77<h3 class="anchor anchorWithStickyNavbar_JmGV" id=decelerationrate><code>decelerationRate</code><a href=#decelerationrate class=hash-link aria-label="Direct link to decelerationrate" title="Direct link to decelerationrate">​</a></h3> 78<p>A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts <code>"normal"</code> and <code>"fast"</code> which match the underlying iOS settings for <code>UIScrollViewDecelerationRateNormal</code> and <code>UIScrollViewDecelerationRateFast</code> respectively.</p> 79<ul> 80<li><code>'normal'</code> 0.998 on iOS, 0.985 on Android.</li> 81<li><code>'fast'</code>, 0.99 on iOS, 0.9 on Android.</li> 82</ul> 83<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'fast'</code>, <code>'normal'</code>), number<td><code>'normal'</code></table> 84<hr> 85<h3 class="anchor anchorWithStickyNavbar_JmGV" id=directionallockenabled-ios><code>directionalLockEnabled</code> <div class="label ios">iOS</div><a href=#directionallockenabled-ios class=hash-link aria-label="Direct link to directionallockenabled-ios" title="Direct link to directionallockenabled-ios">​</a></h3> 86<p>When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging.</p> 87<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 88<hr> 89<h3 class="anchor anchorWithStickyNavbar_JmGV" id=disableintervalmomentum><code>disableIntervalMomentum</code><a href=#disableintervalmomentum class=hash-link aria-label="Direct link to disableintervalmomentum" title="Direct link to disableintervalmomentum">​</a></h3> 90<p>When true, the scroll view stops on the next index (in relation to scroll position at release) regardless of how fast the gesture is. This can be used for pagination when the page is less than the width of the horizontal ScrollView or the height of the vertical ScrollView.</p> 91<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 92<hr> 93<h3 class="anchor anchorWithStickyNavbar_JmGV" id=disablescrollviewpanresponder><code>disableScrollViewPanResponder</code><a href=#disablescrollviewpanresponder class=hash-link aria-label="Direct link to disablescrollviewpanresponder" title="Direct link to disablescrollviewpanresponder">​</a></h3> 94<p>When true, the default JS pan responder on the ScrollView is disabled, and full control over touches inside the ScrollView is left to its child components. This is particularly useful if <code>snapToInterval</code> is enabled, since it does not follow typical touch patterns. Do not use this on regular ScrollView use cases without <code>snapToInterval</code> as it may cause unexpected touches to occur while scrolling.</p> 95<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 96<hr> 97<h3 class="anchor anchorWithStickyNavbar_JmGV" id=endfillcolor-android><code>endFillColor</code> <div class="label android">Android</div><a href=#endfillcolor-android class=hash-link aria-label="Direct link to endfillcolor-android" title="Direct link to endfillcolor-android">​</a></h3> 98<p>Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case.</p> 99<table><thead><tr><th>Type<tbody><tr><td><a href=/docs/colors>color</a></table> 100<hr> 101<h3 class="anchor anchorWithStickyNavbar_JmGV" id=fadingedgelength-android><code>fadingEdgeLength</code> <div class="label android">Android</div><a href=#fadingedgelength-android class=hash-link aria-label="Direct link to fadingedgelength-android" title="Direct link to fadingedgelength-android">​</a></h3> 102<p>Fades out the edges of the scroll content.</p> 103<p>If the value is greater than <code>0</code>, the fading edges will be set accordingly to the current scroll direction and position, indicating if there is more content to show.</p> 104<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>0</code></table> 105<hr> 106<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> 107<p>When <code>true</code>, the scroll view's children are arranged horizontally in a row instead of vertically in a column.</p> 108<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 109<hr> 110<h3 class="anchor anchorWithStickyNavbar_JmGV" id=indicatorstyle-ios><code>indicatorStyle</code> <div class="label ios">iOS</div><a href=#indicatorstyle-ios class=hash-link aria-label="Direct link to indicatorstyle-ios" title="Direct link to indicatorstyle-ios">​</a></h3> 111<p>The style of the scroll indicators.</p> 112<ul> 113<li><code>'default'</code> same as <code>black</code>.</li> 114<li><code>'black'</code>, scroll indicator is <code>black</code>. This style is good against a light background.</li> 115<li><code>'white'</code>, scroll indicator is <code>white</code>. This style is good against a dark background.</li> 116</ul> 117<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'default'</code>, <code>'black'</code>, <code>'white'</code>)<td><code>'default'</code></table> 118<hr> 119<h3 class="anchor anchorWithStickyNavbar_JmGV" id=invertstickyheaders><code>invertStickyHeaders</code><a href=#invertstickyheaders class=hash-link aria-label="Direct link to invertstickyheaders" title="Direct link to invertstickyheaders">​</a></h3> 120<p>If sticky headers should stick at the bottom instead of the top of the ScrollView. This is usually used with inverted ScrollViews.</p> 121<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 122<hr> 123<h3 class="anchor anchorWithStickyNavbar_JmGV" id=keyboarddismissmode><code>keyboardDismissMode</code><a href=#keyboarddismissmode class=hash-link aria-label="Direct link to keyboarddismissmode" title="Direct link to keyboarddismissmode">​</a></h3> 124<p>Determines whether the keyboard gets dismissed in response to a drag.</p> 125<ul> 126<li><code>'none'</code>, drags do not dismiss the keyboard.</li> 127<li><code>'on-drag'</code>, the keyboard is dismissed when a drag begins.</li> 128</ul> 129<p><strong>iOS Only</strong></p> 130<ul> 131<li><code>'interactive'</code>, the keyboard is dismissed interactively with the drag and moves in synchrony with the touch, dragging upwards cancels the dismissal. On Android this is not supported and it will have the same behavior as <code>'none'</code>.</li> 132</ul> 133<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'none'</code>, <code>'on-drag'</code>) <div class="label android">Android</div><hr>enum(<code>'none'</code>, <code>'on-drag'</code>, <code>'interactive'</code>) <div class="label ios">iOS</div><td><code>'none'</code></table> 134<hr> 135<h3 class="anchor anchorWithStickyNavbar_JmGV" id=keyboardshouldpersisttaps><code>keyboardShouldPersistTaps</code><a href=#keyboardshouldpersisttaps class=hash-link aria-label="Direct link to keyboardshouldpersisttaps" title="Direct link to keyboardshouldpersisttaps">​</a></h3> 136<p>Determines when the keyboard should stay visible after a tap.</p> 137<ul> 138<li><code>'never'</code> tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.</li> 139<li><code>'always'</code>, the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.</li> 140<li><code>'handled'</code>, the keyboard will not dismiss automatically when the tap was handled by children of the scroll view (or captured by an ancestor).</li> 141<li><code>false</code>, <strong><em>deprecated</em></strong>, use <code>'never'</code> instead</li> 142<li><code>true</code>, <strong><em>deprecated</em></strong>, use <code>'always'</code> instead</li> 143</ul> 144<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'always'</code>, <code>'never'</code>, <code>'handled'</code>, <code>false</code>, <code>true</code>)<td><code>'never'</code></table> 145<hr> 146<h3 class="anchor anchorWithStickyNavbar_JmGV" id=maintainvisiblecontentposition><code>maintainVisibleContentPosition</code><a href=#maintainvisiblecontentposition class=hash-link aria-label="Direct link to maintainvisiblecontentposition" title="Direct link to maintainvisiblecontentposition">​</a></h3> 147<p>When set, the scroll view will adjust the scroll position so that the first child that is currently visible and at or beyond <code>minIndexForVisible</code> will not change position. This is useful for lists that are loading content in both directions, e.g. a chat thread, where new messages coming in might otherwise cause the scroll position to jump. A value of 0 is common, but other values such as 1 can be used to skip loading spinners or other content that should not maintain position.</p> 148<p>The optional <code>autoscrollToTopThreshold</code> can be used to make the content automatically scroll to the top after making the adjustment if the user was within the threshold of the top before the adjustment was made. This is also useful for chat-like applications where you want to see new messages scroll into place, but not if the user has scrolled up a ways and it would be disruptive to scroll a bunch.</p> 149<p>Caveat 1: Reordering elements in the scrollview with this enabled will probably cause jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now, don't re-order the content of any ScrollViews or Lists that use this feature.</p> 150<p>Caveat 2: This uses <code>contentOffset</code> and <code>frame.origin</code> in native code to compute visibility. Occlusion, transforms, and other complexity won't be taken into account as to whether content is "visible" or not.</p> 151<table><thead><tr><th>Type<tbody><tr><td>object: <code>{minIndexForVisible: number, autoscrollToTopThreshold: number}</code></table> 152<hr> 153<h3 class="anchor anchorWithStickyNavbar_JmGV" id=maximumzoomscale-ios><code>maximumZoomScale</code> <div class="label ios">iOS</div><a href=#maximumzoomscale-ios class=hash-link aria-label="Direct link to maximumzoomscale-ios" title="Direct link to maximumzoomscale-ios">​</a></h3> 154<p>The maximum allowed zoom scale.</p> 155<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>1.0</code></table> 156<hr> 157<h3 class="anchor anchorWithStickyNavbar_JmGV" id=minimumzoomscale-ios><code>minimumZoomScale</code> <div class="label ios">iOS</div><a href=#minimumzoomscale-ios class=hash-link aria-label="Direct link to minimumzoomscale-ios" title="Direct link to minimumzoomscale-ios">​</a></h3> 158<p>The minimum allowed zoom scale.</p> 159<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>1.0</code></table> 160<hr> 161<h3 class="anchor anchorWithStickyNavbar_JmGV" id=nestedscrollenabled-android><code>nestedScrollEnabled</code> <div class="label android">Android</div><a href=#nestedscrollenabled-android class=hash-link aria-label="Direct link to nestedscrollenabled-android" title="Direct link to nestedscrollenabled-android">​</a></h3> 162<p>Enables nested scrolling for Android API level 21+.</p> 163<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 164<hr> 165<h3 class="anchor anchorWithStickyNavbar_JmGV" id=oncontentsizechange><code>onContentSizeChange</code><a href=#oncontentsizechange class=hash-link aria-label="Direct link to oncontentsizechange" title="Direct link to oncontentsizechange">​</a></h3> 166<p>Called when scrollable content view of the ScrollView changes.</p> 167<p>The handler function will receive two parameters: the content width and content height <code>(contentWidth, contentHeight)</code>.</p> 168<p>It's implemented using onLayout handler attached to the content container which this ScrollView renders.</p> 169<table><thead><tr><th>Type<tbody><tr><td>function</table> 170<hr> 171<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onmomentumscrollbegin><code>onMomentumScrollBegin</code><a href=#onmomentumscrollbegin class=hash-link aria-label="Direct link to onmomentumscrollbegin" title="Direct link to onmomentumscrollbegin">​</a></h3> 172<p>Called when the momentum scroll starts (scroll which occurs as the ScrollView starts gliding).</p> 173<table><thead><tr><th>Type<tbody><tr><td>function</table> 174<hr> 175<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onmomentumscrollend><code>onMomentumScrollEnd</code><a href=#onmomentumscrollend class=hash-link aria-label="Direct link to onmomentumscrollend" title="Direct link to onmomentumscrollend">​</a></h3> 176<p>Called when the momentum scroll ends (scroll which occurs as the ScrollView glides to a stop).</p> 177<table><thead><tr><th>Type<tbody><tr><td>function</table> 178<hr> 179<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onscroll><code>onScroll</code><a href=#onscroll class=hash-link aria-label="Direct link to onscroll" title="Direct link to onscroll">​</a></h3> 180<p>Fires at most once per frame during scrolling. The event has the following shape (all values are numbers):</p> 181<div class="language-js codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-js 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"> </span><span class="token literal-property property" style=color:#2aa198>nativeEvent</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>contentInset</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">bottom</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> left</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> right</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> top</span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>contentOffset</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">x</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> y</span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>contentSize</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">height</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> width</span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>layoutMeasurement</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">height</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> width</span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> zoomScale</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 182<table><thead><tr><th>Type<tbody><tr><td>function</table> 183<hr> 184<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onscrollbegindrag><code>onScrollBeginDrag</code><a href=#onscrollbegindrag class=hash-link aria-label="Direct link to onscrollbegindrag" title="Direct link to onscrollbegindrag">​</a></h3> 185<p>Called when the user begins to drag the scroll view.</p> 186<table><thead><tr><th>Type<tbody><tr><td>function</table> 187<hr> 188<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onscrollenddrag><code>onScrollEndDrag</code><a href=#onscrollenddrag class=hash-link aria-label="Direct link to onscrollenddrag" title="Direct link to onscrollenddrag">​</a></h3> 189<p>Called when the user stops dragging the scroll view and it either stops or begins to glide.</p> 190<table><thead><tr><th>Type<tbody><tr><td>function</table> 191<hr> 192<h3 class="anchor anchorWithStickyNavbar_JmGV" id=onscrolltotop-ios><code>onScrollToTop</code> <div class="label ios">iOS</div><a href=#onscrolltotop-ios class=hash-link aria-label="Direct link to onscrolltotop-ios" title="Direct link to onscrolltotop-ios">​</a></h3> 193<p>Fires when the scroll view scrolls to top after the status bar has been tapped.</p> 194<table><thead><tr><th>Type<tbody><tr><td>function</table> 195<hr> 196<h3 class="anchor anchorWithStickyNavbar_JmGV" id=overscrollmode-android><code>overScrollMode</code> <div class="label android">Android</div><a href=#overscrollmode-android class=hash-link aria-label="Direct link to overscrollmode-android" title="Direct link to overscrollmode-android">​</a></h3> 197<p>Used to override default value of overScroll mode.</p> 198<p>Possible values:</p> 199<ul> 200<li><code>'auto'</code> - Allow a user to over-scroll this view only if the content is large enough to meaningfully scroll.</li> 201<li><code>'always'</code> - Always allow a user to over-scroll this view.</li> 202<li><code>'never'</code> - Never allow a user to over-scroll this view.</li> 203</ul> 204<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'auto'</code>, <code>'always'</code>, <code>'never'</code>)<td><code>'auto'</code></table> 205<hr> 206<h3 class="anchor anchorWithStickyNavbar_JmGV" id=pagingenabled><code>pagingEnabled</code><a href=#pagingenabled class=hash-link aria-label="Direct link to pagingenabled" title="Direct link to pagingenabled">​</a></h3> 207<p>When true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination.</p> 208<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 209<hr> 210<h3 class="anchor anchorWithStickyNavbar_JmGV" id=persistentscrollbar-android><code>persistentScrollbar</code> <div class="label android">Android</div><a href=#persistentscrollbar-android class=hash-link aria-label="Direct link to persistentscrollbar-android" title="Direct link to persistentscrollbar-android">​</a></h3> 211<p>Causes the scrollbars not to turn transparent when they are not in use.</p> 212<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 213<hr> 214<h3 class="anchor anchorWithStickyNavbar_JmGV" id=pinchgestureenabled-ios><code>pinchGestureEnabled</code> <div class="label ios">iOS</div><a href=#pinchgestureenabled-ios class=hash-link aria-label="Direct link to pinchgestureenabled-ios" title="Direct link to pinchgestureenabled-ios">​</a></h3> 215<p>When true, ScrollView allows use of pinch gestures to zoom in and out.</p> 216<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 217<hr> 218<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> 219<p>A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView. Only works for vertical ScrollViews (<code>horizontal</code> prop must be <code>false</code>).</p> 220<p>See <a href=/docs/refreshcontrol>RefreshControl</a>.</p> 221<table><thead><tr><th>Type<tbody><tr><td>element</table> 222<hr> 223<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> 224<p>Experimental: When <code>true</code>, offscreen child views (whose <code>overflow</code> value is <code>hidden</code>) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists.</p> 225<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 226<hr> 227<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrollenabled><code>scrollEnabled</code><a href=#scrollenabled class=hash-link aria-label="Direct link to scrollenabled" title="Direct link to scrollenabled">​</a></h3> 228<p>When false, the view cannot be scrolled via touch interaction.</p> 229<p>Note that the view can always be scrolled by calling <code>scrollTo</code>.</p> 230<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 231<hr> 232<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrolleventthrottle><code>scrollEventThrottle</code><a href=#scrolleventthrottle class=hash-link aria-label="Direct link to scrolleventthrottle" title="Direct link to scrolleventthrottle">​</a></h3> 233<p>Limits how often scroll events will be fired while scrolling, specified as a time interval in ms. This may be useful when expensive work is performed in response to scrolling. Values ≤ <code>16</code> will disable throttling, regardless of the refresh rate of the device.</p> 234<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>0</code></table> 235<hr> 236<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrollindicatorinsets-ios><code>scrollIndicatorInsets</code> <div class="label ios">iOS</div><a href=#scrollindicatorinsets-ios class=hash-link aria-label="Direct link to scrollindicatorinsets-ios" title="Direct link to scrollindicatorinsets-ios">​</a></h3> 237<p>The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the <code>contentInset</code>.</p> 238<table><thead><tr><th>Type<th>Default<tbody><tr><td>object: <code>{top: number, left: number, bottom: number, right: number}</code><td><code>{top: 0, left: 0, bottom: 0, right: 0}</code></table> 239<hr> 240<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrollperftag-android><code>scrollPerfTag</code> <div class="label android">Android</div><a href=#scrollperftag-android class=hash-link aria-label="Direct link to scrollperftag-android" title="Direct link to scrollperftag-android">​</a></h3> 241<p>Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn't do anything out of the box and you need to implement a custom native FpsListener for it to be useful.</p> 242<table><thead><tr><th>Type<tbody><tr><td>string</table> 243<hr> 244<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrolltooverflowenabled-ios><code>scrollToOverflowEnabled</code> <div class="label ios">iOS</div><a href=#scrolltooverflowenabled-ios class=hash-link aria-label="Direct link to scrolltooverflowenabled-ios" title="Direct link to scrolltooverflowenabled-ios">​</a></h3> 245<p>When <code>true</code>, the scroll view can be programmatically scrolled beyond its content size.</p> 246<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 247<hr> 248<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrollstotop-ios><code>scrollsToTop</code> <div class="label ios">iOS</div><a href=#scrollstotop-ios class=hash-link aria-label="Direct link to scrollstotop-ios" title="Direct link to scrollstotop-ios">​</a></h3> 249<p>When <code>true</code>, the scroll view scrolls to top when the status bar is tapped.</p> 250<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 251<hr> 252<h3 class="anchor anchorWithStickyNavbar_JmGV" id=showshorizontalscrollindicator><code>showsHorizontalScrollIndicator</code><a href=#showshorizontalscrollindicator class=hash-link aria-label="Direct link to showshorizontalscrollindicator" title="Direct link to showshorizontalscrollindicator">​</a></h3> 253<p>When <code>true</code>, shows a horizontal scroll indicator.</p> 254<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 255<hr> 256<h3 class="anchor anchorWithStickyNavbar_JmGV" id=showsverticalscrollindicator><code>showsVerticalScrollIndicator</code><a href=#showsverticalscrollindicator class=hash-link aria-label="Direct link to showsverticalscrollindicator" title="Direct link to showsverticalscrollindicator">​</a></h3> 257<p>When <code>true</code>, shows a vertical scroll indicator.</p> 258<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 259<hr> 260<h3 class="anchor anchorWithStickyNavbar_JmGV" id=snaptoalignment><code>snapToAlignment</code><a href=#snaptoalignment class=hash-link aria-label="Direct link to snaptoalignment" title="Direct link to snaptoalignment">​</a></h3> 261<p>When <code>snapToInterval</code> is set, <code>snapToAlignment</code> will define the relationship of the snapping to the scroll view.</p> 262<p>Possible values:</p> 263<ul> 264<li><code>'start'</code> will align the snap at the left (horizontal) or top (vertical).</li> 265<li><code>'center'</code> will align the snap in the center.</li> 266<li><code>'end'</code> will align the snap at the right (horizontal) or bottom (vertical).</li> 267</ul> 268<table><thead><tr><th>Type<th>Default<tbody><tr><td>enum(<code>'start'</code>, <code>'center'</code>, <code>'end'</code>)<td><code>'start'</code></table> 269<hr> 270<h3 class="anchor anchorWithStickyNavbar_JmGV" id=snaptoend><code>snapToEnd</code><a href=#snaptoend class=hash-link aria-label="Direct link to snaptoend" title="Direct link to snaptoend">​</a></h3> 271<p>Use in conjunction with <code>snapToOffsets</code>. By default, the end of the list counts as a snap offset. Set <code>snapToEnd</code> to false to disable this behavior and allow the list to scroll freely between its end and the last <code>snapToOffsets</code> offset.</p> 272<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 273<hr> 274<h3 class="anchor anchorWithStickyNavbar_JmGV" id=snaptointerval><code>snapToInterval</code><a href=#snaptointerval class=hash-link aria-label="Direct link to snaptointerval" title="Direct link to snaptointerval">​</a></h3> 275<p>When set, causes the scroll view to stop at multiples of the value of <code>snapToInterval</code>. This can be used for paginating through children that have lengths smaller than the scroll view. Typically used in combination with <code>snapToAlignment</code> and <code>decelerationRate="fast"</code>. Overrides less configurable <code>pagingEnabled</code> prop.</p> 276<table><thead><tr><th>Type<tbody><tr><td>number</table> 277<hr> 278<h3 class="anchor anchorWithStickyNavbar_JmGV" id=snaptooffsets><code>snapToOffsets</code><a href=#snaptooffsets class=hash-link aria-label="Direct link to snaptooffsets" title="Direct link to snaptooffsets">​</a></h3> 279<p>When set, causes the scroll view to stop at the defined offsets. This can be used for paginating through variously sized children that have lengths smaller than the scroll view. Typically used in combination with <code>decelerationRate="fast"</code>. Overrides less configurable <code>pagingEnabled</code> and <code>snapToInterval</code> props.</p> 280<table><thead><tr><th>Type<tbody><tr><td>array of number</table> 281<hr> 282<h3 class="anchor anchorWithStickyNavbar_JmGV" id=snaptostart><code>snapToStart</code><a href=#snaptostart class=hash-link aria-label="Direct link to snaptostart" title="Direct link to snaptostart">​</a></h3> 283<p>Use in conjunction with <code>snapToOffsets</code>. By default, the beginning of the list counts as a snap offset. Set <code>snapToStart</code> to <code>false</code> to disable this behavior and allow the list to scroll freely between its start and the first <code>snapToOffsets</code> offset.</p> 284<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>true</code></table> 285<hr> 286<h3 class="anchor anchorWithStickyNavbar_JmGV" id=stickyheaderhiddenonscroll><code>stickyHeaderHiddenOnScroll</code><a href=#stickyheaderhiddenonscroll class=hash-link aria-label="Direct link to stickyheaderhiddenonscroll" title="Direct link to stickyheaderhiddenonscroll">​</a></h3> 287<p>When set to <code>true</code>, sticky header will be hidden when scrolling down the list, and it will dock at the top of the list when scrolling up.</p> 288<table><thead><tr><th>Type<th>Default<tbody><tr><td>bool<td><code>false</code></table> 289<hr> 290<h3 class="anchor anchorWithStickyNavbar_JmGV" id=stickyheaderindices><code>stickyHeaderIndices</code><a href=#stickyheaderindices class=hash-link aria-label="Direct link to stickyheaderindices" title="Direct link to stickyheaderindices">​</a></h3> 291<p>An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing <code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the top of the scroll view. You can also use like [x,y,z] to make multiple items sticky when they are at the top. This property is not supported in conjunction with <code>horizontal={true}</code>.</p> 292<table><thead><tr><th>Type<tbody><tr><td>array of number</table> 293<hr> 294<h3 class="anchor anchorWithStickyNavbar_JmGV" id=zoomscale-ios><code>zoomScale</code> <div class="label ios">iOS</div><a href=#zoomscale-ios class=hash-link aria-label="Direct link to zoomscale-ios" title="Direct link to zoomscale-ios">​</a></h3> 295<p>The current scale of the scroll view content.</p> 296<table><thead><tr><th>Type<th>Default<tbody><tr><td>number<td><code>1.0</code></table> 297<hr> 298<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> 299<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> 300<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> 301<p>Displays the scroll indicators momentarily.</p> 302<hr> 303<h3 class="anchor anchorWithStickyNavbar_JmGV" id=scrollto><code>scrollTo()</code><a href=#scrollto class=hash-link aria-label="Direct link to scrollto" title="Direct link to scrollto">​</a></h3> 304<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>scrollTo</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"> options</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">x</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"> y</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"> 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><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"> deprecatedX</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"> deprecatedAnimated</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><br></span></code></pre></div></div> 305<p>Scrolls to a given x, y offset, either immediately, with a smooth animation.</p> 306<p><strong>Example:</strong></p> 307<p><code>scrollTo({x: 0, y: 0, animated: true})</code></p> 308<blockquote> 309<p>Note: The weird function signature is due to the fact that, for historical reasons, the function also accepts separate arguments as an alternative to the options object. This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.</p> 310</blockquote> 311<hr> 312<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> 313<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">options</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> 314<p>If this is a vertical ScrollView scrolls to the bottom. If this is a horizontal ScrollView scrolls to the right.</p> 315<p>Use <code>scrollToEnd({animated: true})</code> for smooth animated scrolling, <code>scrollToEnd({animated: false})</code> for immediate scrolling. If no options are passed, <code>animated</code> defaults to <code>true</code>.</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/scrollview.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/scrollview.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/refreshcontrol><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>RefreshControl</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/sectionlist><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>SectionList</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=#view-props class="table-of-contents__link toc-highlight">View Props</a><li><a href=#stickyheadercomponent class="table-of-contents__link toc-highlight"><code>StickyHeaderComponent</code></a><li><a href=#alwaysbouncehorizontal-ios class="table-of-contents__link toc-highlight"><code>alwaysBounceHorizontal</code> <div class="label ios">iOS</div></a><li><a href=#alwaysbouncevertical-ios class="table-of-contents__link toc-highlight"><code>alwaysBounceVertical</code> <div class="label ios">iOS</div></a><li><a href=#automaticallyadjustcontentinsets-ios class="table-of-contents__link toc-highlight"><code>automaticallyAdjustContentInsets</code> <div class="label ios">iOS</div></a><li><a href=#automaticallyadjustkeyboardinsets-ios class="table-of-contents__link toc-highlight"><code>automaticallyAdjustKeyboardInsets</code> <div class="label ios">iOS</div></a><li><a href=#automaticallyadjustsscrollindicatorinsets-ios class="table-of-contents__link toc-highlight"><code>automaticallyAdjustsScrollIndicatorInsets</code> <div class="label ios">iOS</div></a><li><a href=#bounces-ios class="table-of-contents__link toc-highlight"><code>bounces</code> <div class="label ios">iOS</div></a><li><a href=#bounceszoom-ios class="table-of-contents__link toc-highlight"><code>bouncesZoom</code> <div class="label ios">iOS</div></a><li><a href=#cancancelcontenttouches-ios class="table-of-contents__link toc-highlight"><code>canCancelContentTouches</code> <div class="label ios">iOS</div></a><li><a href=#centercontent-ios class="table-of-contents__link toc-highlight"><code>centerContent</code> <div class="label ios">iOS</div></a><li><a href=#contentcontainerstyle class="table-of-contents__link toc-highlight"><code>contentContainerStyle</code></a><li><a href=#contentinset-ios class="table-of-contents__link toc-highlight"><code>contentInset</code> <div class="label ios">iOS</div></a><li><a href=#contentinsetadjustmentbehavior-ios class="table-of-contents__link toc-highlight"><code>contentInsetAdjustmentBehavior</code> <div class="label ios">iOS</div></a><li><a href=#contentoffset class="table-of-contents__link toc-highlight"><code>contentOffset</code></a><li><a href=#decelerationrate class="table-of-contents__link toc-highlight"><code>decelerationRate</code></a><li><a href=#directionallockenabled-ios class="table-of-contents__link toc-highlight"><code>directionalLockEnabled</code> <div class="label ios">iOS</div></a><li><a href=#disableintervalmomentum class="table-of-contents__link toc-highlight"><code>disableIntervalMomentum</code></a><li><a href=#disablescrollviewpanresponder class="table-of-contents__link toc-highlight"><code>disableScrollViewPanResponder</code></a><li><a href=#endfillcolor-android class="table-of-contents__link toc-highlight"><code>endFillColor</code> <div class="label android">Android</div></a><li><a href=#fadingedgelength-android class="table-of-contents__link toc-highlight"><code>fadingEdgeLength</code> <div class="label android">Android</div></a><li><a href=#horizontal class="table-of-contents__link toc-highlight"><code>horizontal</code></a><li><a href=#indicatorstyle-ios class="table-of-contents__link toc-highlight"><code>indicatorStyle</code> <div class="label ios">iOS</div></a><li><a href=#invertstickyheaders class="table-of-contents__link toc-highlight"><code>invertStickyHeaders</code></a><li><a href=#keyboarddismissmode class="table-of-contents__link toc-highlight"><code>keyboardDismissMode</code></a><li><a href=#keyboardshouldpersisttaps class="table-of-contents__link toc-highlight"><code>keyboardShouldPersistTaps</code></a><li><a href=#maintainvisiblecontentposition class="table-of-contents__link toc-highlight"><code>maintainVisibleContentPosition</code></a><li><a href=#maximumzoomscale-ios class="table-of-contents__link toc-highlight"><code>maximumZoomScale</code> <div class="label ios">iOS</div></a><li><a href=#minimumzoomscale-ios class="table-of-contents__link toc-highlight"><code>minimumZoomScale</code> <div class="label ios">iOS</div></a><li><a href=#nestedscrollenabled-android class="table-of-contents__link toc-highlight"><code>nestedScrollEnabled</code> <div class="label android">Android</div></a><li><a href=#oncontentsizechange class="table-of-contents__link toc-highlight"><code>onContentSizeChange</code></a><li><a href=#onmomentumscrollbegin class="table-of-contents__link toc-highlight"><code>onMomentumScrollBegin</code></a><li><a href=#onmomentumscrollend class="table-of-contents__link toc-highlight"><code>onMomentumScrollEnd</code></a><li><a href=#onscroll class="table-of-contents__link toc-highlight"><code>onScroll</code></a><li><a href=#onscrollbegindrag class="table-of-contents__link toc-highlight"><code>onScrollBeginDrag</code></a><li><a href=#onscrollenddrag class="table-of-contents__link toc-highlight"><code>onScrollEndDrag</code></a><li><a href=#onscrolltotop-ios class="table-of-contents__link toc-highlight"><code>onScrollToTop</code> <div class="label ios">iOS</div></a><li><a href=#overscrollmode-android class="table-of-contents__link toc-highlight"><code>overScrollMode</code> <div class="label android">Android</div></a><li><a href=#pagingenabled class="table-of-contents__link toc-highlight"><code>pagingEnabled</code></a><li><a href=#persistentscrollbar-android class="table-of-contents__link toc-highlight"><code>persistentScrollbar</code> <div class="label android">Android</div></a><li><a href=#pinchgestureenabled-ios class="table-of-contents__link toc-highlight"><code>pinchGestureEnabled</code> <div class="label ios">iOS</div></a><li><a href=#refreshcontrol class="table-of-contents__link toc-highlight"><code>refreshControl</code></a><li><a href=#removeclippedsubviews class="table-of-contents__link toc-highlight"><code>removeClippedSubviews</code></a><li><a href=#scrollenabled class="table-of-contents__link toc-highlight"><code>scrollEnabled</code></a><li><a href=#scrolleventthrottle class="table-of-contents__link toc-highlight"><code>scrollEventThrottle</code></a><li><a href=#scrollindicatorinsets-ios class="table-of-contents__link toc-highlight"><code>scrollIndicatorInsets</code> <div class="label ios">iOS</div></a><li><a href=#scrollperftag-android class="table-of-contents__link toc-highlight"><code>scrollPerfTag</code> <div class="label android">Android</div></a><li><a href=#scrolltooverflowenabled-ios class="table-of-contents__link toc-highlight"><code>scrollToOverflowEnabled</code> <div class="label ios">iOS</div></a><li><a href=#scrollstotop-ios class="table-of-contents__link toc-highlight"><code>scrollsToTop</code> <div class="label ios">iOS</div></a><li><a href=#showshorizontalscrollindicator class="table-of-contents__link toc-highlight"><code>showsHorizontalScrollIndicator</code></a><li><a href=#showsverticalscrollindicator class="table-of-contents__link toc-highlight"><code>showsVerticalScrollIndicator</code></a><li><a href=#snaptoalignment class="table-of-contents__link toc-highlight"><code>snapToAlignment</code></a><li><a href=#snaptoend class="table-of-contents__link toc-highlight"><code>snapToEnd</code></a><li><a href=#snaptointerval class="table-of-contents__link toc-highlight"><code>snapToInterval</code></a><li><a href=#snaptooffsets class="table-of-contents__link toc-highlight"><code>snapToOffsets</code></a><li><a href=#snaptostart class="table-of-contents__link toc-highlight"><code>snapToStart</code></a><li><a href=#stickyheaderhiddenonscroll class="table-of-contents__link toc-highlight"><code>stickyHeaderHiddenOnScroll</code></a><li><a href=#stickyheaderindices class="table-of-contents__link toc-highlight"><code>stickyHeaderIndices</code></a><li><a href=#zoomscale-ios class="table-of-contents__link toc-highlight"><code>zoomScale</code> <div class="label ios">iOS</div></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=#scrollto class="table-of-contents__link toc-highlight"><code>scrollTo()</code></a><li><a href=#scrolltoend class="table-of-contents__link toc-highlight"><code>scrollToEnd()</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>