How to use the Grid component

Hello!

I’m trying to create a really basic Grid and I can’t see it once I render.

Whan am I missing? Thanks!

import React, { Component } from 'react'
import { Container, Header, Title, Content, Col, Row} from 'native-base';

  export class Grid extends Component {
   constructor (props) {
    super(props)
  }

  render () {
    return (
      <Container>
        <Grid>  
          <Col> 
            <Row>Cel 1</Row>
            <Row>Cel 2</Row>
            <Row>Cel 3</Row>
          </Col>
          <Col> 
            <Row>Cel 4</Row>
            <Row>Cel 5</Row>
            <Row>Cel 6</Row>
          </Col>
          <Col> 
            <Row>Cel 4</Row>
            <Row>Cel 5</Row>
            <Row>Cel 6</Row>
          </Col>
          <Col> 
            <Row>Cel 4</Row>
            <Row>Cel 5</Row>
            <Row>Cel 6</Row>
          </Col>
          <Col> 
            <Row>Cel 4</Row>
            <Row>Cel 5</Row>
            <Row>Cel 6</Row>
          </Col>          
        </Grid>
      </Container>
    )
  }
}

1 thought on “How to use the Grid component

  1. Hi,

    Two issues with your code:

    • Col, Row & Grid have to be imported from react-native-easy-grid
    import { Col, Row, Grid } from "react-native-easy-grid";
    • Secondly, don’t name your component ‘Grid’ since you have already imported once.

    See this example from the doc :

    import React, { Component } from 'react';
    import { Container, Content } from 'native-base';
    import { Col, Row, Grid } from "react-native-easy-grid";
    ​
    export default class LayoutExample extends Component {
        render() {
            return (
                <Container>
                    <Content>
                        <Grid>
                            <Col style={{ backgroundColor: '#D954D7', height: 200 }}></Col>
                            <Col style={{ backgroundColor: '#D93735', height: 200  }}></Col>
                        </Grid>
                    </Content>
                </Container>
            );
        }
    }

Comments are closed.