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

Commit d01eb2b

Browse files
rundmtrundmt
committed
initial commit
0 parents  commit d01eb2b

File tree

5 files changed

+262
-0
lines changed

5 files changed

+262
-0
lines changed

‎package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "react-native-flexbox-grid",
3+
"version": "0.0.1",
4+
"description": "Grid system for react native based on flexbox grid's api",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/rundmt/react-native-flexbox-grid.git"
12+
},
13+
"keywords": [
14+
"react",
15+
"native",
16+
"flexbox",
17+
"grid"
18+
],
19+
"author": "Derek Tor <[email protected]> (http://derektor.me)",
20+
"license": "MIT",
21+
"bugs": {
22+
"url": "https://github.com/rundmt/react-native-flexbox-grid/issues"
23+
},
24+
"homepage": "https://github.com/rundmt/react-native-flexbox-grid#readme"
25+
}

‎src/components/Column.js‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
'use strict';
2+
3+
import React from 'react-native';
4+
import {setScreenSize} from '../lib/ScreenSize';
5+
6+
var {
7+
Component,
8+
PropTypes,
9+
StyleSheet,
10+
Text,
11+
View,
12+
} = React;
13+
14+
export default class Column extends Component {
15+
constructor(props){
16+
super(props);
17+
this.screenSize = setScreenSize();
18+
this.state = {
19+
width: this.getComponentWidth(),
20+
marginLeft: this.getComponentOffset(),
21+
hidden: this.isHidden(),
22+
};
23+
}
24+
25+
getComponentWidth(){
26+
switch(this.screenSize) {
27+
case 'small':
28+
if(this.props.sm){
29+
return this.props.parentWidth * this.props.sm/this.props.rowSize;
30+
} else {
31+
return this.props.parentWidth;
32+
}
33+
break;
34+
case 'medium':
35+
if(this.props.md){
36+
return this.props.parentWidth * this.props.md/this.props.rowSize;
37+
} else if(this.props.sm){
38+
return this.props.parentWidth * this.props.sm/this.props.rowSize;
39+
} else {
40+
return this.props.parentWidth;
41+
}
42+
break;
43+
case 'large':
44+
if(this.props.lg){
45+
return this.props.parentWidth * this.props.lg/this.props.rowSize;
46+
} else if(this.props.md){
47+
return this.props.parentWidth * this.props.md/this.props.rowSize;
48+
} else if(this.props.sm){
49+
return this.props.parentWidth * this.props.sm/this.props.rowSize;
50+
} else {
51+
return this.props.parentWidth;
52+
}
53+
break;
54+
default:
55+
return this.props.parentWidth;
56+
}
57+
}
58+
59+
getComponentOffset(){
60+
switch(this.screenSize) {
61+
case 'small':
62+
if(this.props.smOffset){
63+
return this.props.parentWidth * this.props.smOffset/this.props.rowSize;
64+
} else {
65+
return 0;
66+
}
67+
break;
68+
case 'medium':
69+
if(this.props.mdOffset){
70+
return this.props.parentWidth * this.props.mdOffset/this.props.rowSize;
71+
} else if(this.props.smOffset){
72+
return this.props.parentWidth * this.props.smOffset/this.props.rowSize;
73+
} else {
74+
return 0;
75+
}
76+
break;
77+
case 'large':
78+
if(this.props.lgOffset){
79+
return this.props.parentWidth * this.props.lgOffset/this.props.rowSize;
80+
} else if(this.props.mdOffset){
81+
return this.props.parentWidth * this.props.mdOffset/this.props.rowSize;
82+
} else if(this.props.smOffset){
83+
return this.props.parentWidth * this.props.smOffset/this.props.rowSize;
84+
} else {
85+
return 0;
86+
}
87+
break;
88+
default:
89+
return 0;
90+
}
91+
}
92+
93+
isHidden(){
94+
switch(this.screenSize) {
95+
case 'small':
96+
return this.props.smHidden;
97+
case 'medium':
98+
return this.props.mdHidden;
99+
case 'large':
100+
return this.props.lgHidden;
101+
default:
102+
return false;
103+
}
104+
}
105+
106+
render() {
107+
if(this.state.hidden){
108+
return null;
109+
} else {
110+
return (
111+
<View
112+
{...this.props}
113+
style={[this.props.style, {width: this.state.width, flexDirection: 'column', marginLeft: this.state.marginLeft}]}>
114+
{this.props.children}
115+
</View>
116+
);
117+
}
118+
}
119+
}
120+
121+
Column.propTypes = {
122+
sm: PropTypes.number,
123+
smOffset: PropTypes.number,
124+
smHidden: PropTypes.bool,
125+
md: PropTypes.number,
126+
mdOffset: PropTypes.number,
127+
mdHidden: PropTypes.bool,
128+
lg: PropTypes.number,
129+
lgOffset: PropTypes.number,
130+
lgHidden: PropTypes.bool,
131+
width: PropTypes.number
132+
};

