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>