├── .gitignore
├── .DS_Store
├── doc-images
└── all.png
├── src
├── index.ts
└── components
│ ├── Row.tsx
│ ├── Col.tsx
│ └── styles.ts
├── tsconfig.json
├── package.json
├── example
└── Example.tsx
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/im-fahad/react-native-responsive-grid-system/HEAD/.DS_Store
--------------------------------------------------------------------------------
/doc-images/all.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/im-fahad/react-native-responsive-grid-system/HEAD/doc-images/all.png
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import Row from "./components/Row"
2 | import Col from "./components/Col"
3 |
4 | export { Row, Col }
5 |
--------------------------------------------------------------------------------
/src/components/Row.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { View } from "react-native"
3 | import useGridStyles from "./styles"
4 |
5 | interface IProps {
6 | children: React.ReactNode
7 | rowStyles?: any
8 | }
9 |
10 | const Row = ({ children, rowStyles }: IProps) => {
11 | const gridStyles = useGridStyles()
12 |
13 | return {children}
14 | }
15 |
16 | export default Row
17 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": false,
17 | "jsx": "react-jsx",
18 | "outDir": "dist"
19 | },
20 | "include": ["src"]
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/Col.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { View } from "react-native"
3 | import useGridStyles from "./styles"
4 |
5 | interface IProps {
6 | children: React.ReactNode
7 | xs?: number
8 | sm?: number
9 | md?: number
10 | lg?: number
11 | colStyles?: any
12 | }
13 |
14 | const Col = ({ children, xs, sm, md, lg, colStyles }: IProps) => {
15 | const columns_xs = "col_" + xs
16 | const columns_sm = "col_sm_" + (sm || xs)
17 | const columns_md = "col_md_" + (md || sm || xs)
18 | const columns_lg = "col_lg_" + (lg || md || sm || xs)
19 |
20 | const gridStyles = useGridStyles()
21 |
22 | return (
23 |
32 | {children}
33 |
34 | )
35 | }
36 |
37 | export default Col
38 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-responsive-grid-system",
3 | "version": "1.1",
4 | "description": "react-native-responsive-grid-system components",
5 | "main": "dist/index.js",
6 | "directories": {
7 | "example": "example"
8 | },
9 | "scripts": {
10 | "build": "tsc"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/im-fahad/react-native-responsive-grid-system.git"
15 | },
16 | "keywords": [
17 | "react-native",
18 | "grid",
19 | "layout",
20 | "responsive-grid",
21 | "responsive-grid-system",
22 | "react-native-responsive-grid",
23 | "react-native-responsive-grid-system",
24 | "grid-system"
25 | ],
26 | "author": "al_fahad",
27 | "license": "ISC",
28 | "bugs": {
29 | "url": "https://github.com/im-fahad/react-native-responsive-grid-system/issues"
30 | },
31 | "homepage": "https://github.com/im-fahad/react-native-responsive-grid-system#readme",
32 | "dependencies": {
33 | "react": "latest",
34 | "react-native": "latest"
35 | },
36 | "devDependencies": {
37 | "@types/react": "latest",
38 | "@types/react-native": "latest",
39 | "typescript": "latest"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/example/Example.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { ScrollView, StyleSheet, Text, View } from "react-native"
3 | import { Col, Row } from "../src"
4 |
5 | const styles = StyleSheet.create({
6 | colBody: {
7 | width: "100%",
8 | height: 100,
9 | alignItems: "center",
10 | justifyContent: "center",
11 | backgroundColor: "#fe9938",
12 | marginBottom: 5
13 | },
14 | colTitle: {
15 | fontSize: 14,
16 | color: "#fff"
17 | }
18 | })
19 |
20 | const Example = () => {
21 | return (
22 |
23 |
24 |
25 |
26 |
27 | Column 1
28 |
29 |
30 |
31 |
32 |
33 | Column 2
34 |
35 |
36 |
37 |
38 |
39 | Column 3
40 |
41 |
42 |
43 |
44 |
45 | Column 4
46 |
47 |
48 |
49 |
50 |
51 | )
52 | }
53 |
54 | export default Example
55 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Native Responsive Grid System
2 |
3 | This component helps you to create responsive grids in your React Native app design.
4 |
5 | ## Get Started
6 |
7 | ### Installation
8 |
9 | ```bash
10 | $ npm i react-native-responsive-grid-system
11 | ```
12 |
13 | ### Usage
14 |
15 | Start using the components
16 |
17 | ```tsx
18 | import { Row, Col } from "react-native-responsive-grid-system"
19 |
20 | const MyApp = () => {
21 | return (
22 |
23 |
24 | {/* Your content goes here */}
25 |
26 |
27 | )
28 | }
29 | ```
30 |
31 | ## Components
32 |
33 | - [Row](#row)
34 | - [Col](#col)
35 |
36 | ### Example Grid
37 |
38 |
39 |
40 | 
41 |
42 |
43 |
44 | ## How it works
45 |
46 | React Native Grid System uses a series of rows, and columns to layout and align content. It’s built with Flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
47 |
48 | ### Row
49 |
50 | - Rows are wrappers for columns. Each column has padding-right (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
51 |
52 | - Row have margin-right to create the gutters, however, you can remove the margin from rows with rowStyles={{ marginRight: 0 }} on the Row.
53 |
54 | ```tsx
55 | |
56 | ```
57 |
58 | ### Col
59 |
60 | - In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
61 |
62 | - Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use xs={4}, sm={4}, md={4} or lg={4}.
63 |
64 | - Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
65 |
66 | - Columns have padding-right to create the gutters between individual columns, however, you can remove the padding from columns with colStyles={{ paddingRight: 0 }} on the Col.
67 |
68 | - To make the grid responsive, there are 4 grid breakpoints, one for each responsive breakpoint: all breakpoints extra-small (xs), small (sm), medium (md) and large (lg).
69 |
70 | ```tsx
71 |
72 | {/* Your content */}
73 |
74 | ```
75 |
76 | ## Customization
77 |
78 | ### Component Styles (Row)
79 |
80 | ```tsx
81 | |
88 | ```
89 |
90 | ### Component Styles (Col)
91 |
92 | ```tsx
93 |
100 | {/* Your content */}
101 |
102 | ```
103 |
104 | ## Responsive
105 |
106 | We design this for multiple screen size. Like extra small, small, medium and large size screen. When you use this component your app UI response you in different screen (standard size mobile, large-screen mobile, mid-screen tab, and large screen tab).
107 |
108 | ### Example
109 |
110 | ```tsx
111 |
112 |
113 | ----
114 |
115 |
116 |
117 | ----
118 |
119 |
120 |
121 | -----
122 |
123 |
124 |
125 | ----
126 |
127 |
128 | ```
129 |
--------------------------------------------------------------------------------
/src/components/styles.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react"
2 | import { StyleSheet, useWindowDimensions } from "react-native"
3 |
4 | const generateStyles = (width: number) => {
5 | const colWidth = 100 / 12
6 |
7 | const xs = width > 0 && width < 418
8 | const sm = width > 417 && width < 768
9 | const md = width > 767 && width < 1024
10 | const lg = width > 1023
11 |
12 | return StyleSheet.create(
13 | xs
14 | ? {
15 | row: {
16 | flexDirection: "row",
17 | flexWrap: "wrap",
18 | marginRight: -5
19 | },
20 | col_1: {
21 | width: colWidth * 1 + "%",
22 | paddingRight: 5
23 | },
24 | col_2: {
25 | width: colWidth * 2 + "%",
26 | paddingRight: 5
27 | },
28 | col_3: {
29 | width: colWidth * 3 + "%",
30 | paddingRight: 5
31 | },
32 | col_4: {
33 | width: colWidth * 4 + "%",
34 | paddingRight: 5
35 | },
36 | col_5: {
37 | width: colWidth * 5 + "%",
38 | paddingRight: 5
39 | },
40 | col_6: {
41 | width: colWidth * 6 + "%",
42 | paddingRight: 5
43 | },
44 | col_7: {
45 | width: colWidth * 7 + "%",
46 | paddingRight: 5
47 | },
48 | col_8: {
49 | width: colWidth * 8 + "%",
50 | paddingRight: 5
51 | },
52 | col_9: {
53 | width: colWidth * 9 + "%",
54 | paddingRight: 5
55 | },
56 | col_10: {
57 | width: colWidth * 10 + "%",
58 | paddingRight: 5
59 | },
60 | col_11: {
61 | width: colWidth * 11 + "%",
62 | paddingRight: 5
63 | },
64 | col_12: {
65 | width: colWidth * 12 + "%",
66 | paddingRight: 5
67 | }
68 | }
69 | : sm
70 | ? {
71 | row: {
72 | flexDirection: "row",
73 | flexWrap: "wrap",
74 | marginRight: -6
75 | },
76 | col_sm_1: {
77 | width: colWidth * 1 + "%",
78 | paddingRight: 6
79 | },
80 | col_sm_2: {
81 | width: colWidth * 2 + "%",
82 | paddingRight: 6
83 | },
84 | col_sm_3: {
85 | width: colWidth * 3 + "%",
86 | paddingRight: 6
87 | },
88 | col_sm_4: {
89 | width: colWidth * 4 + "%",
90 | paddingRight: 6
91 | },
92 | col_sm_5: {
93 | width: colWidth * 5 + "%",
94 | paddingRight: 6
95 | },
96 | col_sm_6: {
97 | width: colWidth * 6 + "%",
98 | paddingRight: 6
99 | },
100 | col_sm_7: {
101 | width: colWidth * 7 + "%",
102 | paddingRight: 6
103 | },
104 | col_sm_8: {
105 | width: colWidth * 8 + "%",
106 | paddingRight: 6
107 | },
108 | col_sm_9: {
109 | width: colWidth * 9 + "%",
110 | paddingRight: 6
111 | },
112 | col_sm_10: {
113 | width: colWidth * 10 + "%",
114 | paddingRight: 6
115 | },
116 | col_sm_11: {
117 | width: colWidth * 11 + "%",
118 | paddingRight: 6
119 | },
120 | col_sm_12: {
121 | width: colWidth * 12 + "%",
122 | paddingRight: 6
123 | }
124 | }
125 | : md
126 | ? {
127 | row: {
128 | flexDirection: "row",
129 | flexWrap: "wrap",
130 | marginRight: -7
131 | },
132 | col_md_1: {
133 | width: colWidth * 1 + "%",
134 | paddingRight: 7
135 | },
136 | col_md_2: {
137 | width: colWidth * 2 + "%",
138 | paddingRight: 7
139 | },
140 | col_md_3: {
141 | width: colWidth * 3 + "%",
142 | paddingRight: 7
143 | },
144 | col_md_4: {
145 | width: colWidth * 4 + "%",
146 | paddingRight: 7
147 | },
148 | col_md_5: {
149 | width: colWidth * 5 + "%",
150 | paddingRight: 7
151 | },
152 | col_md_6: {
153 | width: colWidth * 6 + "%",
154 | paddingRight: 7
155 | },
156 | col_md_7: {
157 | width: colWidth * 7 + "%",
158 | paddingRight: 7
159 | },
160 | col_md_8: {
161 | width: colWidth * 8 + "%",
162 | paddingRight: 7
163 | },
164 | col_md_9: {
165 | width: colWidth * 9 + "%",
166 | paddingRight: 7
167 | },
168 | col_md_10: {
169 | width: colWidth * 10 + "%",
170 | paddingRight: 7
171 | },
172 | col_md_11: {
173 | width: colWidth * 11 + "%",
174 | paddingRight: 7
175 | },
176 | col_md_12: {
177 | width: colWidth * 12 + "%",
178 | paddingRight: 7
179 | }
180 | }
181 | : {
182 | row: {
183 | flexDirection: "row",
184 | flexWrap: "wrap",
185 | marginRight: -8
186 | },
187 | col_lg_1: {
188 | width: colWidth * 1 + "%",
189 | paddingRight: 8
190 | },
191 | col_lg_2: {
192 | width: colWidth * 2 + "%",
193 | paddingRight: 8
194 | },
195 | col_lg_3: {
196 | width: colWidth * 3 + "%",
197 | paddingRight: 8
198 | },
199 | col_lg_4: {
200 | width: colWidth * 4 + "%",
201 | paddingRight: 8
202 | },
203 | col_lg_5: {
204 | width: colWidth * 5 + "%",
205 | paddingRight: 8
206 | },
207 | col_lg_6: {
208 | width: colWidth * 6 + "%",
209 | paddingRight: 8
210 | },
211 | col_lg_7: {
212 | width: colWidth * 7 + "%",
213 | paddingRight: 8
214 | },
215 | col_lg_8: {
216 | width: colWidth * 8 + "%",
217 | paddingRight: 8
218 | },
219 | col_lg_9: {
220 | width: colWidth * 9 + "%",
221 | paddingRight: 8
222 | },
223 | col_lg_10: {
224 | width: colWidth * 10 + "%",
225 | paddingRight: 8
226 | },
227 | col_lg_11: {
228 | width: colWidth * 11 + "%",
229 | paddingRight: 8
230 | },
231 | col_lg_12: {
232 | width: colWidth * 12 + "%",
233 | paddingRight: 8
234 | }
235 | }
236 | )
237 | }
238 |
239 | const useGridStyles = () => {
240 | const windowDimensions = useWindowDimensions()
241 |
242 | const [gridStyles, setGridStyles] = useState<
243 | ReturnType
244 | >(generateStyles(windowDimensions.width))
245 |
246 | useEffect(() => {
247 | setGridStyles(generateStyles(windowDimensions.width))
248 | }, [windowDimensions])
249 |
250 | return gridStyles
251 | }
252 |
253 | export default useGridStyles
254 |
--------------------------------------------------------------------------------