Skip to content

Commit 2b6948b

Browse files
author
Nir Hadassi
committed
ViewPort example
1 parent a402231 commit 2b6948b

12 files changed

+163
-53
lines changed

‎README.md

+55-2
Original file line numberDiff line numberDiff line change
@@ -157,11 +157,64 @@ Although the box has a good size on the tablet I personally don't recommend flex
157157
Flex can be an amazing solution for a lot of stuff but not for scaling, because..
158158

159159
* Results in a messy code with a lot of empty Views.
160-
* You can only flex width, height, margin and padding. Stuff like font-size or shadow-radius can't be flexed.
160+
* You can only flex properties like width, height, margin and padding. Stuff like font-size or shadow-radius can't be flexed.
161161
* Calculating everything with flex takes time, and as we know, time is money.
162162

163163
That said, we can now continue to our second method.
164164

165165
<h3>Method 2: Viewport Units</h3>
166+
On this method you basically convert every number you'd like to scale on your StyleSheet to
167+
a percentage of the device's width or height.
168+
So If your device's width is 375, 300dp will become `deviceWidth * 0.8` (300/375 = 0.8),
169+
and you can also do it on smaller numbers, for example `fontSize: 14` will become `fontSize: deviceWidth * 0.037`.
170+
A nice and straight-forward library that can simplify this method is [react-native-viewport-units](https://github.com/jmstout/react-native-viewport-units).
171+
<br/>
172+
This is they StyleSheet after *viewporting* stuff around (irrelevant parts were removed, component is exactly the same as the first example):
173+
174+
```javascript
175+
import {vw, vh} from 'react-native-viewport-units';
176+
177+
const styles = StyleSheet.create({
178+
container: {
179+
...
180+
},
181+
box: {
182+
width: 80 * vw,
183+
height: 67 * vh,
184+
padding: 2.6 * vw,
185+
...
186+
},
187+
title: {
188+
fontSize: 5.3 * vw,
189+
marginBottom: 2.6 * vw,
190+
fontWeight: 'bold',
191+
color: 'black'
192+
},
193+
text: {
194+
fontSize: 3.6 * vw,
195+
color: 'black'
196+
},
197+
buttonsContainer: {
198+
...
199+
},
200+
button: {
201+
width: 40 * vw,
202+
height: 10.7 * vw,
203+
borderRadius: 27 * vw,
204+
marginBottom: 2.6 * vw,
205+
...
206+
},
207+
buttonText: {
208+
fontWeight: 'bold',
209+
fontSize: 3.6 * vw,
210+
color: 'black'
211+
}
212+
});
213+
```
166214

167-
215+
And of course, what you all been waiting for, the result:
216+
<div>
217+
<img src="images/iphoneviewport.png" height="450" hspace="20"/>
218+
<img src="images/tabletviewport.png" height="450" hspace="20"/>
219+
</div>
220+
<br/>

‎__tests__/index.android.js

-12
This file was deleted.

‎__tests__/index.ios.js

-12
This file was deleted.

‎images/iphoneviewport.png

116 KB
Loading

‎images/tabletviewport.png

70.6 KB
Loading

‎index.android.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React, { Component } from 'react';
22
import { AppRegistry } from 'react-native';
3-
import Example from './pages/Example/Example';
4-
import FlexExample from './pages/Example/FlexExample';
3+
import Example from './pages/Example';
4+
import FlexExample from './pages/FlexExample';
5+
import ViewPortExample from './pages/ViewPortExample';
56

6-
const BlogPost = () => <FlexExample/>;
7+
const BlogPost = () => <ViewPortExample/>;
78
export default BlogPost;
89

910
AppRegistry.registerComponent('BlogPost', () => BlogPost);

‎index.ios.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React, { Component } from 'react';
22
import { AppRegistry } from 'react-native';
3-
import Example from './pages/Example/Example';
4-
import FlexExample from './pages/Example/FlexExample';
3+
import Example from './pages/Example';
4+
import FlexExample from './pages/FlexExample';
5+
import ViewPortExample from './pages/ViewPortExample';
56

6-
const BlogPost = () => <FlexExample/>;
7+
const BlogPost = () => <ViewPortExample/>;
78
export default BlogPost;
89

910
AppRegistry.registerComponent('BlogPost', () => BlogPost);

‎package.json

+22-21
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
{
2-
"name": "BlogPost",
3-
"version": "0.0.1",
4-
"private": true,
5-
"scripts": {
6-
"start": "node node_modules/react-native/local-cli/cli.js start",
7-
"test": "jest"
8-
},
9-
"dependencies": {
10-
"react": "15.4.2",
11-
"react-native": "0.41.2"
12-
},
13-
"devDependencies": {
14-
"babel-jest": "19.0.0",
15-
"babel-preset-react-native": "1.9.1",
16-
"jest": "19.0.0",
17-
"react-test-renderer": "15.4.2"
18-
},
19-
"jest": {
20-
"preset": "react-native"
21-
}
22-
}
2+
"name": "BlogPost",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"start": "node node_modules/react-native/local-cli/cli.js start",
7+
"test": "jest"
8+
},
9+
"dependencies": {
10+
"react": "15.4.2",
11+
"react-native": "0.41.2",
12+
"react-native-viewport-units": "0.0.5"
13+
},
14+
"devDependencies": {
15+
"babel-jest": "19.0.0",
16+
"babel-preset-react-native": "1.9.1",
17+
"jest": "19.0.0",
18+
"react-test-renderer": "15.4.2"
19+
},
20+
"jest": {
21+
"preset": "react-native"
22+
}
23+
}

