How to fix nested ScrollView locking up with React Native?

Sometimes, we want to fix nested ScrollView locking up with React Native.

In this article, we’ll look at how to fix nested ScrollView locking up with React Native.

How to fix nested ScrollView locking up with React Native?

To fix nested ScrollView locking up with React Native, we can set the nestedScrollEnabled prop to true.

For instance, we write:

import * as React from 'react';
import { Text, View, ScrollView } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <View>
      <ScrollView nestedScrollEnabled={true} style={{ height: 300 }}>
        <ScrollView nestedScrollEnabled={true} style={{ height: 150 }}>
          {Array(100)
            .fill()
            .map((_, i) => (
              <Text key={i}>{i}</Text>
            ))}
        </ScrollView>
        <ScrollView nestedScrollEnabled={true} style={{ height: 150 }}>
          {Array(100)
            .fill()
            .map((_, i) => (
              <Text key={i}>{i}</Text>
            ))}
        </ScrollView>
      </ScrollView>
    </View>
  );
}

to add 2 ScrollViews in another ScrollView.

And we set the height of each so they all show on the screen.

We set nestedScrollEnabled to true so we can scroll the nested ScrollViews.

Conclusion

To fix nested ScrollView locking up with React Native, we can set the nestedScrollEnabled prop to true.