How to do vertical centering when using ScrollView with React Native?

Sometimes, we want to do vertical centering when using ScrollView with React Native.

In this article, we’ll look at how to do vertical centering when using ScrollView with React Native.

How to do vertical centering when using ScrollView with React Native?

To do vertical centering when using ScrollView with React Native, we can set the contentContainerStyle prop to an object with some flexbox styles.

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={{
        flexGrow: 1,
      }}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          justifyContent: 'center',
          flexDirection: 'column',
        }}>
        {Array(200)
          .fill()
          .map((_, i) => {
            return <Text>{i}</Text>;
          })}
      </ScrollView>
    </View>
  );
}

We set the contentContainerStyle prop to:

{
  flexGrow: 1,
  justifyContent: 'center',
  flexDirection: 'column',
}

to expand the ScrollView to fit the View.

And we set justifyContent to 'center' to center align the ScrollView.

We set the flexDirection to 'column' to vertically justify items.

Conclusion

To do vertical centering when using ScrollView with React Native, we can set the contentContainerStyle prop to an object with some flexbox styles.