Sometimes, we want to fix ScrollView is not scrolling to the bottom sometimes issue with React Native.

In this article, we’ll look at how to fix ScrollView is not scrolling to the bottom sometimes issue with React Native.

How to fix ScrollView is not scrolling to the bottom sometimes issue with React Native?

To fix ScrollView is not scrolling to the bottom sometimes issue with React Native, we can set the contentContainerStyle to add some bottom padding.

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
        contentContainerStyle={{ paddingBottom: 60 }}
        style={{ height: 300 }}>
        {Array(100)
          .fill()
          .map((_, i) => (
            <Text key={i}>{i}</Text>
          ))}
      </ScrollView>
    </View>
  );
}

to set contentContainerStyle to { paddingBottom: 60 } to add 60px of bottom padding on the ScrollView.

Conclusion

To fix ScrollView is not scrolling to the bottom sometimes issue with React Native, we can set the contentContainerStyle to add some bottom padding.