`ScrollView`'s `centerContent` prop doesn't work

[nandorojo]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the issue

As always, thanks for the incredible work of RNW. Onto the issue...

<ScrollView centerContent={true} /> doesn't center the content. Here is a comparison of iOS and Web:

iOS

Web

Expected behavior

centerContent should align content to the center.

Steps to reproduce

1. Add a <ScrollView centerContent>
2. Put a view inside of it
3. Compare native and Web behavior

Test case

https://snack.expo.dev/@beatgig/rnw-centercontent-broken

Potential solution

Adjusting contentContainerStyle seems to have fixed it:

import { View, StyleSheet, ScrollView } from 'react-native';

export default function App() {
  return (
    <ScrollView centerContent contentContainerStyle={styles.fix}>
      <View style={{ height: 50, backgroundColor: 'blue' }} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  fix: {
    justifyContent: 'center',
    flexGrow: 1,
  },
});

For additional context: if I didn't add flexGrow: 1, then the content wasn't properly scrollable when it overflowed the size of its container.

If that's the correct solution, please let me know and I'm happy to submit a PR. Thanks!

[necolas]

If that's the correct solution, please let me know and I'm happy to submit a PR. Thanks!

Thanks! Looks good to me.

…if I didn't add flexGrow: 1, then the content wasn't properly scrollable when it overflowed the size of its container.

I didn't understand this. Is this a different bug? Please can you elaborate?

[nandorojo]

Thanks for the quick reply.

I didn't understand this. Is this a different bug? Please can you elaborate?

Yeah happy to elaborate, sorry for the confusion. It's not a separate bug. I just wanted to explain the reasoning behind the solution.

I first tried this:

<ScrollView contentContainerStyle={{ justifyContent: 'center' }} />

This made the content stay up at the top.

This made the content go up to the top.

I then tried adding flex: 1:

<ScrollView contentContainerStyle={{ justifyContent: 'center', flex: 1 }} />

That appeared to have fixed it.

However, as the scrollable content got long, an issue arose:

^ This screenshot shows the content scrolled all the way to the top. I can't go up more, so the content is essentially getting cut off. Here's a video for clarity.

Once I changed flex: 1 → flexGrow: 1, the cut-off content got fixed:

Here is a video of the working behavior (flexGrow: 1, justifyContent: 'center').

[necolas]

Worth noting that this prop is not supported on Android

[necolas]

Should be available in 0.18.6

[nandorojo]

Great, thanks so much for the quick fix.