React Native: vertical centering when using ScrollView

Question

I'm using React Native and I'm having trouble retaining vertical centering of elements as soon as I introduce a ScrollView. To demonstrate, I created 3 apps with React Native Playground. All examples have 2 pages, and they can be toggled by tapping the blue button.

Example 1:

This first example shows blocks centered vertically on page 2. This happens because the container has these styles applied to it:

flex: 1,
flexDirection: 'column',
justifyContent: 'center',

https://rnplay.org/apps/lb5wSQ

However, there's a problem as soon as you switch to page 2, because the entire content of the page doesn't fit, so we need a ScrollView.

Example 2

In this example, I wrap everything inside of a ScrollView. This allows page 2 to scroll, but now I lost the vertical centering of Page 1.

https://rnplay.org/apps/DCgOgA

Example 3

In order to try and get back the vertical centering of Page 1, I apply flex: 1 to the contentContainerStyle of ScrollView. This fixes the vertical centering on page 1, but I'm no longer able to scroll all the way down to the bottom on page 2.

https://rnplay.org/apps/LSgbog

How can I fix this so that I get vertical centering of elements on page 1 yet still get ScrollView to scroll all the way to the bottom on page 2?

@Zach No, but I haven't looked at this in quite a while. Is this still a problem? — Johnny Oshika, Jan 27 '17 at 22:53
@JohnnyOshika could you accept my answer? It's helped a lot of people — Jake Coxon, Aug 29 '18 at 14:23

score 343 · Accepted Answer · edited May 30 '20 at 17:40

343

I solved this issue with flexGrow instead of flex

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

This makes the content container stretch to fill the ScrollView but does not restrict the maximum height, so you can still scroll correctly when the content extends the bounds of the ScrollView

edited May 30 '20 at 17:40

dimpiax

12,093
5
62
45

answered Apr 05 '17 at 09:53

Jake Coxon

4,958
1
24
15

12

at last you made me understand the usefulness of flexGrow – Dr. Younes Henni Oct 22 '19 at 13:21
The small explanation makes me understand very well. I was stuck with this for hours. – Delali Nov 04 '19 at 19:29
3

It actually still needs `` as mentioned in the answers below. – Petr Bela May 15 '20 at 16:13
1

This will be the simplest to use:- – John Jul 15 '20 at 16:07
Thanks! This flexGrow method also works when ScrollView scrolls horizontally (`horizontal` option is set to true). – Dwigt Apr 14 '22 at 13:19

score 64 · Answer 2 · edited Apr 05 '18 at 08:58

Here is my approach:

Use an outer container with flex : 1, then the scroll view needs to have {flexGrow : 1, justifyContent : 'center'} using contentContainerStyle, not style.

<View style={styles.mainContainer}>
  <ScrollView
    contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}>
      <View style={styles.scrollViewContainer}>
        //Put your stuff here, and it will be centered vertical
      </View>
  </ScrollView>
</View>

Styles:

const styles = StyleSheet.create({scrollView : {
height : Dimensions.get('window').height, }, mainContainer : {
flex : 1 }, scrollViewContainer : { }, })

score 7 · Answer 3 · answered Mar 29 '17 at 13:04

7

There's a new solution (unfortunately iOS only at the moment) - we can use centerContent prop on Scrollview.

answered Mar 29 '17 at 13:04

Radek Czemerys

1,060
7
17

3

this is available only for ios , any option for android? – Devansh sadhotra Jul 12 '17 at 12:25

score 5 · Answer 4 · answered Aug 30 '19 at 17:10

In order to center ScrollView itself vertically, then you need to have such kind of structure:

<View style={{flex: 1}}>
  <View>
   <ScrollView .../>
  </View>
</View>

Otherwise, if you want to center ScrollView content itself, then you need the following:

<ScrollView contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}} ...>

SteveMellross · Answer 5 · 2017-08-26T06:47:54.493

EDIT: You can now use <ScrollView contentContainerStyle={{flexGrow: 1}}>.

For older version of React Native that do not support flexGrow, use the solution below.

The only way I have found to reliably do this for both iOS and Android is to set minHeight of the inner view to the size of the ScrollView. E.g:

<ScrollView
    style={{flex: 1}}
    contentContainerStyle={{minHeight: this.state.minHeight}}
    onLayout={event => this.setState({minHeight: event.nativeEvent.layout.height})}
>

Note: I have in-lined the styles and functions above for simplicity but you will probably want to use constant references for the unchanging values and memorise the changing style to prevent unnecessary rerenders.

const {minHeight} = this.state;
// Manually memorise changing style or use something like reselect...
if (this.lastMinHeight != minHeight) {
    this.lastMinHeight = minHeight;
    this.contentContainerStyle = {minHeight: minHeight}
}
<ScrollView
    style={styles.scrollViewStyle}
    contentContainerStyle={this.contentContainerStyle}
    onLayout={this.onScrollViewLayout}
>

score 1 · Answer 6 · edited Apr 05 '18 at 08:55

1

Why don't you wrap only second page within a ScrollView?

return (
    <ScrollView >
        <View style={styles.lipsum}>
            {this.renderButton()}
            <Text style={styles.lipsumText}>{lipsumText}</Text>
        </View>
    </ScrollView>
  );

Just modify your first example, it works like a charm :)

edited Apr 05 '18 at 08:55

David Schumann

13,380
9
75
96

answered Sep 21 '15 at 23:50

Michał Kisiel

1,050
10
12

1

I suppose that's an option and it's a great suggestion, but in my real use case, there is a header on top that always appears (with logo, tag line, etc) and it also needs to be part of the ScrollView. Moving the ScrollView to a child view means that the header no longer scrolls or I have to duplicate the header in all the child views. – Johnny Oshika Sep 23 '15 at 14:15

React Native: vertical centering when using ScrollView

6 Answers6

Linked