Sometimes, we want to fix ScrollView Not scrolling with React Native

In this article, we’ll look at how to fix ScrollView Not scrolling with React Native.

How to fix ScrollView Not scrolling with React Native?

To fix ScrollView Not scrolling with React Native, we wrap the content of the ScrollView with the ScrollView.

For instance, we write:

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

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <ScrollView>
        {Array(200)
          .fill()
          .map((_, i) => {
            return <Text>{i}</Text>;
          })}
      </ScrollView>
    </View>
  );
}

to wrap ScrollView around the Text components that we render inside.

As a result, we should see text inside and we can scroll up and down.

Conclusion

To fix ScrollView Not scrolling with React Native, we wrap the content of the ScrollView with the ScrollView.