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.

    Keywords

    none

    Install

    npm i react-native-easy-grid

    DownloadsWeekly Downloads

    26,684

    Version

    0.2.2

    License

    none

    Unpacked Size

    89.9 kB

    Total Files

    26

    Last publish

    Collaborators

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