‎src/components/Row.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
*/
5+
'use strict';
6+
7+
import React from 'react-native';
8+
import {setScreenSize} from '../lib/ScreenSize';
9+
10+
var {
11+
Component,
12+
Dimensions,
13+
StyleSheet,
14+
PropTypes,
15+
View,
16+
} = React;
17+
18+
const SCREEN_WIDTH = Dimensions.get('window').width;
19+
20+
export default class Row extends Component {
21+
constructor(props){
22+
super(props);
23+
this.screenSize = setScreenSize();
24+
this.state = {
25+
width: SCREEN_WIDTH,
26+
updated: false,
27+
hidden: this.isHidden(),
28+
};
29+
}
30+
31+
isHidden(){
32+
switch(this.screenSize) {
33+
case 'small':
34+
return this.props.smHidden;
35+
case 'medium':
36+
return this.props.mdHidden;
37+
case 'large':
38+
return this.props.lgHidden;
39+
default:
40+
return false;
41+
}
42+
}
43+
44+
getWidth(res){
45+
this.setState({width: res.nativeEvent.layout.width, updated: true });
46+
}
47+
48+
render() {
49+
//if row doesn't or is 0 exist default to 12
50+
let rowSize = this.props.size > 0 ? this.props.size : 12;
51+
if(this.state.hidden){
52+
return null;
53+
} else {
54+
return (
55+
<View onLayout={this.getWidth.bind(this)} style={[styles.container, this.props.style, {flexWrap: this.props.wrap ? 'wrap' : 'nowrap'}, {alignItems: this.props.alignItems, justifyContent: this.props.justifyContent}]}>
56+
{React.Children.map(this.props.children, (element, idx) => {
57+
// Check if state is updated before cloning. Causes Layout to be slower, but stable.
58+
if(this.state.updated){
59+
return React.cloneElement(element, {parentWidth: this.state.width, rowSize: rowSize});
60+
}
61+
})}
62+
</View>
63+
);
64+
}
65+
}
66+
}
67+
68+
Row.propTypes = {
69+
size: PropTypes.number,
70+
smHidden: PropTypes.bool,
71+
mdHidden: PropTypes.bool,
72+
lgHidden: PropTypes.bool,
73+
};
74+
75+
var styles = StyleSheet.create({
76+
container: {
77+
flexDirection: 'row',
78+
},
79+
});

‎src/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export Row from './components/Row';
2+
export Column from './components/Column';
3+
export ScreenSize from './components/ScreenSize';

‎src/lib/ScreenSize.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use strict';
2+
3+
import React from 'react-native';
4+
5+
var {
6+
Dimensions
7+
} = React;
8+
9+
export function setScreenSize(){
10+
const SCREEN_WIDTH = Dimensions.get('window').width;
11+
const IPAD_WIDTH = 768;
12+
const IPAD_PRO_WIDTH = 1024;
13+
14+
if(SCREEN_WIDTH < IPAD_WIDTH){
15+
return 'small';
16+
}
17+
if(SCREEN_WIDTH >= IPAD_WIDTH && SCREEN_WIDTH < IPAD_PRO_WIDTH){
18+
return 'medium';
19+
}
20+
if(SCREEN_WIDTH >= IPAD_PRO_WIDTH){
21+
return 'large';
22+
}
23+
}

0 commit comments

Comments
 (0)