Skip to content
This repository was archived by the owner on Mar 15, 2025. It is now read-only.

Commit 4a33377

Browse files
committed
updated README
1 parent 5e8457c commit 4a33377

File tree

2 files changed

+46
-4
lines changed

2 files changed

+46
-4
lines changed

README.md

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,60 @@
11
# Flexbox Grid
22

3-
A Set of React Native Components to make a grid easier to reason about. I aim to have it match closely to react bootstraps grid api for familiarity.
3+
A Set of React Native Components to make a grid easier to reason about.
44

55
# The Problem
66
Responsive Design is easy on the web but a bit harder on a mobile app.
77

88
I'm experimenting with using a CSS type grid to have conditional looks based on device width similar to media queries.
99

10+
# Getting Started
11+
12+
### Installation
13+
14+
In your react native project
15+
16+
```
17+
npm install react-native-flexbox-grid
18+
```
19+
20+
21+
22+
### Import
23+
24+
```
25+
import {Column as Col, Row} from 'react-native-flexbox-grid';
26+
```
27+
28+
### Basic Example
29+
30+
```
31+
<View style={styles.container}>
32+
<Row size={12}>
33+
<Col sm={6} md={4} lg={3}>
34+
<Text>
35+
First Column
36+
</Text>
37+
</Col>
38+
<Col sm={6} md={4} lg={3}
39+
<Text>
40+
Second Column
41+
</Text>
42+
</Col>
43+
</Row>
44+
</View>
45+
```
46+
47+
The api is inspired by
48+
[react-flexbox-grid](https://www.npmjs.com/package/react-flexbox-grid), but it is not exactly the same.
49+
50+
The main difference is you can specify the grid size. By default `<Row>` is a size of 12. However if you want you can make a `<Row>` any size you want.
51+
52+
53+
1054
# What's working
1155
* Basic Grid
1256
* Styles
13-
* Use Flex on items
1457
* Hiding Items
1558

1659
# To Do
17-
* Come up with more layouts
1860
* Horizontal Display(Not sure if needed/wanted)

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-flexbox-grid",
3-
"version": "0.0.5",
3+
"version": "0.0.8",
44
"description": "Grid system for react native based on flexbox grid's api",
55
"main": "src/index.js",
66
"scripts": {

0 commit comments

Comments
 (0)