Have you ever tried adding multiple elements in a React Native screen only to see them cut off because they don’t fit on one display? That’s a common issue when your layout grows beyond the visible screen size. If you need to make your content scrollable without breaking the structure, then you might want to learn ScrollView.
In this guide, you’ll understand what ScrollView is, when to use it, how it differs from FlatList, its key props, and how it integrates with components like BottomSheetScrollView. You’ll also see a simple example and a few best practices to keep your layout smooth and responsive.
What is ScrollView in React Native?
ScrollView in React Native is a core component that enables you to make your screen scrollable when the content exceeds the visible area. It acts as a container that can hold multiple child elements, such as text, images, or views, and allows users to navigate through them using touch gestures.
It supports both vertical and horizontal scrolling, depending on how you configure it. ScrollView is perfect when you want to present a small amount of content that may not fit entirely on the screen. However, it is important to know that it renders all its children at once, which can affect performance if the list is very long.
When to Use ScrollView?
Sometimes, you don’t need complex lists or performance-heavy structures. You just want your content to scroll smoothly when it exceeds the screen height. That’s exactly where ScrollView fits in. Think of it as your go-to option for smaller, static content that still needs scrolling. Here’s when ScrollView makes sense:
- When you have a limited number of items or views.
- When the screen layout is short and simple, like a form or a settings page.
- When all the elements need to be visible in one scrollable container.
- When performance is not a major concern because the content size is small.
ScrollView vs FlatList
Usually, many are confused between ScrollView and FlatList because both seem to handle scrolling. The difference becomes clear when you understand how they manage data and performance. Here’s a quick comparison to make it clear:
| Feature | ScrollView | FlatList |
| Rendering | Renders all child components at once | Renders items lazily as they appear |
| Performance | Slower for large lists | Optimized for long or dynamic lists |
| Use Case | Small, fixed content like forms or static screens | Large datasets like chats, feeds, or product lists |
| Memory Usage | High for big content | Efficient memory handling |
| Custom Separators & Pagination | Needs manual setup | Built-in support |
Common ScrollView Props
ScrollView comes with several useful props that help you control how the content behaves when scrolled. You don’t need to remember every single one, but knowing the main ones makes a big difference while designing smooth layouts.
Below are a few key props you’ll often use and what they do:
- horizontal – Makes the ScrollView scroll left and right instead of top to bottom.
- contentContainerStyle – Lets you style the inner container that holds all the child views.
- refreshControl – Adds pull-to-refresh behavior for dynamic content, such as feeds.
- nestedScrollEnabled – Allows nested scrolling, especially helpful in Android when you have scrollable content inside another ScrollView.
- showsVerticalScrollIndicator – Toggles the visibility of the vertical scroll bar.
- directionalLockEnabled – Locks scrolling to a single axis once a direction is detected, helping prevent unintended diagonal drags.
- keyboardDismissMode – Controls how the keyboard behaves during scrolling, such as dismissing it on drag.
Advanced ScrollView Integration
Once you are comfortable with the basics, you can take ScrollView a step further by using it in interactive layouts. A good example is combining it with libraries like @gorhom/bottom-sheet, which provides the BottomSheetScrollView. This special version of ScrollView is built to work inside a draggable bottom sheet while keeping gestures smooth.
In this setup, ScrollView handles the scrolling of content inside the sheet, while the bottom sheet manages the drag and snap behavior. It’s important to remember that BottomSheetScrollView already manages certain scroll properties internally, so you don’t need to override things like scrollEventThrottle or decelerationRate.
ScrollView Example
Let’s look at a simple example to understand how ScrollView works in a real React Native app. This code creates a scrollable list of colored boxes so you can see how content moves when it goes beyond the screen size.
import React from "react";
import { ScrollView, View, Text, StyleSheet } from "react-native";
const App = () => {
const colors = ["#FF6B6B", "#FFD93D", "#6BCB77", "#4D96FF", "#BC6FF1"];
return (
<ScrollView style={styles.container}>
{colors.map((color, index) => (
<View key={index} style={[styles.box, { backgroundColor: color }]}>
<Text style={styles.text}>Box {index + 1}</Text>
</View>
))}
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
box: {
height: 120,
borderRadius: 10,
marginVertical: 10,
alignItems: "center",
justifyContent: "center",
},
text: {
color: "white",
fontSize: 18,
fontWeight: "bold",
},
});
export default App;Wrapping Up
ScrollView is one of those components that feels simple but can cause issues if used the wrong way. Always make sure your ScrollView has a bounded height. Setting flex: 1 is a common solution, but you must also ensure that all parent containers up the view hierarchy have a defined or flexible height; otherwise, the ScrollView may fail to render its scrollable area.
If you notice your content not moving, check for missing flex values in parent containers. For long lists, switch to FlatList to avoid memory issues. When nested scrolling feels stuck, enable nestedScrollEnabled, especially on Android.
In short, use ScrollView for small, scrollable layouts and keep your hierarchy structured. With a few adjustments and awareness of its limits, you can make your screens scroll smoothly across devices.