Skip to content

Commit e755e45

Browse files
author
Nir Hadassi
committed
first commit
1 parent b4feaf8 commit e755e45

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+2860
-0
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react-native"]
3+
}

‎.buckconfig

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎.flowconfig

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
[ignore]
2+
; We fork some components by platform
3+
.*/*[.]android.js
4+
5+
; Ignore "BUCK" generated dirs
6+
<PROJECT_ROOT>/\.buckd/
7+
8+
; Ignore unexpected extra "@providesModule"
9+
.*/node_modules/.*/node_modules/fbjs/.*
10+
11+
; Ignore duplicate module providers
12+
; For RN Apps installed via npm, "Libraries" folder is inside
13+
; "node_modules/react-native" but in the source repo it is in the root
14+
.*/Libraries/react-native/React.js
15+
.*/Libraries/react-native/ReactNative.js
16+
17+
[include]
18+
19+
[libs]
20+
node_modules/react-native/Libraries/react-native/react-native-interface.js
21+
node_modules/react-native/flow
22+
flow/
23+
24+
[options]
25+
module.system=haste
26+
27+
experimental.strict_type_args=true
28+
29+
munge_underscores=true
30+
31+
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
32+
33+
suppress_type=$FlowIssue
34+
suppress_type=$FlowFixMe
35+
suppress_type=$FixMe
36+
37+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-7]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
38+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-7]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
39+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
40+
41+
unsafe.enable_getters_and_setters=true
42+
43+
[version]
44+
^0.37.0

‎.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.pbxproj -text

‎.gitignore

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
33+
# node.js
34+
#
35+
node_modules/
36+
npm-debug.log
37+
yarn-error.log
38+
39+
# BUCK
40+
buck-out/
41+
\.buckd/
42+
android/app/libs
43+
*.keystore
44+
45+
# fastlane
46+
#
47+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
48+
# screenshots whenever they are needed.
49+
# For more information about the recommended setup visit:
50+
# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
51+
52+
fastlane/report.xml
53+
fastlane/Preview.html
54+
fastlane/screenshots

‎.watchmanconfig

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎README.md

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<h1>Make your React-Native app sexy on every size</h1>
2+
3+
Did it ever happen to you that your designer handed you a cool design,
4+
you developed it on, let's say, an iPhone 7,
5+
and when you run it on an a Tablet everything looked like you left it too long at the dryer?
6+
<br/>
7+
That's probably because the design was created using dp (density pixels).
8+
To keep things simple - the bigger your device the more dp it'll have.
9+
<br/>When working with React-Native iPhone 7 has **375dp** width and **667dp** height and a Galaxy Tab A 8.0" Tablet (the one I'm using)
10+
has **768dp** width and **1024dp** height.<br/>
11+
So while a `<View style={{width: 300, height: 450}}/>` will cover most of your iPhone screen
12+
it will cover less than half of your tablet screen.
13+
14+
<h4>So how can I make my app sexy on the tablet as well?</h4>
15+
Oh! I'm glad you asked. On this blog post I'll show several methods to scale your components among
16+
different screen sizes, and which one I found best.
17+
For this purpose I created a small example app, and on every scaling method I'll attach the component's
18+
code along with a screenshot an a tablet and an iPhone.
19+
20+
<h4>No scaling</h4>
21+
22+
So this is the component:
23+
```javascript
24+
import React from 'react';
25+
import { View, Text, Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
26+
import { loremIpsum } from './contants';
27+
const { width, height } = Dimensions.get('window');
28+
29+
const AwesomeComponent = () =>
30+
<View style={styles.container}>
31+
<View style={styles.box}>
32+
<Text style={styles.title}>Awesome Blog Post Page</Text>
33+
<Text style={styles.text}>{loremIpsum + '\nwidth: ' + width + '\nheight: ' + height}</Text>
34+
<View style={styles.buttonsContainer}>
35+
<TouchableOpacity style={styles.button}>
36+
<Text style={styles.buttonText}>Accept</Text>
37+
</TouchableOpacity>
38+
<TouchableOpacity style={styles.button}>
39+
<Text style={styles.buttonText}>Decline</Text>
40+
</TouchableOpacity>
41+
</View>
42+
</View>
43+
</View>;
44+
45+
export default AwesomeComponent;
46+
```
47+
48+
And this is the StyleSheet:
49+
```javascript
50+
const styles = StyleSheet.create({
51+
container: {
52+
width: width,
53+
height: height,
54+
backgroundColor: '#F0D6FF',
55+
alignItems: 'center',
56+
justifyContent: 'center',
57+
},
58+
box: {
59+
width: 300,
60+
height: 450,
61+
backgroundColor: 'white',
62+
borderRadius: 10,
63+
padding: 10,
64+
shadowColor: 'black',
65+
shadowOpacity: 0.5,
66+
shadowRadius: 3,
67+
shadowOffset: {
68+
height: 0,
69+
width: 0
70+
},
71+
elevation: 2
72+
},
73+
title: {
74+
fontSize: 20,
75+
fontWeight: 'bold',
76+
marginBottom: 10
77+
},
78+
text: {
79+
fontSize: 14
80+
},
81+
buttonsContainer: {
82+
flex: 1,
83+
justifyContent: 'flex-end',
84+
alignItems: 'center'
85+
},
86+
button: {
87+
width: 150,
88+
height: 45,
89+
borderRadius: 100,
90+
marginBottom: 10,
91+
backgroundColor: '#66E8FF',
92+
alignItems: 'center',
93+
justifyContent: 'center',
94+
},
95+
buttonText: {
96+
fontWeight: 'bold',
97+
fontSize: 14
98+
}
99+
});
100+
```
101+
102+
As you can see all my StyleSheet sizes are in dp units on no scaling was done.
103+
This will end up looking like this:
104+
![iPhone](images/iphone1.png "iPhone7")

