1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["15619"],{94371(e,n,o){o.r(n),o.d(n,{metadata:()=>t,default:()=>g,frontMatter:()=>i,contentTitle:()=>l,toc:()=>c,assets:()=>r});var t=JSON.parse('{"id":"using-a-scrollview","title":"Using a ScrollView","description":"The ScrollView is a generic scrolling container that can contain multiple components and views. The scrollable items can be heterogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).","source":"@site/versioned_docs/version-0.79/using-a-scrollview.md","sourceDirName":".","slug":"/using-a-scrollview","permalink":"/docs/0.79/using-a-scrollview","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit page for next release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/using-a-scrollview.md\\"},{\\"label\\":\\"Edit page for 0.79 release\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/using-a-scrollview.md\\"}]","tags":[],"version":"0.79","lastUpdatedAt":1744640057000,"frontMatter":{"id":"using-a-scrollview","title":"Using a ScrollView"},"sidebar":"docs","previous":{"title":"Handling Text Input","permalink":"/docs/0.79/handling-text-input"},"next":{"title":"Using List Views","permalink":"/docs/0.79/using-a-listview"}}'),a=o(62540),s=o(43023);let i={id:"using-a-scrollview",title:"Using a ScrollView"},l,r={},c=[];function d(e){let n={a:"a",code:"code",div:"div",p:"p",...(0,s.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.a,{href:"/docs/0.79/scrollview",children:"ScrollView"})," is a generic scrolling container that can contain multiple components and views. The scrollable items can be heterogeneous, and you can scroll both vertically and horizontally (by setting the ",(0,a.jsx)(n.code,{children:"horizontal"})," property)."]}),"\n",(0,a.jsxs)(n.p,{children:["This example creates a vertical ",(0,a.jsx)(n.code,{children:"ScrollView"})," with both images and text mixed together."]}),"\n",(0,a.jsx)(n.div,{className:"snack-player","data-snack-name":"Using ScrollView","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%7BImage%2C%20ScrollView%2C%20Text%7D%20from%20'react-native'%3B%5Cn%5Cnconst%20logo%20%3D%20%7B%5Cn%20%20uri%3A%20'https%3A%2F%2Freactnative.dev%2Fimg%2Ftiny_logo.png'%2C%5Cn%20%20width%3A%2064%2C%5Cn%20%20height%3A%2064%2C%5Cn%7D%3B%5Cn%5Cnconst%20App%20%3D%20()%20%3D%3E%20(%5Cn%20%20%3CScrollView%3E%5Cn%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2096%7D%7D%3EScroll%20me%20plz%3C%2FText%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2096%7D%7D%3EIf%20you%20like%3C%2FText%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2096%7D%7D%3EScrolling%20down%3C%2FText%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2096%7D%7D%3EWhat's%20the%20best%3C%2FText%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CText%2
10style%3D%7B%7BfontSize%3A%2096%7D%7D%3EFramework%20around%3F%3C%2FText%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CImage%20source%3D%7Blogo%7D%20%2F%3E%5Cn%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2080%7D%7D%3EReact%20Native%3C%2FText%3E%5Cn%20%20%3C%2FScrollView%3E%5Cn)%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-appearance":"light","data-snack-device-frame":"false"}),"\n",(0,a.jsxs)(n.p,{children:["ScrollViews can be configured to allow paging through views using swiping gestures by using the ",(0,a.jsx)(n.code,{children:"pagingEnabled"})," props. Swiping horizontally between views can also be implemented on Android using the ",(0,a.jsx)(n.a,{href:"https://github.com/react-native-community/react-native-viewpager",children:"ViewPager"})," component."]}),"\n",(0,a.jsxs)(n.p,{children:["On iOS a ScrollView with a single item can be used to allow the user to zoom content. Set up the ",(0,a.jsx)(n.code,{children:"maximumZoomScale"})," and ",(0,a.jsx)(n.code,{children:"minimumZoomScale"})," props and your user will be able to use pinch and expand gestures to zoom in and out."]}),"\n",(0,a.jsxs)(n.p,{children:["The ScrollView works best to present a small number of things of a limited size. All the elements and views of a ",(0,a.jsx)(n.code,{children:"ScrollView"})," are rendered, even if they are not currently shown on the screen. If you have a long list of items which cannot fit on the screen, you should use a ",(0,a.jsx)(n.code,{children:"FlatList"})," instead. So let's ",(0,a.jsx)(n.a,{href:"/docs/0.79/using-a-listview",children:"learn about list views"})," next."]})]})}function g(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},43023(e,n,o){o.d(n,{R:()=>i,x:()=>l});var t=o(63696);let a={},s=t.createContext(a);function i(e){let n=t.useContext(s);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.