‎pages/Example/Example.js ‎pages/Example.js

File renamed without changes.

‎pages/Example/FlexExample.js ‎pages/FlexExample.js

File renamed without changes.

‎pages/ViewPortExample.js

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react';
2+
import { View, Text, Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
3+
import { loremIpsum } from './contants';
4+
const { width, height } = Dimensions.get('window');
5+
6+
const ViewPortExample = () =>
7+
<View style={styles.container}>
8+
<View style={styles.box}>
9+
<Text style={styles.title}>Awesome Blog Post Page</Text>
10+
<Text style={styles.text}>{loremIpsum}</Text>
11+
<View style={styles.buttonsContainer}>
12+
<TouchableOpacity style={styles.button}>
13+
<Text style={styles.buttonText}>Accept</Text>
14+
</TouchableOpacity>
15+
<TouchableOpacity style={styles.button}>
16+
<Text style={styles.buttonText}>Decline</Text>
17+
</TouchableOpacity>
18+
</View>
19+
</View>
20+
</View>;
21+
22+
export default ViewPortExample;
23+
24+
import {vw, vh} from 'react-native-viewport-units';
25+
26+
const styles = StyleSheet.create({
27+
container: {
28+
width: width,
29+
height: height,
30+
backgroundColor: '#F0D6FF',
31+
alignItems: 'center',
32+
justifyContent: 'center',
33+
},
34+
box: {
35+
width: 80 * vw,
36+
height: 67 * vh,
37+
padding: 2.6 * vw,
38+
backgroundColor: 'white',
39+
borderRadius: 10,
40+
shadowColor: 'black',
41+
shadowOpacity: 0.5,
42+
shadowRadius: 3,
43+
shadowOffset: {
44+
height: 0,
45+
width: 0
46+
},
47+
elevation: 2
48+
},
49+
title: {
50+
fontSize: 5.3 * vw,
51+
fontWeight: 'bold',
52+
marginBottom: 2.6 * vw,
53+
color: 'black'
54+
},
55+
text: {
56+
fontSize: 3.6 * vw,
57+
color: 'black'
58+
},
59+
buttonsContainer: {
60+
flex: 1,
61+
justifyContent: 'flex-end',
62+
alignItems: 'center'
63+
},
64+
button: {
65+
width: 40 * vw,
66+
height: 10.7 * vw,
67+
borderRadius: 27 * vw,
68+
marginBottom: 2.6 * vw,
69+
backgroundColor: '#66E8FF',
70+
alignItems: 'center',
71+
justifyContent: 'center',
72+
},
73+
buttonText: {
74+
fontWeight: 'bold',
75+
fontSize: 3.6 * vw,
76+
color: 'black'
77+
}
78+
});

‎pages/Example/contants.js ‎pages/contants.js

File renamed without changes.

0 commit comments

Comments
 (0)