Trying to replicate the examples using the size prop and nothing is displayed to the screen

[RobSalzwedel]

I am trying to replicate the examples on the repo with the following code:

class StartScreen extends Component {
  render() {
    return (
      <Container>
        <Content>
            <Grid>
                <Row size={75} style={{ backgroundColor: '#D954D7' }} />
                <Row size={25} style={{ backgroundColor: '#D93735' }} />
            </Grid>
        </Content>
      </Container>
    );
  }
}

export default StartScreen;

The above code returns a blank screen. I know it's probably a misunderstanding on my side as to how the size prop works.

The following renders to screen:

class StartScreen extends Component {
  render() {
    return (
      <Container>
        <Content>
            <Grid>
                <Row style={{ backgroundColor: '#D954D7', height: 200 }} />
                <Row style={{ backgroundColor: '#D93735', height: 200 }} />
            </Grid>
        </Content>
      </Container>
    );
  }
}

[RobSalzwedel]

Ok just saw the answer in the docs:

"NOTE: <Content> component uses <ScrollView>. This is required by <Col> and <Row> elements of Easy-Grid to have a defined height."

Removing the <Content> tag allows you to not specify height.

class StartScreen extends Component {
  render() {
    return (
      <Container>
            <Grid>
                <Row style={{ backgroundColor: '#D954D7', height: 200 }} />
                <Row style={{ backgroundColor: '#D93735', height: 200 }} />
            </Grid>
      </Container>
    );
  }
}