https://github.com/GeekyAnts/react-native-easy-grid

Easy React Native Layout & Grid for the Dumb
https://github.com/GeekyAnts/react-native-easy-grid

Last synced: 3 months ago
JSON representation

Easy React Native Layout & Grid for the Dumb

• Host: GitHub
• URL: https://github.com/GeekyAnts/react-native-easy-grid
• Owner: GeekyAnts
• License: apache-2.0
• Created: 2016-05-04T13:58:29.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2019-11-02T01:07:08.000Z (about 6 years ago)
• Last Synced: 2024-12-12T19:08:35.429Z (11 months ago)
• Language: JavaScript
• Size: 85.9 KB
• Stars: 2,174
• Watchers: 32
• Forks: 169
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • Changelog: ChangeLog.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-easy-grid ★1304 - Easy Responsive Grid Layout for React Native. (Components / UI)
• awesome-list - react-native-easy-grid
• awesome-react-native - react-native-easy-grid ★1304 - Easy Responsive Grid Layout for React Native. (Components / UI)
• awesome-react-native - react-native-easy-grid ★1304 - Easy Responsive Grid Layout for React Native. (Components / UI)
• awesome-react-native - react-native-easy-grid ★1304 - Easy Responsive Grid Layout for React Native. (Components / UI)

README

          
# React Native Easy Grid 🐵

![Master Build Status](https://travis-ci.org/GeekyAnts/react-native-easy-grid.svg?branch=master) 


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%)

```

    

    

```

![col-50-50](Examples/col-50-50.png "Column 50% and 50% example")

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

### 2. Two rows

```

    

    

```

![row-50-50](Examples/row-50-50.png "Row 50% and 50% example")

### 3. Two rows (75% and 25%)

```

    

    

```

This is exactly same as

```

    

    

```

![row-75-25](Examples/row-75-25.png "Row 75% and 25% example")

> Same concept applies to ``

### 4. Three columns (33.33% each)

```

    

    

    

```

![col-33-33-33](Examples/col-33-33-33.png "Column 33.33% each")

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

```

    

    

    

```

![row-50-25-25](Examples/row-50-25-25.png "Row 50%, 25% and 50% example")

### 6. Nested Layout or Grid

    

        1

        2

    

    

        3

    

```

    

        1

    

    

        

            2

        

        

            3

        

    

```

![complex](Examples/complex.png "Complex and Nested Layouts")

### 7. Fixed width and fluid width combination

```

    

        Fixed width

    

    

        Fluid width

    

```

![col-fluid-fixed.png](Examples/col-fluid-fixed.png "Column fluid and fixed example")

### 8. Fixed height and fluid height combination

```

    

        Fixed width

    

    

        Fluid width

    

```

Do you think anything could be simpler than that? This repo is part of our bigger project called [NativeBase.io](http://nativebase.io). Do check that!

# Important note about usage with ``

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