react-native-easy-grid
TypeScript icon, indicating that this package has built-in type declarations

0.2.2 • Public • Published

React Native Easy Grid 🐵

Master Build Status

This is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach.

Installation

npm install react-native-easy-grid --save

Usage

Include the components

import { Col, Row, Grid } from "react-native-easy-grid";

1. Two columns (50% and 50%)

<Grid>
    <Col></Col>
    <Col></Col>
</Grid>

col-50-50

Note: If you don't assign the size property, it defaults to equal width (or height) with its siblings

2. Two rows

<Grid>
    <Row></Row>
    <Row></Row>
</Grid>

row-50-50

3. Two rows (75% and 25%)

<Grid>
    <Row size={75}></Row>
    <Row size={25}></Row>
</Grid>

This is exactly same as

<Grid>
    <Row size={3}></Row>
    <Row size={1}></Row>
</Grid>

row-75-25

Same concept applies to <Col />

4. Three columns (33.33% each)

<Grid>
    <Col></Col>
    <Col></Col>
    <Col></Col>
</Grid>

col-33-33-33

5. Three rows (50%, 25% and 25%)

<Grid>
    <Row size={2}></Row>
    <Row size={1}></Row>
    <Row size={1}></Row>
</Grid>

row-50-25-25

6. Nested Layout or Grid

1 2
3
<Grid>
    <Col>
        <Text>1</Text>
    </Col>
    <Col>
        <Row>
            <Text>2</Text>
        </Row>
        <Row>
            <Text>3</Text>
        </Row>
    </Col>
</Grid>

complex

7. Fixed width and fluid width combination

<Grid>
    <Col style={{ width: 40 }}>
        <Text>Fixed width</Text>
    </Col>
    <Col>
        <Text>Fluid width</Text>
    </Col>
</Grid>

col-fluid-fixed.png

8. Fixed height and fluid height combination

<Grid>
    <Row style={{ height: 40 }}>
        <Text>Fixed width</Text>
    </Row>
    <Row>
        <Text>Fluid width</Text>
    </Row>
</Grid>

Do you think anything could be simpler than that? This repo is part of our bigger project called NativeBase.io. Do check that!

Important note about usage with <ScrollView />

Note: If you're using <Row /> inside a <ScrollView />, the height of the component would be flexible according to the content, though you can always apply the height styling.

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-easy-grid

Weekly Downloads

14,308

Version

0.2.2

License

none

Unpacked Size

89.9 kB

Total Files

26

Last publish

Collaborators

  • surajahmedc
  • geekyants-admin
  • sanketsahu
  • sarika_geekyants
  • faizahmed
  • kumarpratik
  • himanshu-geek
  • atulrpandey
  • khalidimam1201
  • gauravp
  • gauravprwl14
  • himanshu-bx
  • akarsh8
  • himanshu-sahusoft
  • sankhadeeproy007
  • shivrajk