‎__tests__/index.android.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import 'react-native';
2+
import React from 'react';
3+
import Index from '../index.android.js';
4+
5+
// Note: test renderer must be required after react-native.
6+
import renderer from 'react-test-renderer';
7+
8+
it('renders correctly', () => {
9+
const tree = renderer.create(
10+
<Index />
11+
);
12+
});

‎__tests__/index.ios.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import 'react-native';
2+
import React from 'react';
3+
import Index from '../index.ios.js';
4+
5+
// Note: test renderer must be required after react-native.
6+
import renderer from 'react-test-renderer';
7+
8+
it('renders correctly', () => {
9+
const tree = renderer.create(
10+
<Index />
11+
);
12+
});

‎android/app/BUCK

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import re
2+
3+
# To learn about Buck see [Docs](https://buckbuild.com/).
4+
# To run your application with Buck:
5+
# - install Buck
6+
# - `npm start` - to start the packager
7+
# - `cd android`
8+
# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
9+
# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
10+
# - `buck install -r android/app` - compile, install and run application
11+
#
12+
13+
lib_deps = []
14+
for jarfile in glob(['libs/*.jar']):
15+
name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile)
16+
lib_deps.append(':' + name)
17+
prebuilt_jar(
18+
name = name,
19+
binary_jar = jarfile,
20+
)
21+
22+
for aarfile in glob(['libs/*.aar']):
23+
name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile)
24+
lib_deps.append(':' + name)
25+
android_prebuilt_aar(
26+
name = name,
27+
aar = aarfile,
28+
)
29+
30+
android_library(
31+
name = 'all-libs',
32+
exported_deps = lib_deps
33+
)
34+
35+
android_library(
36+
name = 'app-code',
37+
srcs = glob([
38+
'src/main/java/**/*.java',
39+
]),
40+
deps = [
41+
':all-libs',
42+
':build_config',
43+
':res',
44+
],
45+
)
46+
47+
android_build_config(
48+
name = 'build_config',
49+
package = 'com.blogpost',
50+
)
51+
52+
android_resource(
53+
name = 'res',
54+
res = 'src/main/res',
55+
package = 'com.blogpost',
56+
)
57+
58+
android_binary(
59+
name = 'app',
60+
package_type = 'debug',
61+
manifest = 'src/main/AndroidManifest.xml',
62+
keystore = '//android/keystores:debug',
63+
deps = [
64+
':app-code',
65+
],
66+
)

0 commit comments

Comments
 (0)