Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 27 days ago
JSON representation

Easy React Native Layout & Grid for the Dumb

Awesome Lists containing this project

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.