ScrollView: For Simple, Bounded Content
ScrollView is a container for a limited amount of scrollable content, rendering everything inside at once. Use it for short forms or articles where upfront loading is fine. The footgun: it's slow for long lists—use FlatList instead to avoid performance hits.
Why it exists
ScrollView was created to provide a simple, cross-platform way to make a small, fixed amount of content scrollable. It wraps the native scrolling views of iOS and Android, offering a basic solution for when you need more space than the screen provides.
The mental model
Think of ScrollView as a simple container you load all your content into at once. The container has a fixed window size, and you can slide the content up and down to see the parts that are out of view. It's straightforward but not efficient for a very long scroll of items, as it keeps everything in memory.
How it works
ScrollView takes all its child components and renders them immediately into a single, continuous view. This entire view is then placed inside a container with a fixed height (a "viewport"). The native platform's scrolling mechanism then allows the user to move this long view within the fixed-size container. It does not virtualize content; what you put in is what gets rendered, all at once.
When to use it
Use ScrollView for screens with a finite and relatively small amount of content. Good examples include a user registration form, a settings page, an article, or a modal dialog with text that might overflow on smaller screens. Its simplicity is its strength in these cases.
When not to use it
Never use ScrollView for long, dynamic lists of data, like a social media feed, a product catalog, or a long list of contacts. It renders every single item, even those off-screen, which leads to poor performance, high memory consumption, and a slow UI. For these cases, always use FlatList or SectionList, which virtualize the list by rendering only the items currently visible.
One canonical example
A common bug is a ScrollView that doesn't scroll. This usually happens because it doesn't have a bounded height—it doesn't know the size of its "window." The fix is to ensure its container has a defined size, which is often achieved by applying flex: 1 to the parent views, making the ScrollView fill the available space.
Interview question
Which characteristic primarily explains why ScrollView is discouraged for long, dynamic lists?
- a.Its scrolling performance degrades due to complex layout calculations for many off-screen elements.
- b.It struggles to update individual items efficiently when data changes.
- c.It renders all its child components into a single view at once, consuming significant resources.Correct
- d.It does not provide built-in optimizations for displaying large numbers of similar items.
Why? this is the answer
The card explicitly states that ScrollView renders every single item, even those off-screen, leading to poor performance and high memory consumption. This simultaneous rendering of all content is the fundamental limitation, while other options describe consequences or secondary issues.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles