You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Mar 15, 2025. It is now read-only.
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.
4
4
5
5
# The Problem
6
6
Responsive Design is easy on the web but a bit harder on a mobile app.
7
7
8
8
I'm experimenting with using a CSS type grid to have conditional looks based on device width similar to media queries.
9
9
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.
0 commit comments