ScrollView Vertical Align

CenterPanel.js

import React from 'react';
import RX from 'reactxp';

const styles = {
    scroll: RX.Styles.createScrollViewStyle({
        backgroundColor: 'red',
        justifyContent: 'center',
        alignSelf: 'stretch'
    }),
    container: RX.Styles.createViewStyle({
        flex: 1,
        justifyContent: 'center',
        alignSelf: 'center',
        backgroundColor: 'yellow'
    }),
    header: RX.Styles.createViewStyle({
        height: 30,
        backgroundColor: 'blue',
        justifyContent: 'center'
    }),
    headerText: RX.Styles.createTextStyle({
        fontSize: 16,
        textAlign: 'center',
        color: 'black',
    }),
    body: RX.Styles.createScrollViewStyle({
        flex: 1,
        alignSelf: 'center'
    })
};

export default class CenterPanel extends RX.Component {
    render() {
        return (
            <RX.ScrollView style={ styles.scroll }>
              <RX.View style={ styles.container }>
                  <RX.View style={ styles.header }>
                    <RX.Text style={ styles.headerText }>
                        Header
                    </RX.Text>
                  </RX.View>

                  <RX.View style={ styles.body }>
                    <RX.ActivityIndicator color="blue" size="large" />
                  </RX.View>
              </RX.View>
            </RX.ScrollView>
        );
    }
}