Vertically aligning Content component with ability to scroll

Question

I am trying to vertically align Content component from NativeBase with ability to scroll if content inside is too big for the screen size.

This means that in large devices content is vertically aligned to center while in small devices is scrollable as its height is higher then device height.

Can achieve both in separate ways, but never together.

Components:

<Container style={styles.container}>
    <Content contentContainerStyle={styles.content}>
        {bunchOfContent}
    </Content>
</Container>

Styling for vertically aligned but not scrollable:

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  content: {
    flex: 1,
    justifyContent: 'center'
  }

And for scrollable but not vertically aligned:

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  content: {
    justifyContent: 'center'
  }

@majejs you can check my answer below if you are still getting this issue. — Ankit Aggarwal, Jun 16 '17 at 17:10

Ankit Aggarwal · Accepted Answer · 2017-06-15T17:19:41.687

In react-native flex doesn't work the same way as it does in CSS. See the docs. Use flexGrow instead like the following style:

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
content: {
    flexGrow: 1,
    justifyContent: 'center'
}

Use flexGrow: 1 instead of flex: 1 in your first content style.

The differences are still not clear to me but you can follow following thread:

I will update this answer after understanding the differences properly.

Vertically aligning Content component with ability to scroll

1 Answers1