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.
Try changing to this: