Why is my React Native ScrollView not scrolling on Android?

A screen that looks right but won’t move under your finger is maddening, because nothing turns red and nothing shows up in the logs. Before you go looking for a bug in ScrollView, check the three layout problems below, since each fix is a small style change.

Why it happens

A ScrollView is a window of fixed height onto content that’s taller than the window. It scrolls only when both are true: the window has a height it can’t grow past, and the content inside is taller than that. Three things break one or the other.

• The ScrollView has no bounded height. According to React Native’s documentation, ScrollViews must have a bounded height, and forgetting to pass flex: 1 down the view stack is the common mistake. If any view above the ScrollView sizes itself to its content, the ScrollView grows to fit everything, and there’s nothing left to scroll.
• flex: 1 is on contentContainerStyle. In React Native, flex: 1 means flexGrow: 1, flexShrink: 1, and flexBasis: 0. On the content container, that lets the content shrink to the height of the window, so it never overflows.
• A ScrollView is inside another one that scrolls the same way, such as a vertical list inside a vertical screen. On Android, the inner one needs nestedScrollEnabled. That prop exists only on Android and is false by default, which is why the same screen can scroll fine on an iPhone.

How to fix it

1. Give every view above the ScrollView a bounded height. Putting flex: 1 on the screen’s root view and on each wrapper in between does it.

2. Use flexGrow: 1 instead of flex: 1 in contentContainerStyle. It fills the screen when the content is short and lets the content grow past the screen when it’s long:

   <View style={{ flex: 1 }}>
     <ScrollView contentContainerStyle={{ flexGrow: 1, padding: 16 }}>{/* content */}</ScrollView>
   </View>

3. Turn on nested scrolling for a scroll view inside another one:

   <ScrollView>
     <Header />
     <ScrollView style={{ maxHeight: 300 }} nestedScrollEnabled>
       {items.map((item) => (
         <Row key={item.id} item={item} />
       ))}
     </ScrollView>
   </ScrollView>

   If the inner one is a long list, we’d skip the nesting altogether and use a single FlatList as the screen’s only scroller, with the rest of the screen in ListHeaderComponent, which also renders the list lazily.

4. Check scrollEnabled. If it comes from state or a prop and ends up false, the view can’t be scrolled by touch.

How you know it’s fixed

On an Android phone, you can swipe through the screen from top to bottom, including inside any inner list. If you’d like to check the layout directly, open the element inspector from the Dev Menu and tap the ScrollView. Its height should match the visible area, and its content should be taller.

If it still won’t scroll

Something may be sitting on top of the ScrollView and catching the touches, such as an absolutely positioned view that’s invisible. The element inspector shows which view is under your finger. If it’s an overlay that should let touches through, give it pointerEvents="box-none", so its children stay tappable and everything else reaches the ScrollView. And if only part of the content is reachable, look for a fixed height on a view inside the content, which caps how tall the content can get.