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

Answer 1

EDIT: You can now use .

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:

 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}
}