Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- 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 8 years ago)
- Default Branch: master
- Last Pushed: 2019-11-02T01:07:08.000Z (about 5 years ago)
- Last Synced: 2024-12-12T19:08:35.429Z (30 days 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.