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.
Read the original → reactnative.dev
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.