react-native: NativeBase how to center a control

Question

I have just discovered NativeBase for react-native and I really love it. I am following the tutorial from their website. I understand that NativeBase uses Easy-Grid for the layout. I would like to vertically center a button on my page. This is a simple interface for a test application I am building:

          <Container> 
                <Header>
                    <Button trnsparent>
                        <Icon name='ios-menu' />
                    </Button>

                    <Title>Poki</Title>

                </Header>

                <Content style={{padding: 10}}>  

                    <Grid>
                        <Col>
                            <Button block bordered info style={{flex: 1}}>                         
                                Login 
                            </Button>
                        </Col>
                    </Grid>


                </Content>

                <Footer>
                    <FooterTab>
                        <Button transparent>
                            <Icon name='ios-call' />
                        </Button>  
                    </FooterTab>
                </Footer>
            </Container>

And this is the result on my genymotion emulator:

How can I vertically center the login button on my page using easy-grid? I have tried to apply flexbox properties with no result.

Thank you for your help.

Answer 1

Try changing to this:

<Content contentContainerStyle={{flex: 1}} style={{padding: 10}}>
  <Grid style={{alignItems: 'center'}}>
    <Col>
      <Button block bordered info>
        Login
      </Button>
    </Col>
  </Grid>
</Content>