Grid not work as aspected if nested inside <Content>-Component

In the Docs (https://docs.nativebase.io/Components.html#Layout) I’ve found that <Grid> was inside <Content>.

But this does not work as descriped in the Docs, because it looks like this:

If I adjust the code like this to get rows:

import React, {Component} from "react";
import {
    Text,
} from 'react-native';
import {Container, Header, Left, Content} from 'native-base';
import {Col, Row, Grid} from 'react-native-easy-grid';

export default class Login extends Component<{}> {
    render() {
        return (
            <Container >
                <Header ><Left ><Text >Headline</Text ></Left ></Header >
                <Content >
                    <Grid >
                        <Row size={1} style={{backgroundColor: '#635DB7'}} ><Text >No.1</Text ></Row >
                        <Row size={3} style={{backgroundColor: '#00CE9F'}} ><Text >No.2</Text ></Row >
                    </Grid >
                </Content >
            </Container >
        );
    }
}

It Looks like this:

Only if I remove the <Content>-Tag, it seems to show in the right way:

This seems to be an Bug!?, because the docs of nativebase.io suggest to have one <Content>-Tag at each Screen.

I’ve debugged it with react-devtools, and find out, that the first View inside the ScrollView has no flex-declaration. If I add this like in the Screen, the two rows are shown in the right way:

[akhil-ga]

@xstable you can set the prop contentContainerStyle={{flex:1}} for <Content/> component to get the same behaviour as in docs.

<Content contentContainerStyle={{ flex: 1 }}>
  <Grid>
    <Col style={{ backgroundColor: '#635DB7' }}></Col>
    <Col style={{ backgroundColor: '#00CE9F' }}></Col>
  </Grid>
</Content>

[SupriyaKalghatgi]

https://github.com/GeekyAnts/native-base-docs/issues/75