├── .babelrc ├── .github └── workflows │ ├── publish.yml │ └── test.yml ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── __mocks__ ├── @env.js └── react-native.js ├── __tests__ ├── ScaledSheet.spec.js ├── deep-map.spec.js ├── scaling-utils-alias.spec.js ├── scaling-utils.extend.spec.js └── scaling-utils.spec.js ├── examples ├── BlogPost │ ├── .babelrc │ ├── .flowconfig │ ├── .gitattributes │ ├── .gitignore │ ├── README.md │ ├── android │ │ ├── app │ │ │ ├── BUCK │ │ │ ├── build.gradle │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── blogpost │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── res │ │ │ │ ├── mipmap-hdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ ├── keystores │ │ │ ├── BUCK │ │ │ └── debug.keystore.properties │ │ └── settings.gradle │ ├── app.json │ ├── images │ │ ├── iphone1.png │ │ ├── iphoneflex.png │ │ ├── iphonescaling.png │ │ ├── iphoneviewport.png │ │ ├── meme.jpg │ │ ├── tablet1.png │ │ ├── tabletflex.png │ │ ├── tabletscaling.png │ │ └── tabletviewport.png │ ├── index.android.js │ ├── index.ios.js │ ├── ios │ │ ├── BlogPost.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ ├── BlogPost-tvOS.xcscheme │ │ │ │ └── BlogPost.xcscheme │ │ └── BlogPost │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ └── main.m │ ├── package.json │ ├── pages │ │ ├── App.js │ │ ├── Example.js │ │ ├── FlexExample.js │ │ ├── ScalingExample.js │ │ ├── ViewPortExample.js │ │ └── contants.js │ └── yarn.lock ├── README.md ├── change-guideline-sizes.md ├── expo-example-app │ ├── .flowconfig │ ├── .gitignore │ ├── .watchmanconfig │ ├── App.js │ ├── README.md │ ├── app.json │ ├── babel.config.js │ ├── components │ │ ├── Chat.js │ │ ├── Feed.js │ │ ├── Home.js │ │ └── behaviors │ │ │ └── withScaledSheetSwitch.js │ ├── package.json │ ├── screenshots │ │ ├── ipad129_1.PNG │ │ ├── ipad129_2.PNG │ │ ├── ipad129_3.PNG │ │ ├── ipad129_4.PNG │ │ ├── ipad129_5.PNG │ │ ├── ipad129_6.PNG │ │ ├── iphone6_1.PNG │ │ ├── iphone6_2.PNG │ │ ├── iphone6_3.PNG │ │ ├── iphone6_4.PNG │ │ ├── iphone6_5.PNG │ │ ├── iphone6_6.PNG │ │ ├── iphoneX_1.png │ │ ├── iphoneX_2.png │ │ ├── iphoneX_3.png │ │ ├── iphoneX_4.png │ │ ├── iphoneX_5.png │ │ └── iphoneX_6.png │ └── yarn.lock ├── ipad.gif └── ipad_gif.gif ├── extend.d.ts ├── extend.js ├── index.d.ts ├── index.js ├── lib ├── ScaledSheet.js ├── deep-map.js ├── extend │ └── scaling-utils.extend.js └── scaling-utils.js ├── package.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish to NPM 2 | 3 | on: 4 | workflow_dispatch: 5 | 6 | jobs: 7 | Publish: 8 | name: Publish 9 | runs-on: ubuntu-latest 10 | if: github.ref == 'refs/heads/master' 11 | steps: 12 | - name: checkout 13 | uses: actions/checkout@v2 14 | with: 15 | ref: 'master' 16 | 17 | - uses: actions/setup-node@v1 18 | with: 19 | node-version: 12 20 | registry-url: https://registry.npmjs.org/ 21 | 22 | - name: Install dependencies 23 | run: yarn install 24 | 25 | - name: Test 26 | run: yarn test 27 | 28 | - name: Publish to NPM 29 | run: npm publish 30 | env: 31 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 32 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: 4 | pull_request: 5 | branches: [ master ] 6 | 7 | jobs: 8 | unit-tests: 9 | name: Unit Tests 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v2 13 | 14 | - name: install 15 | run: yarn 16 | 17 | - name: test 18 | run: yarn test -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage 3 | settings.json 4 | .expo -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | examples 2 | node_modules 3 | .npmignore 4 | yarn.lock 5 | README.md 6 | .idea 7 | __mocks__ 8 | __tests__ 9 | .babelrc 10 | .travis.yml 11 | coverage 12 | .github -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Nir Hadassi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 📐 react-native-size-matters 2 | [![NPM version](https://img.shields.io/npm/v/react-native-size-matters.svg?color=steelblue)](https://www.npmjs.com/package/react-native-size-matters) 3 | [![Actions Status: test](https://github.com/nirsky/react-native-size-matters/workflows/Test/badge.svg)](https://github.com/nirsky/react-native-size-matters/actions?query=workflow%3ATest) 4 | [![TypeScript](https://badgen.net/npm/types/env-var)](https://github.com/nirsky/react-native-size-matters/blob/master/index.d.ts) 5 | ![npm](https://img.shields.io/npm/dw/react-native-size-matters) 6 | [![npm bundle size](https://img.shields.io/bundlephobia/min/react-native-size-matters)](https://bundlephobia.com/package/react-native-size-matters@latest) 7 | 8 | A lightweight, zero-dependencies, React-Native utility belt for scaling the size of your apps UI across different sized devices. 9 | 10 | 11 | 12 | 13 | 14 | ## Installation 15 | ```js 16 | npm install --save react-native-size-matters 17 | //or: 18 | yarn add react-native-size-matters 19 | ``` 20 | 21 | ## Motivation 22 | When developing with react-native, you need to manually adjust your app to look great on a variety of different screen sizes. That's a tedious job. 23 | react-native-size-matters provides some simple tooling to make your scaling a whole lot easier. 24 | The idea is to develop once on a standard ~5" screen mobile device and then simply apply the provided utils. 25 | 📖  You can read more about what led to this library on my blog post, which can be found in [this repo](./examples/BlogPost) or at [Medium](https://medium.com/soluto-engineering/size-matters-5aeeb462900a). 26 | 27 | ## API 28 | ### Scaling Functions 29 | ```js 30 | import { scale, verticalScale, moderateScale } from 'react-native-size-matters'; 31 | 32 | const Component = props => 33 | ; 38 | ``` 39 | 40 | 41 | * `scale(size: number)` 42 | Will return a linear scaled result of the provided size, based on your device's screen width. 43 | * `verticalScale(size: number)` 44 | Will return a linear scaled result of the provided size, based on your device's screen height. 45 | 46 | * `moderateScale(size: number, factor?: number)` 47 | Sometimes you don't want to scale everything in a linear manner, that's where moderateScale comes in. 48 | The cool thing about it is that you can control the resize factor (default is 0.5). 49 | If normal scale will increase your size by +2X, moderateScale will only increase it by +X, for example: 50 | ➡️   scale(10) = 20 51 | ➡️   moderateScale(10) = 15 52 | ➡️   moderateScale(10, 0.1) = 11 53 | * `moderateVerticalScale(size: number, factor?: number)` 54 | Same as moderateScale, but using verticalScale instead of scale. 55 | 56 | All scale functions can be imported using their shorthand alias as well: 57 | ```js 58 | import { s, vs, ms, mvs } from 'react-native-size-matters'; 59 | ``` 60 | 61 | 62 | ### ScaledSheet 63 | ```js 64 | import { ScaledSheet } from 'react-native-size-matters'; 65 | 66 | const styles = ScaledSheet.create(stylesObject) 67 | ``` 68 | 69 | ScaledSheet will take the same stylesObject a regular StyleSheet will take, plus a special (optional) annotation that will automatically apply the scale functions for you: 70 | * `@s` - will apply `scale` function on `size`. 71 | * `@vs` - will apply `verticalScale` function on `size`. 72 | * `@ms` - will apply `moderateScale` function with resize factor of 0.5 on `size`. 73 | * `@mvs` - will apply `moderateVerticalScale` function with resize factor of 0.5 on `size`. 74 | * `@ms` - will apply `moderateScale` function with resize factor of `factor` on size. 75 | * `@mvs` - will apply `moderateVerticalScale` function with resize factor of `factor` on size. 76 | 77 | ScaledSheet also supports rounding the result, simply add `r` at the end of the annotation. 78 | 79 | Example: 80 | ```js 81 | import { ScaledSheet } from 'react-native-size-matters'; 82 | 83 | const styles = ScaledSheet.create({ 84 | container: { 85 | width: '100@s', // = scale(100) 86 | height: '200@vs', // = verticalScale(200) 87 | padding: '2@msr', // = Math.round(moderateScale(2)) 88 | margin: 5 89 | }, 90 | row: { 91 | padding: '10@ms0.3', // = moderateScale(10, 0.3) 92 | width: '50@ms', // = moderateScale(50) 93 | height: '30@mvs0.3' // = moderateVerticalScale(30, 0.3) 94 | } 95 | }); 96 | ``` 97 | 98 |
99 | 100 | * [Changing the Default Guideline Sizes](./examples/change-guideline-sizes.md) 101 | * [Examples](./examples/README.md) 102 | 103 | -------------------------------------------------------------------------------- /__mocks__/@env.js: -------------------------------------------------------------------------------- 1 | const dotenv = { 2 | SIZE_MATTERS_BASE_WIDTH: 525, 3 | SIZE_MATTERS_BASE_HEIGHT: 1020 4 | }; 5 | 6 | module.exports = dotenv; 7 | -------------------------------------------------------------------------------- /__mocks__/react-native.js: -------------------------------------------------------------------------------- 1 | const reactNative = { 2 | Dimensions: { 3 | get: () => ({width: 700, height: 1020}) 4 | }, 5 | StyleSheet: { 6 | create: x => x 7 | } 8 | }; 9 | 10 | module.exports = reactNative; 11 | -------------------------------------------------------------------------------- /__tests__/ScaledSheet.spec.js: -------------------------------------------------------------------------------- 1 | jest.mock('react-native'); 2 | import { ScaledSheet, scale, verticalScale, moderateScale, moderateVerticalScale } from '..'; 3 | 4 | const getRandomInt = (min = 1, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min; 5 | 6 | describe('ScaledSheet', () => { 7 | test('Scale works', () => { 8 | const number = getRandomInt(); 9 | const input = { test: `${number}@s` }; 10 | expect(ScaledSheet.create(input).test).toBe(scale(number)); 11 | }); 12 | 13 | test('verticalScale works', () => { 14 | const number = getRandomInt(); 15 | const input = { test: `${number}@vs` }; 16 | expect(ScaledSheet.create(input).test).toBe(verticalScale(number)); 17 | }); 18 | 19 | test('moderateScale with default factor works', () => { 20 | const number = getRandomInt(); 21 | const input = { test: `${number}@ms` }; 22 | expect(ScaledSheet.create(input).test).toBe(moderateScale(number)); 23 | }); 24 | 25 | test('moderateVerticalScale with default factor works', () => { 26 | const number = getRandomInt(); 27 | const input = { test: `${number}@mvs` }; 28 | expect(ScaledSheet.create(input).test).toBe(moderateVerticalScale(number)); 29 | }); 30 | 31 | test('moderateScale with custom factor works', () => { 32 | const number = getRandomInt(); 33 | const input = { test: `${number}@ms0.7` }; 34 | expect(ScaledSheet.create(input).test).toBe(moderateScale(number, 0.7)); 35 | }); 36 | 37 | test('moderateVerticalScale with custom factor works', () => { 38 | const number = getRandomInt(); 39 | const input = { test: `${number}@mvs0.7` }; 40 | expect(ScaledSheet.create(input).test).toBe(moderateVerticalScale(number, 0.7)); 41 | }); 42 | 43 | test('Scale works with a negative value', () => { 44 | const number = getRandomInt(-100, -1); 45 | const input = { test: `${number}@s` }; 46 | expect(ScaledSheet.create(input).test).toBe(scale(number)); 47 | }); 48 | 49 | test('moderateScale works with a negative value', () => { 50 | const number = getRandomInt(-100, -1); 51 | const input = { test: `${number}@ms0.3` }; 52 | expect(ScaledSheet.create(input).test).toBe(moderateScale(number, 0.3)); 53 | }); 54 | 55 | test('moderateVerticalScale works with a negative value', () => { 56 | const number = getRandomInt(-100, -1); 57 | const input = { test: `${number}@mvs0.3` }; 58 | expect(ScaledSheet.create(input).test).toBe(moderateVerticalScale(number, 0.3)); 59 | }); 60 | 61 | test('Scale works on a deeply nested object', () => { 62 | const number = getRandomInt(); 63 | const input = { test: { test: { test: `${number}@s` } } }; 64 | expect(ScaledSheet.create(input).test.test.test).toBe(scale(number)); 65 | }); 66 | 67 | test('No special annotation should leave the number intact', () => { 68 | const number = getRandomInt(); 69 | const input = { test: number }; 70 | expect(ScaledSheet.create(input).test).toBe(number); 71 | }); 72 | 73 | test('ScaledSheet should map a complete StyleSheet with special annotations', () => { 74 | const input = { 75 | container: { 76 | width: '30@s', 77 | height: '50@vs', 78 | margin: { 79 | width: 12, 80 | height: '12@s', 81 | paddingTop: '6.3@mvs', 82 | paddingBottom: -1 83 | } 84 | }, 85 | row: { 86 | paddingLeft: '10@ms0.3', 87 | paddingBottom: '10@mvs0.4', 88 | height: '34@ms', 89 | marginRight: '0.5@ms0.9', 90 | marginLeft: '-0.5@ms0.9', 91 | marginBottom: '0.532@ms0.9', 92 | marginTop: '-10@s', 93 | }, 94 | round: { 95 | top: '11.3@sr', 96 | bottom: '22.75@vsr', 97 | left: '35.1@msr', 98 | right: '-20.19@ms0.3r', 99 | height: '-14.13@mvs0.4r' 100 | } 101 | }; 102 | 103 | const expectedOutput = { 104 | container: { 105 | width: scale(30), 106 | height: verticalScale(50), 107 | margin: { 108 | width: 12, 109 | height: scale(12), 110 | paddingTop: moderateVerticalScale(6.3), 111 | paddingBottom: -1 112 | } 113 | }, 114 | row: { 115 | paddingLeft: moderateScale(10, 0.3), 116 | paddingBottom: moderateVerticalScale(10, 0.4), 117 | height: moderateScale(34), 118 | marginRight: moderateScale(0.5, 0.9), 119 | marginLeft: moderateScale(-0.5, 0.9), 120 | marginBottom: moderateScale(0.532, 0.9), 121 | marginTop: scale(-10), 122 | }, 123 | round: { 124 | top: Math.round(scale(11.3)), 125 | bottom: Math.round(verticalScale(22.75)), 126 | left: Math.round(moderateScale(35.1)), 127 | right: Math.round(moderateScale(-20.19, 0.3)), 128 | height: Math.round(moderateVerticalScale(-14.13, 0.4)) 129 | } 130 | }; 131 | 132 | expect(JSON.stringify(ScaledSheet.create(input))).toBe(JSON.stringify(expectedOutput)); 133 | }); 134 | }); 135 | -------------------------------------------------------------------------------- /__tests__/deep-map.spec.js: -------------------------------------------------------------------------------- 1 | import deepMap from '../lib/deep-map'; 2 | 3 | const add3 = x => x + 3; 4 | 5 | describe('deep-map', () => { 6 | test('returns value if it\'s not an object or array', () => { 7 | expect(deepMap(5, add3)).toBe(5); 8 | expect(deepMap(true, add3)).toBe(true); 9 | expect(deepMap(null, add3)).toBe(null); 10 | expect(deepMap(undefined, add3)).toBe(undefined); 11 | expect(deepMap('string', add3)).toBe('string'); 12 | }); 13 | 14 | test('maps non-nested object', () => { 15 | expect(JSON.stringify(deepMap({ a: 5 }, add3))).toBe(JSON.stringify({ a: 8 })); 16 | }); 17 | 18 | test('maps nested object', () => { 19 | const input = { a: { b: { d: 1, e: 2 }, c: 3, f: { g: 4 } } }; 20 | const expectedOutput = { a: { b: { d: 1 + 3, e: 2 + 3 }, c: 3 + 3, f: { g: 4 + 3 } } }; 21 | 22 | expect(JSON.stringify(deepMap(input, add3))).toBe(JSON.stringify(expectedOutput)); 23 | }); 24 | 25 | test('maps array', () => { 26 | const input = [1, 2, 3, 4]; 27 | const expectedOutput = [4, 5, 6, 7]; 28 | 29 | expect(JSON.stringify(deepMap(input, add3))).toBe(JSON.stringify(expectedOutput)); 30 | }); 31 | 32 | test('maps object within array', () => { 33 | const input = [1, 2, 3, { a: 10 }]; 34 | const expectedOutput = [4, 5, 6, { a: 13 }]; 35 | 36 | expect(JSON.stringify(deepMap(input, add3))).toBe(JSON.stringify(expectedOutput)); 37 | }); 38 | 39 | test('maps array within object', () => { 40 | const input = { a: [1, 2, 3] }; 41 | const expectedOutput = { a: [4, 5, 6] }; 42 | 43 | expect(JSON.stringify(deepMap(input, add3))).toBe(JSON.stringify(expectedOutput)); 44 | }); 45 | }); -------------------------------------------------------------------------------- /__tests__/scaling-utils-alias.spec.js: -------------------------------------------------------------------------------- 1 | jest.mock('react-native'); 2 | import { s, vs, ms, mvs } from '..'; 3 | 4 | describe('scaling-utils', () => { 5 | test('scale returns the expected result based on mocked Dimensions', () => { 6 | expect(s(2.5)).toBe(5); 7 | expect(s(100)).toBe(200); 8 | expect(s(200)).toBe(400); 9 | }); 10 | 11 | test('verticalScale returns the expected result based on mocked Dimensions', () => { 12 | expect(vs(5)).toBe(7.5); 13 | expect(vs(100)).toBe(150); 14 | expect(vs(200)).toBe(300); 15 | }); 16 | 17 | test('moderateScale returns the expected result based on mocked Dimensions', () => { 18 | expect(ms(100)).toBe(150); 19 | expect(ms(100, 0.1)).toBe(110); 20 | expect(ms(100, 0.3)).toBe(130); 21 | expect(ms(100, 0.6)).toBe(160); 22 | expect(ms(100, 0.9)).toBe(190); 23 | expect(ms(100, 2)).toBe(300); 24 | }); 25 | 26 | test('moderateVerticalScale returns the expected result based on mocked Dimensions', () => { 27 | expect(mvs(100)).toBe(125); 28 | expect(mvs(100, 0.1)).toBe(105); 29 | expect(mvs(100, 0.3)).toBe(115); 30 | expect(mvs(100, 0.6)).toBe(130); 31 | expect(mvs(100, 0.9)).toBe(145); 32 | expect(mvs(100, 2)).toBe(200); 33 | }); 34 | }); -------------------------------------------------------------------------------- /__tests__/scaling-utils.extend.spec.js: -------------------------------------------------------------------------------- 1 | jest.mock('react-native'); 2 | jest.mock('@env'); 3 | import { scale, verticalScale, moderateScale, moderateVerticalScale } from '../extend'; 4 | 5 | describe('scaling-utils when guideline sizes are set using react-native-dotenv', () => { 6 | test('scale returns the expected result based on mocked Dimensions and mocked guideline sizes', () => { 7 | expect(Math.floor(scale(2.5))).toBe(3); 8 | expect(Math.floor(scale(100))).toBe(133); 9 | expect(Math.floor(scale(200))).toBe(266); 10 | }); 11 | 12 | test('verticalScale returns the expected result based on mocked Dimensions and mocked guideline sizes', () => { 13 | expect(Math.floor(verticalScale(5))).toBe(5); 14 | expect(Math.floor(verticalScale(100))).toBe(100); 15 | expect(Math.floor(verticalScale(200))).toBe(200); 16 | }); 17 | 18 | test('moderateScale returns the expected result based on mocked Dimensions and mocked guideline sizes', () => { 19 | expect(Math.floor(moderateScale(100))).toBe(116); 20 | expect(Math.floor(moderateScale(100, 0.1))).toBe(103); 21 | expect(Math.floor(moderateScale(100, 0.3))).toBe(110); 22 | expect(Math.floor(moderateScale(100, 0.6))).toBe(119); 23 | expect(Math.floor(moderateScale(100, 0.9))).toBe(129); 24 | expect(Math.floor(moderateScale(100, 2))).toBe(166); 25 | }); 26 | 27 | test('moderateVerticalScale returns the expected result based on mocked Dimensions and mocked guideline sizes', () => { 28 | expect(Math.floor(moderateVerticalScale(100))).toBe(100); 29 | expect(Math.floor(moderateVerticalScale(100, 0.1))).toBe(100); 30 | expect(Math.floor(moderateVerticalScale(100, 0.3))).toBe(100); 31 | expect(Math.floor(moderateVerticalScale(100, 0.6))).toBe(100); 32 | expect(Math.floor(moderateVerticalScale(100, 0.9))).toBe(100); 33 | expect(Math.floor(moderateVerticalScale(100, 2))).toBe(100); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /__tests__/scaling-utils.spec.js: -------------------------------------------------------------------------------- 1 | jest.mock('react-native'); 2 | import { scale, verticalScale, moderateScale, moderateVerticalScale } from '..'; 3 | 4 | describe('scaling-utils', () => { 5 | test('scale returns the expected result based on mocked Dimensions', () => { 6 | expect(scale(2.5)).toBe(5); 7 | expect(scale(100)).toBe(200); 8 | expect(scale(200)).toBe(400); 9 | }); 10 | 11 | test('verticalScale returns the expected result based on mocked Dimensions', () => { 12 | expect(verticalScale(5)).toBe(7.5); 13 | expect(verticalScale(100)).toBe(150); 14 | expect(verticalScale(200)).toBe(300); 15 | }); 16 | 17 | test('moderateScale returns the expected result based on mocked Dimensions', () => { 18 | expect(moderateScale(100)).toBe(150); 19 | expect(moderateScale(100, 0.1)).toBe(110); 20 | expect(moderateScale(100, 0.3)).toBe(130); 21 | expect(moderateScale(100, 0.6)).toBe(160); 22 | expect(moderateScale(100, 0.9)).toBe(190); 23 | expect(moderateScale(100, 2)).toBe(300); 24 | }); 25 | 26 | test('moderateVerticalScale returns the expected result based on mocked Dimensions', () => { 27 | expect(moderateVerticalScale(100)).toBe(125); 28 | expect(moderateVerticalScale(100, 0.1)).toBe(105); 29 | expect(moderateVerticalScale(100, 0.3)).toBe(115); 30 | expect(moderateVerticalScale(100, 0.6)).toBe(130); 31 | expect(moderateVerticalScale(100, 0.9)).toBe(145); 32 | expect(moderateVerticalScale(100, 2)).toBe(200); 33 | }); 34 | }); -------------------------------------------------------------------------------- /examples/BlogPost/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } -------------------------------------------------------------------------------- /examples/BlogPost/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.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 45 | -------------------------------------------------------------------------------- /examples/BlogPost/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /examples/BlogPost/.gitignore: -------------------------------------------------------------------------------- 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 55 | -------------------------------------------------------------------------------- /examples/BlogPost/README.md: -------------------------------------------------------------------------------- 1 |

Size Matters

2 |

How I used React Native to make my app look great on every device

3 | 4 | 5 | Have you ever had your designer hand you a cool design for your React Native app that you developed on, say, an iPhone 7 - and when you try to run it on a tablet, 6 | it looks like it was left in the dryer for too long? 7 |
8 | That's probably because the design was created using pixels whereas all dimensions in React Native are unitless, 9 | represented by “dp” (density-independent pixels). Simply put - the bigger your device is, the more dp it'll have. 10 |
11 | When working with React Native, the iPhone 7 has **375dp** width and **667dp** height and a Galaxy Tab A 8.0" Tablet (the one I'm using) has **768dp** width and **1024dp** height. 12 |
13 | So while a `` will cover most of your iPhone's screen, 14 | it will cover less than half of your tablet's screen. 15 | 16 |

So how can I make my app beautiful on the tablet as well?

17 | Glad you asked. On this blog post I'll show several methods for scaling your components to different screen sizes, and which one I found to work best. 18 |
19 | To do this, I created a small example app, and after every scaling method I'll attach the code along with screenshots for both a tablet and an iPhone. 20 | 21 |

How it looks without scaling

22 | 23 | So this is the component: 24 | ```javascript 25 | import React from 'react'; 26 | import { View, Text, Dimensions, StyleSheet, TouchableOpacity } from 'react-native'; 27 | import { loremIpsum } from './contants'; 28 | const { width, height } = Dimensions.get('window'); 29 | 30 | const AwesomeComponent = () => 31 | 32 | 33 | Awesome Blog Post Page 34 | {loremIpsum} 35 | 36 | 37 | Accept 38 | 39 | 40 | Decline 41 | 42 | 43 | 44 | ; 45 | 46 | export default AwesomeComponent; 47 | ``` 48 | 49 | And this is the StyleSheet: 50 | ```javascript 51 | const styles = StyleSheet.create({ 52 | container: { 53 | width: width, 54 | height: height, 55 | backgroundColor: '#E0E0E0', 56 | alignItems: 'center', 57 | justifyContent: 'center', 58 | }, 59 | box: { 60 | width: 300, 61 | height: 450, 62 | backgroundColor: 'white', 63 | borderRadius: 10, 64 | padding: 10, 65 | shadowColor: 'black', 66 | shadowOpacity: 0.5, 67 | shadowRadius: 3, 68 | shadowOffset: { 69 | height: 0, 70 | width: 0 71 | }, 72 | elevation: 2 73 | }, 74 | title: { 75 | fontSize: 20, 76 | fontWeight: 'bold', 77 | marginBottom: 10, 78 | color: 'black' 79 | }, 80 | text: { 81 | fontSize: 14, 82 | color: 'black' 83 | }, 84 | buttonsContainer: { 85 | flex: 1, 86 | justifyContent: 'flex-end', 87 | alignItems: 'center' 88 | }, 89 | button: { 90 | width: 150, 91 | height: 45, 92 | borderRadius: 100, 93 | marginBottom: 10, 94 | backgroundColor: '#41B6E6', 95 | alignItems: 'center', 96 | justifyContent: 'center', 97 | }, 98 | buttonText: { 99 | fontWeight: 'bold', 100 | fontSize: 14, 101 | color: 'white' 102 | } 103 | }); 104 | ``` 105 | 106 | As you can see, all my StyleSheet sizes are in dp units and no scaling was done. 107 | It will end up looking like this (obviously, I'm not a designer): 108 | 109 |
110 | 111 | 112 |
113 | 114 |
That's definitely not how we want our component to look like on a tablet (did I say dryer already?). 115 | 116 |

Method 1: Flex

117 | 118 | If you're not familiar with flex I urge you to read about it online. 119 | For starters check this [flex playground](https://codepen.io/enxaneta/full/adLPwv) 120 | or read about it on the [RN Docs](https://facebook.github.io/react-native/docs/flexbox.html). 121 |

122 | When developing a scalable component with flex you need to convert your View's size **and its margins** with 123 | proportion to the parent component. If for example your container's width is 375 and your box's width is 300 - 124 | the box's width is 80% of the parent (300/375) and the margins are what left - 10% on the left and 10% on the right. 125 |
126 | Alternatively, you can keep your margins static (represented by dp) and spread it across the available space using `flex: 1`. 127 |

128 | Here's an example of how I *flexed* my component. I only flexed the white box and skipped flexing the buttons because I'm lazy, 129 | but you get the point (StyleSheet stayed the same except `width` and `height` were removed from `box` and `container`): 130 | 131 | ```javascript 132 | const FlexExample = () => 133 | 134 | 135 | 136 | 137 | 138 | Awesome Blog Post Page 139 | {loremIpsum} 140 | 141 | 142 | Accept 143 | 144 | 145 | Decline 146 | 147 | 148 | 149 | 150 | 151 | 152 | ; 153 | ``` 154 | 155 | And the result: 156 |
157 | 158 | 159 |
160 |
161 | 162 | Flex is your best friend when creating a scalable **layout**, especially when wanting to spread it across the entire width or height (i.e. a list item) 163 | or when dividing a component to different sections. It will keep the same proportions among different devices, even when changing orientation. 164 |

165 | While flex is an amazing tool for scaling, it's not always enough. 166 | With flex, some components won't scale easily and it’s limited to certain properties like width, height, margin and padding. 167 | Stuff like fontSize, lineHeight or SVG size can't be flexed. 168 | 169 | With that said, let’s continue to our second method. 170 | 171 | 172 | 173 |

Method 2: Viewport Units

174 | With this method you basically convert every number you'd like to scale in your StyleSheet to 175 | a percentage of the device's width or height. 176 | If your device's width is 375dp then 300dp will become `deviceWidth * 0.8` (since 300/375 = 0.8), 177 | and you can also do it with smaller numbers, for example `fontSize: 14` will become `fontSize: deviceWidth * 0.037`. 178 | A nice and straight-forward library that can simplify this method is [react-native-viewport-units](https://github.com/jmstout/react-native-viewport-units). 179 |

180 | This is the StyleSheet after *viewporting* stuff around (Irrelevant parts were removed, component is exactly the same as the first example): 181 | 182 | ```javascript 183 | import {vw, vh} from 'react-native-viewport-units'; 184 | 185 | const styles = StyleSheet.create({ 186 | container: { 187 | ... 188 | }, 189 | box: { 190 | width: 80 * vw, 191 | height: 67 * vh, 192 | padding: 2.6 * vw, 193 | ... 194 | }, 195 | title: { 196 | fontSize: 5.3 * vw, 197 | marginBottom: 2.6 * vw, 198 | fontWeight: 'bold', 199 | color: 'black' 200 | }, 201 | text: { 202 | fontSize: 3.6 * vw, 203 | color: 'black' 204 | }, 205 | buttonsContainer: { 206 | ... 207 | }, 208 | button: { 209 | width: 40 * vw, 210 | height: 10.7 * vw, 211 | borderRadius: 27 * vw, 212 | marginBottom: 2.6 * vw, 213 | ... 214 | }, 215 | buttonText: { 216 | fontWeight: 'bold', 217 | fontSize: 3.6 * vw, 218 | color: 'white' 219 | } 220 | }); 221 | ``` 222 | 223 | And of course, what you have all been waiting for... the result: 224 |
225 | 226 | 227 |
228 |
229 | 230 | _Note: You'll be able to achieve more or less the same result using the 231 | new [percentage support](https://github.com/facebook/react-native/commit/3f49e743bea730907066677c7cbfbb1260677d11) (RN 0.43 and up) 232 | or by multiplying everything with `PixelRatio.get()`._ 233 |

234 | Besides needing to do some calculation and having weird numbers around, pretty neat and easy, right? 235 | ...but still not perfect. What if you show your designer how it looks on the tablet and he thinks the buttons are too big and the box's width should be reduced. 236 | What can you do? If you reduce the viewports it will affect the iPhone as well.
237 | 238 | One option is to do something like HTML's `media-query` using [PixelRatio](https://facebook.github.io/react-native/docs/pixelratio.html). 239 | But as I said, I'm lazy and I don't want to write everything 2 or more times, what can I do? 240 | 241 | 242 |

Method 3: Scaling Utils

243 | Here at Soluto, we wrote these 3 simple functions that make our scaling so much easier: 244 | 245 | ```javascript 246 | import { Dimensions } from 'react-native'; 247 | const { width, height } = Dimensions.get('window'); 248 | 249 | //Guideline sizes are based on standard ~5" screen mobile device 250 | const guidelineBaseWidth = 350; 251 | const guidelineBaseHeight = 680; 252 | 253 | const scale = size => width / guidelineBaseWidth * size; 254 | const verticalScale = size => height / guidelineBaseHeight * size; 255 | const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor; 256 | 257 | export {scale, verticalScale, moderateScale}; 258 | ``` 259 | The purpose of these functions is to be able to take one design (from a standard mobile phone) and apply it to other display sizes.
260 | `scale` function is pretty straight forward and will return the same linear result as using viewport.
261 | `verticalScale` is like scale, but based on height instead of width, which can be useful.
262 | The real magic happens at `moderateScale`. The cool thing about it is that you can control the resize factor (default is 0.5).
263 | So if normal scale will increase your size by +2X, moderateScale will only increase it by +X.
264 | Or if the resize factor is 0.25, instead of increasing by +2X it will increase by +0.5X. 265 |

266 | If you want to scale a View with 300dp width, on the iPhone 7 you will get: 267 | - scale(300) = 320 268 | - moderateScale(300) = 310 269 | - moderateScale(300, 0.25) = 305 270 | 271 | On the Galaxy Tab Tablet: 272 | - scale(300) = 300 + 360 = 660 273 | - moderateScale(300) = 300 + 360/2 = 480 274 | - moderateScale(300, 0.25) = 300 + 360/4 = 390 275 | 276 | This allow us to write only once, keeping stuff roughly the same size across mobile phones without looking massive and bulky on tablets.
277 | Anyways, enough talking. Here are the results after applying scaling utils on the original dp sizes until your designer is pleased. 278 | 279 | StyleSheet: 280 | ```javascript 281 | import { scale, moderateScale, verticalScale} from './scaling'; 282 | 283 | const styles = StyleSheet.create({ 284 | ... 285 | box: { 286 | width: moderateScale(300), 287 | height: verticalScale(450), 288 | padding: scale(10), 289 | ... 290 | }, 291 | title: { 292 | fontSize: moderateScale(20, 0.4), 293 | marginBottom: scale(10), 294 | ... 295 | }, 296 | text: { 297 | fontSize: moderateScale(14), 298 | ... 299 | }, 300 | button: { 301 | width: moderateScale(150, 0.3), 302 | height: moderateScale(45, 0.3), 303 | marginBottom: moderateScale(10), 304 | ... 305 | }, 306 | buttonText: { 307 | fontSize: moderateScale(14), 308 | ... 309 | } 310 | }); 311 | ``` 312 | 313 | Result: 314 |
315 | 316 | 317 |
318 |
319 | As mentioned, the iPhone keeps its proportions and the tablet gets a nice, fitted feel. 320 | 321 | ------- 322 | 323 | To sum up, there are many different ways to scale your component, 324 | what I found to work best for me was creating the layout with flex when possible, and scaling all other 325 | parts like margins, buttons, texts and SVGs using the scaling utils.
326 | What I didn't cover is scaling images and handling orientation change. We'll keep that for a different post. 327 |
I hope you found this post useful. Scaling is super important, even if your app is not for tablets. Friends don't let friends skip scaling! 328 | 329 | -------------------------------------------------------------------------------- /examples/BlogPost/android/app/BUCK: -------------------------------------------------------------------------------- 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 | ) 67 | -------------------------------------------------------------------------------- /examples/BlogPost/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"], 59 | * 60 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"] 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | apply from: "../../node_modules/react-native/react.gradle" 69 | 70 | /** 71 | * Set this to true to create two separate APKs instead of one: 72 | * - An APK that only works on ARM devices 73 | * - An APK that only works on x86 devices 74 | * The advantage is the size of the APK is reduced by about 4MB. 75 | * Upload all the APKs to the Play Store and people will download 76 | * the correct one based on the CPU architecture of their device. 77 | */ 78 | def enableSeparateBuildPerCPUArchitecture = false 79 | 80 | /** 81 | * Run Proguard to shrink the Java bytecode in release builds. 82 | */ 83 | def enableProguardInReleaseBuilds = false 84 | 85 | android { 86 | compileSdkVersion 23 87 | buildToolsVersion "23.0.1" 88 | 89 | defaultConfig { 90 | applicationId "com.blogpost" 91 | minSdkVersion 16 92 | targetSdkVersion 22 93 | versionCode 1 94 | versionName "1.0" 95 | ndk { 96 | abiFilters "armeabi-v7a", "x86" 97 | } 98 | } 99 | splits { 100 | abi { 101 | reset() 102 | enable enableSeparateBuildPerCPUArchitecture 103 | universalApk false // If true, also generate a universal APK 104 | include "armeabi-v7a", "x86" 105 | } 106 | } 107 | buildTypes { 108 | release { 109 | minifyEnabled enableProguardInReleaseBuilds 110 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 111 | } 112 | } 113 | // applicationVariants are e.g. debug, release 114 | applicationVariants.all { variant -> 115 | variant.outputs.each { output -> 116 | // For each separate APK per architecture, set a unique version code as described here: 117 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 118 | def versionCodes = ["armeabi-v7a":1, "x86":2] 119 | def abi = output.getFilter(OutputFile.ABI) 120 | if (abi != null) { // null for the universal-debug, universal-release variants 121 | output.versionCodeOverride = 122 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 123 | } 124 | } 125 | } 126 | } 127 | 128 | dependencies { 129 | compile fileTree(dir: "libs", include: ["*.jar"]) 130 | compile "com.android.support:appcompat-v7:23.0.1" 131 | compile "com.facebook.react:react-native:+" // From node_modules 132 | } 133 | 134 | // Run this once to be able to run the application with BUCK 135 | // puts all compile dependencies into folder libs for BUCK to use 136 | task copyDownloadableDepsToLibs(type: Copy) { 137 | from configurations.compile 138 | into 'libs' 139 | } 140 | -------------------------------------------------------------------------------- /examples/BlogPost/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /examples/BlogPost/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/BlogPost/android/app/src/main/java/com/blogpost/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.blogpost; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "BlogPost"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/BlogPost/android/app/src/main/java/com/blogpost/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.blogpost; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.shell.MainReactPackage; 11 | import com.facebook.soloader.SoLoader; 12 | 13 | import java.util.Arrays; 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 19 | @Override 20 | public boolean getUseDeveloperSupport() { 21 | return BuildConfig.DEBUG; 22 | } 23 | 24 | @Override 25 | protected List getPackages() { 26 | return Arrays.asList( 27 | new MainReactPackage() 28 | ); 29 | } 30 | }; 31 | 32 | @Override 33 | public ReactNativeHost getReactNativeHost() { 34 | return mReactNativeHost; 35 | } 36 | 37 | @Override 38 | public void onCreate() { 39 | super.onCreate(); 40 | SoLoader.init(this, /* native exopackage */ false); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/BlogPost/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/BlogPost/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/BlogPost/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/BlogPost/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/BlogPost/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | BlogPost 3 | 4 | -------------------------------------------------------------------------------- /examples/BlogPost/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/BlogPost/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/BlogPost/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /examples/BlogPost/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /examples/BlogPost/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip 6 | -------------------------------------------------------------------------------- /examples/BlogPost/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /examples/BlogPost/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /examples/BlogPost/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /examples/BlogPost/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /examples/BlogPost/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'BlogPost' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /examples/BlogPost/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "BlogPost", 3 | "displayName": "BlogPost" 4 | } -------------------------------------------------------------------------------- /examples/BlogPost/images/iphone1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/images/iphone1.png -------------------------------------------------------------------------------- /examples/BlogPost/images/iphoneflex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/images/iphoneflex.png -------------------------------------------------------------------------------- /examples/BlogPost/images/iphonescaling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/images/iphonescaling.png -------------------------------------------------------------------------------- /examples/BlogPost/images/iphoneviewport.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/images/iphoneviewport.png -------------------------------------------------------------------------------- /examples/BlogPost/images/meme.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/images/meme.jpg -------------------------------------------------------------------------------- /examples/BlogPost/images/tablet1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/images/tablet1.png -------------------------------------------------------------------------------- /examples/BlogPost/images/tabletflex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/images/tabletflex.png -------------------------------------------------------------------------------- /examples/BlogPost/images/tabletscaling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/images/tabletscaling.png -------------------------------------------------------------------------------- /examples/BlogPost/images/tabletviewport.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirsky/react-native-size-matters/68c63b021c7e9abcb3e2e5442eb2414f02e6223d/examples/BlogPost/images/tabletviewport.png -------------------------------------------------------------------------------- /examples/BlogPost/index.android.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry } from 'react-native'; 3 | import App from './pages/App'; 4 | 5 | const BlogPost = () => ; 6 | export default BlogPost; 7 | 8 | AppRegistry.registerComponent('BlogPost', () => BlogPost); 9 | -------------------------------------------------------------------------------- /examples/BlogPost/index.ios.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { AppRegistry } from 'react-native'; 3 | import App from './pages/App'; 4 | 5 | const BlogPost = () => ; 6 | export default BlogPost; 7 | 8 | AppRegistry.registerComponent('BlogPost', () => BlogPost); 9 | -------------------------------------------------------------------------------- /examples/BlogPost/ios/BlogPost.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 46; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; }; 11 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; }; 12 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; }; 13 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; }; 14 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; }; 15 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; }; 16 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; }; 17 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; }; 18 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; }; 19 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; }; 20 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 21 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 22 | 146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; 23 | 5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; }; 24 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; }; 25 | /* End PBXBuildFile section */ 26 | 27 | /* Begin PBXContainerItemProxy section */ 28 | 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = { 29 | isa = PBXContainerItemProxy; 30 | containerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 31 | proxyType = 2; 32 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 33 | remoteInfo = RCTActionSheet; 34 | }; 35 | 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = { 36 | isa = PBXContainerItemProxy; 37 | containerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 38 | proxyType = 2; 39 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 40 | remoteInfo = RCTGeolocation; 41 | }; 42 | 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = { 43 | isa = PBXContainerItemProxy; 44 | containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 45 | proxyType = 2; 46 | remoteGlobalIDString = 58B5115D1A9E6B3D00147676; 47 | remoteInfo = RCTImage; 48 | }; 49 | 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */ = { 50 | isa = PBXContainerItemProxy; 51 | containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 52 | proxyType = 2; 53 | remoteGlobalIDString = 58B511DB1A9E6C8500147676; 54 | remoteInfo = RCTNetwork; 55 | }; 56 | 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */ = { 57 | isa = PBXContainerItemProxy; 58 | containerPortal = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 59 | proxyType = 2; 60 | remoteGlobalIDString = 832C81801AAF6DEF007FA2F7; 61 | remoteInfo = RCTVibration; 62 | }; 63 | 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */ = { 64 | isa = PBXContainerItemProxy; 65 | containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 66 | proxyType = 2; 67 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 68 | remoteInfo = RCTSettings; 69 | }; 70 | 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */ = { 71 | isa = PBXContainerItemProxy; 72 | containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 73 | proxyType = 2; 74 | remoteGlobalIDString = 3C86DF461ADF2C930047B81A; 75 | remoteInfo = RCTWebSocket; 76 | }; 77 | 146834031AC3E56700842450 /* PBXContainerItemProxy */ = { 78 | isa = PBXContainerItemProxy; 79 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 80 | proxyType = 2; 81 | remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192; 82 | remoteInfo = React; 83 | }; 84 | 3DAD3E831DF850E9000B6D8A /* PBXContainerItemProxy */ = { 85 | isa = PBXContainerItemProxy; 86 | containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 87 | proxyType = 2; 88 | remoteGlobalIDString = 2D2A283A1D9B042B00D4039D; 89 | remoteInfo = "RCTImage-tvOS"; 90 | }; 91 | 3DAD3E871DF850E9000B6D8A /* PBXContainerItemProxy */ = { 92 | isa = PBXContainerItemProxy; 93 | containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 94 | proxyType = 2; 95 | remoteGlobalIDString = 2D2A28471D9B043800D4039D; 96 | remoteInfo = "RCTLinking-tvOS"; 97 | }; 98 | 3DAD3E8B1DF850E9000B6D8A /* PBXContainerItemProxy */ = { 99 | isa = PBXContainerItemProxy; 100 | containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 101 | proxyType = 2; 102 | remoteGlobalIDString = 2D2A28541D9B044C00D4039D; 103 | remoteInfo = "RCTNetwork-tvOS"; 104 | }; 105 | 3DAD3E8F1DF850E9000B6D8A /* PBXContainerItemProxy */ = { 106 | isa = PBXContainerItemProxy; 107 | containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 108 | proxyType = 2; 109 | remoteGlobalIDString = 2D2A28611D9B046600D4039D; 110 | remoteInfo = "RCTSettings-tvOS"; 111 | }; 112 | 3DAD3E931DF850E9000B6D8A /* PBXContainerItemProxy */ = { 113 | isa = PBXContainerItemProxy; 114 | containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 115 | proxyType = 2; 116 | remoteGlobalIDString = 2D2A287B1D9B048500D4039D; 117 | remoteInfo = "RCTText-tvOS"; 118 | }; 119 | 3DAD3E981DF850E9000B6D8A /* PBXContainerItemProxy */ = { 120 | isa = PBXContainerItemProxy; 121 | containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 122 | proxyType = 2; 123 | remoteGlobalIDString = 2D2A28881D9B049200D4039D; 124 | remoteInfo = "RCTWebSocket-tvOS"; 125 | }; 126 | 3DAD3EA21DF850E9000B6D8A /* PBXContainerItemProxy */ = { 127 | isa = PBXContainerItemProxy; 128 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 129 | proxyType = 2; 130 | remoteGlobalIDString = 2D2A28131D9B038B00D4039D; 131 | remoteInfo = "React-tvOS"; 132 | }; 133 | 3DAD3EA41DF850E9000B6D8A /* PBXContainerItemProxy */ = { 134 | isa = PBXContainerItemProxy; 135 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 136 | proxyType = 2; 137 | remoteGlobalIDString = 3D3C059A1DE3340900C268FA; 138 | remoteInfo = yoga; 139 | }; 140 | 3DAD3EA61DF850E9000B6D8A /* PBXContainerItemProxy */ = { 141 | isa = PBXContainerItemProxy; 142 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 143 | proxyType = 2; 144 | remoteGlobalIDString = 3D3C06751DE3340C00C268FA; 145 | remoteInfo = "yoga-tvOS"; 146 | }; 147 | 3DAD3EA81DF850E9000B6D8A /* PBXContainerItemProxy */ = { 148 | isa = PBXContainerItemProxy; 149 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 150 | proxyType = 2; 151 | remoteGlobalIDString = 3D3CD9251DE5FBEC00167DC4; 152 | remoteInfo = cxxreact; 153 | }; 154 | 3DAD3EAA1DF850E9000B6D8A /* PBXContainerItemProxy */ = { 155 | isa = PBXContainerItemProxy; 156 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 157 | proxyType = 2; 158 | remoteGlobalIDString = 3D3CD9321DE5FBEE00167DC4; 159 | remoteInfo = "cxxreact-tvOS"; 160 | }; 161 | 3DAD3EAC1DF850E9000B6D8A /* PBXContainerItemProxy */ = { 162 | isa = PBXContainerItemProxy; 163 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 164 | proxyType = 2; 165 | remoteGlobalIDString = 3D3CD90B1DE5FBD600167DC4; 166 | remoteInfo = jschelpers; 167 | }; 168 | 3DAD3EAE1DF850E9000B6D8A /* PBXContainerItemProxy */ = { 169 | isa = PBXContainerItemProxy; 170 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 171 | proxyType = 2; 172 | remoteGlobalIDString = 3D3CD9181DE5FBD800167DC4; 173 | remoteInfo = "jschelpers-tvOS"; 174 | }; 175 | 5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = { 176 | isa = PBXContainerItemProxy; 177 | containerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */; 178 | proxyType = 2; 179 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 180 | remoteInfo = RCTAnimation; 181 | }; 182 | 5E9157341DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = { 183 | isa = PBXContainerItemProxy; 184 | containerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */; 185 | proxyType = 2; 186 | remoteGlobalIDString = 2D2A28201D9B03D100D4039D; 187 | remoteInfo = "RCTAnimation-tvOS"; 188 | }; 189 | 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = { 190 | isa = PBXContainerItemProxy; 191 | containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 192 | proxyType = 2; 193 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 194 | remoteInfo = RCTLinking; 195 | }; 196 | 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = { 197 | isa = PBXContainerItemProxy; 198 | containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 199 | proxyType = 2; 200 | remoteGlobalIDString = 58B5119B1A9E6C1200147676; 201 | remoteInfo = RCTText; 202 | }; 203 | /* End PBXContainerItemProxy section */ 204 | 205 | /* Begin PBXFileReference section */ 206 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = ""; }; 207 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = ""; }; 208 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = ""; }; 209 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = ""; }; 210 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = ""; }; 211 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = ""; }; 212 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = ""; }; 213 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = ""; }; 214 | 13B07F961A680F5B00A75B9A /* BlogPost.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = BlogPost.app; sourceTree = BUILT_PRODUCTS_DIR; }; 215 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = BlogPost/AppDelegate.h; sourceTree = ""; }; 216 | 13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = BlogPost/AppDelegate.m; sourceTree = ""; }; 217 | 13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = ""; }; 218 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = BlogPost/Images.xcassets; sourceTree = ""; }; 219 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = BlogPost/Info.plist; sourceTree = ""; }; 220 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = BlogPost/main.m; sourceTree = ""; }; 221 | 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; 222 | 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = ""; }; 223 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = ""; }; 224 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = ""; }; 225 | /* End PBXFileReference section */ 226 | 227 | /* Begin PBXFrameworksBuildPhase section */ 228 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 229 | isa = PBXFrameworksBuildPhase; 230 | buildActionMask = 2147483647; 231 | files = ( 232 | 146834051AC3E58100842450 /* libReact.a in Frameworks */, 233 | 5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */, 234 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */, 235 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */, 236 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */, 237 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */, 238 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */, 239 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */, 240 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */, 241 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */, 242 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */, 243 | ); 244 | runOnlyForDeploymentPostprocessing = 0; 245 | }; 246 | /* End PBXFrameworksBuildPhase section */ 247 | 248 | /* Begin PBXGroup section */ 249 | 00C302A81ABCB8CE00DB3ED1 /* Products */ = { 250 | isa = PBXGroup; 251 | children = ( 252 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */, 253 | ); 254 | name = Products; 255 | sourceTree = ""; 256 | }; 257 | 00C302B61ABCB90400DB3ED1 /* Products */ = { 258 | isa = PBXGroup; 259 | children = ( 260 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */, 261 | ); 262 | name = Products; 263 | sourceTree = ""; 264 | }; 265 | 00C302BC1ABCB91800DB3ED1 /* Products */ = { 266 | isa = PBXGroup; 267 | children = ( 268 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */, 269 | 3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */, 270 | ); 271 | name = Products; 272 | sourceTree = ""; 273 | }; 274 | 00C302D41ABCB9D200DB3ED1 /* Products */ = { 275 | isa = PBXGroup; 276 | children = ( 277 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */, 278 | 3DAD3E8C1DF850E9000B6D8A /* libRCTNetwork-tvOS.a */, 279 | ); 280 | name = Products; 281 | sourceTree = ""; 282 | }; 283 | 00C302E01ABCB9EE00DB3ED1 /* Products */ = { 284 | isa = PBXGroup; 285 | children = ( 286 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */, 287 | ); 288 | name = Products; 289 | sourceTree = ""; 290 | }; 291 | 139105B71AF99BAD00B5F7CC /* Products */ = { 292 | isa = PBXGroup; 293 | children = ( 294 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */, 295 | 3DAD3E901DF850E9000B6D8A /* libRCTSettings-tvOS.a */, 296 | ); 297 | name = Products; 298 | sourceTree = ""; 299 | }; 300 | 139FDEE71B06529A00C62182 /* Products */ = { 301 | isa = PBXGroup; 302 | children = ( 303 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */, 304 | 3DAD3E991DF850E9000B6D8A /* libRCTWebSocket-tvOS.a */, 305 | ); 306 | name = Products; 307 | sourceTree = ""; 308 | }; 309 | 13B07FAE1A68108700A75B9A /* BlogPost */ = { 310 | isa = PBXGroup; 311 | children = ( 312 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */, 313 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 314 | 13B07FB01A68108700A75B9A /* AppDelegate.m */, 315 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 316 | 13B07FB61A68108700A75B9A /* Info.plist */, 317 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */, 318 | 13B07FB71A68108700A75B9A /* main.m */, 319 | ); 320 | name = BlogPost; 321 | sourceTree = ""; 322 | }; 323 | 146834001AC3E56700842450 /* Products */ = { 324 | isa = PBXGroup; 325 | children = ( 326 | 146834041AC3E56700842450 /* libReact.a */, 327 | 3DAD3EA31DF850E9000B6D8A /* libReact.a */, 328 | 3DAD3EA51DF850E9000B6D8A /* libyoga.a */, 329 | 3DAD3EA71DF850E9000B6D8A /* libyoga.a */, 330 | 3DAD3EA91DF850E9000B6D8A /* libcxxreact.a */, 331 | 3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */, 332 | 3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */, 333 | 3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */, 334 | ); 335 | name = Products; 336 | sourceTree = ""; 337 | }; 338 | 5E91572E1DD0AC6500FF2AA8 /* Products */ = { 339 | isa = PBXGroup; 340 | children = ( 341 | 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */, 342 | 5E9157351DD0AC6500FF2AA8 /* libRCTAnimation-tvOS.a */, 343 | ); 344 | name = Products; 345 | sourceTree = ""; 346 | }; 347 | 78C398B11ACF4ADC00677621 /* Products */ = { 348 | isa = PBXGroup; 349 | children = ( 350 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */, 351 | 3DAD3E881DF850E9000B6D8A /* libRCTLinking-tvOS.a */, 352 | ); 353 | name = Products; 354 | sourceTree = ""; 355 | }; 356 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 357 | isa = PBXGroup; 358 | children = ( 359 | 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */, 360 | 146833FF1AC3E56700842450 /* React.xcodeproj */, 361 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */, 362 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */, 363 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */, 364 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */, 365 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */, 366 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */, 367 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */, 368 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */, 369 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */, 370 | ); 371 | name = Libraries; 372 | sourceTree = ""; 373 | }; 374 | 832341B11AAA6A8300B99B32 /* Products */ = { 375 | isa = PBXGroup; 376 | children = ( 377 | 832341B51AAA6A8300B99B32 /* libRCTText.a */, 378 | 3DAD3E941DF850E9000B6D8A /* libRCTText-tvOS.a */, 379 | ); 380 | name = Products; 381 | sourceTree = ""; 382 | }; 383 | 83CBB9F61A601CBA00E9B192 = { 384 | isa = PBXGroup; 385 | children = ( 386 | 13B07FAE1A68108700A75B9A /* BlogPost */, 387 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 388 | 83CBBA001A601CBA00E9B192 /* Products */, 389 | ); 390 | indentWidth = 2; 391 | sourceTree = ""; 392 | tabWidth = 2; 393 | }; 394 | 83CBBA001A601CBA00E9B192 /* Products */ = { 395 | isa = PBXGroup; 396 | children = ( 397 | 13B07F961A680F5B00A75B9A /* BlogPost.app */, 398 | ); 399 | name = Products; 400 | sourceTree = ""; 401 | }; 402 | /* End PBXGroup section */ 403 | 404 | /* Begin PBXNativeTarget section */ 405 | 13B07F861A680F5B00A75B9A /* BlogPost */ = { 406 | isa = PBXNativeTarget; 407 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "BlogPost" */; 408 | buildPhases = ( 409 | 13B07F871A680F5B00A75B9A /* Sources */, 410 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 411 | 13B07F8E1A680F5B00A75B9A /* Resources */, 412 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 413 | ); 414 | buildRules = ( 415 | ); 416 | dependencies = ( 417 | ); 418 | name = BlogPost; 419 | productName = "Hello World"; 420 | productReference = 13B07F961A680F5B00A75B9A /* BlogPost.app */; 421 | productType = "com.apple.product-type.application"; 422 | }; 423 | /* End PBXNativeTarget section */ 424 | 425 | /* Begin PBXProject section */ 426 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 427 | isa = PBXProject; 428 | attributes = { 429 | LastUpgradeCheck = 0610; 430 | ORGANIZATIONNAME = Facebook; 431 | TargetAttributes = { 432 | 13B07F861A680F5B00A75B9A = { 433 | ProvisioningStyle = Manual; 434 | }; 435 | }; 436 | }; 437 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "BlogPost" */; 438 | compatibilityVersion = "Xcode 3.2"; 439 | developmentRegion = English; 440 | hasScannedForEncodings = 0; 441 | knownRegions = ( 442 | en, 443 | Base, 444 | ); 445 | mainGroup = 83CBB9F61A601CBA00E9B192; 446 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 447 | projectDirPath = ""; 448 | projectReferences = ( 449 | { 450 | ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */; 451 | ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 452 | }, 453 | { 454 | ProductGroup = 5E91572E1DD0AC6500FF2AA8 /* Products */; 455 | ProjectRef = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */; 456 | }, 457 | { 458 | ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */; 459 | ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 460 | }, 461 | { 462 | ProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */; 463 | ProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 464 | }, 465 | { 466 | ProductGroup = 78C398B11ACF4ADC00677621 /* Products */; 467 | ProjectRef = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 468 | }, 469 | { 470 | ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */; 471 | ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 472 | }, 473 | { 474 | ProductGroup = 139105B71AF99BAD00B5F7CC /* Products */; 475 | ProjectRef = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 476 | }, 477 | { 478 | ProductGroup = 832341B11AAA6A8300B99B32 /* Products */; 479 | ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 480 | }, 481 | { 482 | ProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */; 483 | ProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 484 | }, 485 | { 486 | ProductGroup = 139FDEE71B06529A00C62182 /* Products */; 487 | ProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 488 | }, 489 | { 490 | ProductGroup = 146834001AC3E56700842450 /* Products */; 491 | ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */; 492 | }, 493 | ); 494 | projectRoot = ""; 495 | targets = ( 496 | 13B07F861A680F5B00A75B9A /* BlogPost */, 497 | ); 498 | }; 499 | /* End PBXProject section */ 500 | 501 | /* Begin PBXReferenceProxy section */ 502 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = { 503 | isa = PBXReferenceProxy; 504 | fileType = archive.ar; 505 | path = libRCTActionSheet.a; 506 | remoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */; 507 | sourceTree = BUILT_PRODUCTS_DIR; 508 | }; 509 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = { 510 | isa = PBXReferenceProxy; 511 | fileType = archive.ar; 512 | path = libRCTGeolocation.a; 513 | remoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */; 514 | sourceTree = BUILT_PRODUCTS_DIR; 515 | }; 516 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = { 517 | isa = PBXReferenceProxy; 518 | fileType = archive.ar; 519 | path = libRCTImage.a; 520 | remoteRef = 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */; 521 | sourceTree = BUILT_PRODUCTS_DIR; 522 | }; 523 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */ = { 524 | isa = PBXReferenceProxy; 525 | fileType = archive.ar; 526 | path = libRCTNetwork.a; 527 | remoteRef = 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */; 528 | sourceTree = BUILT_PRODUCTS_DIR; 529 | }; 530 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */ = { 531 | isa = PBXReferenceProxy; 532 | fileType = archive.ar; 533 | path = libRCTVibration.a; 534 | remoteRef = 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */; 535 | sourceTree = BUILT_PRODUCTS_DIR; 536 | }; 537 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */ = { 538 | isa = PBXReferenceProxy; 539 | fileType = archive.ar; 540 | path = libRCTSettings.a; 541 | remoteRef = 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */; 542 | sourceTree = BUILT_PRODUCTS_DIR; 543 | }; 544 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */ = { 545 | isa = PBXReferenceProxy; 546 | fileType = archive.ar; 547 | path = libRCTWebSocket.a; 548 | remoteRef = 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */; 549 | sourceTree = BUILT_PRODUCTS_DIR; 550 | }; 551 | 146834041AC3E56700842450 /* libReact.a */ = { 552 | isa = PBXReferenceProxy; 553 | fileType = archive.ar; 554 | path = libReact.a; 555 | remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */; 556 | sourceTree = BUILT_PRODUCTS_DIR; 557 | }; 558 | 3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */ = { 559 | isa = PBXReferenceProxy; 560 | fileType = archive.ar; 561 | path = "libRCTImage-tvOS.a"; 562 | remoteRef = 3DAD3E831DF850E9000B6D8A /* PBXContainerItemProxy */; 563 | sourceTree = BUILT_PRODUCTS_DIR; 564 | }; 565 | 3DAD3E881DF850E9000B6D8A /* libRCTLinking-tvOS.a */ = { 566 | isa = PBXReferenceProxy; 567 | fileType = archive.ar; 568 | path = "libRCTLinking-tvOS.a"; 569 | remoteRef = 3DAD3E871DF850E9000B6D8A /* PBXContainerItemProxy */; 570 | sourceTree = BUILT_PRODUCTS_DIR; 571 | }; 572 | 3DAD3E8C1DF850E9000B6D8A /* libRCTNetwork-tvOS.a */ = { 573 | isa = PBXReferenceProxy; 574 | fileType = archive.ar; 575 | path = "libRCTNetwork-tvOS.a"; 576 | remoteRef = 3DAD3E8B1DF850E9000B6D8A /* PBXContainerItemProxy */; 577 | sourceTree = BUILT_PRODUCTS_DIR; 578 | }; 579 | 3DAD3E901DF850E9000B6D8A /* libRCTSettings-tvOS.a */ = { 580 | isa = PBXReferenceProxy; 581 | fileType = archive.ar; 582 | path = "libRCTSettings-tvOS.a"; 583 | remoteRef = 3DAD3E8F1DF850E9000B6D8A /* PBXContainerItemProxy */; 584 | sourceTree = BUILT_PRODUCTS_DIR; 585 | }; 586 | 3DAD3E941DF850E9000B6D8A /* libRCTText-tvOS.a */ = { 587 | isa = PBXReferenceProxy; 588 | fileType = archive.ar; 589 | path = "libRCTText-tvOS.a"; 590 | remoteRef = 3DAD3E931DF850E9000B6D8A /* PBXContainerItemProxy */; 591 | sourceTree = BUILT_PRODUCTS_DIR; 592 | }; 593 | 3DAD3E991DF850E9000B6D8A /* libRCTWebSocket-tvOS.a */ = { 594 | isa = PBXReferenceProxy; 595 | fileType = archive.ar; 596 | path = "libRCTWebSocket-tvOS.a"; 597 | remoteRef = 3DAD3E981DF850E9000B6D8A /* PBXContainerItemProxy */; 598 | sourceTree = BUILT_PRODUCTS_DIR; 599 | }; 600 | 3DAD3EA31DF850E9000B6D8A /* libReact.a */ = { 601 | isa = PBXReferenceProxy; 602 | fileType = archive.ar; 603 | path = libReact.a; 604 | remoteRef = 3DAD3EA21DF850E9000B6D8A /* PBXContainerItemProxy */; 605 | sourceTree = BUILT_PRODUCTS_DIR; 606 | }; 607 | 3DAD3EA51DF850E9000B6D8A /* libyoga.a */ = { 608 | isa = PBXReferenceProxy; 609 | fileType = archive.ar; 610 | path = libyoga.a; 611 | remoteRef = 3DAD3EA41DF850E9000B6D8A /* PBXContainerItemProxy */; 612 | sourceTree = BUILT_PRODUCTS_DIR; 613 | }; 614 | 3DAD3EA71DF850E9000B6D8A /* libyoga.a */ = { 615 | isa = PBXReferenceProxy; 616 | fileType = archive.ar; 617 | path = libyoga.a; 618 | remoteRef = 3DAD3EA61DF850E9000B6D8A /* PBXContainerItemProxy */; 619 | sourceTree = BUILT_PRODUCTS_DIR; 620 | }; 621 | 3DAD3EA91DF850E9000B6D8A /* libcxxreact.a */ = { 622 | isa = PBXReferenceProxy; 623 | fileType = archive.ar; 624 | path = libcxxreact.a; 625 | remoteRef = 3DAD3EA81DF850E9000B6D8A /* PBXContainerItemProxy */; 626 | sourceTree = BUILT_PRODUCTS_DIR; 627 | }; 628 | 3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */ = { 629 | isa = PBXReferenceProxy; 630 | fileType = archive.ar; 631 | path = libcxxreact.a; 632 | remoteRef = 3DAD3EAA1DF850E9000B6D8A /* PBXContainerItemProxy */; 633 | sourceTree = BUILT_PRODUCTS_DIR; 634 | }; 635 | 3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */ = { 636 | isa = PBXReferenceProxy; 637 | fileType = archive.ar; 638 | path = libjschelpers.a; 639 | remoteRef = 3DAD3EAC1DF850E9000B6D8A /* PBXContainerItemProxy */; 640 | sourceTree = BUILT_PRODUCTS_DIR; 641 | }; 642 | 3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */ = { 643 | isa = PBXReferenceProxy; 644 | fileType = archive.ar; 645 | path = libjschelpers.a; 646 | remoteRef = 3DAD3EAE1DF850E9000B6D8A /* PBXContainerItemProxy */; 647 | sourceTree = BUILT_PRODUCTS_DIR; 648 | }; 649 | 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */ = { 650 | isa = PBXReferenceProxy; 651 | fileType = archive.ar; 652 | path = libRCTAnimation.a; 653 | remoteRef = 5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */; 654 | sourceTree = BUILT_PRODUCTS_DIR; 655 | }; 656 | 5E9157351DD0AC6500FF2AA8 /* libRCTAnimation-tvOS.a */ = { 657 | isa = PBXReferenceProxy; 658 | fileType = archive.ar; 659 | path = "libRCTAnimation-tvOS.a"; 660 | remoteRef = 5E9157341DD0AC6500FF2AA8 /* PBXContainerItemProxy */; 661 | sourceTree = BUILT_PRODUCTS_DIR; 662 | }; 663 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = { 664 | isa = PBXReferenceProxy; 665 | fileType = archive.ar; 666 | path = libRCTLinking.a; 667 | remoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */; 668 | sourceTree = BUILT_PRODUCTS_DIR; 669 | }; 670 | 832341B51AAA6A8300B99B32 /* libRCTText.a */ = { 671 | isa = PBXReferenceProxy; 672 | fileType = archive.ar; 673 | path = libRCTText.a; 674 | remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */; 675 | sourceTree = BUILT_PRODUCTS_DIR; 676 | }; 677 | /* End PBXReferenceProxy section */ 678 | 679 | /* Begin PBXResourcesBuildPhase section */ 680 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 681 | isa = PBXResourcesBuildPhase; 682 | buildActionMask = 2147483647; 683 | files = ( 684 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 685 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */, 686 | ); 687 | runOnlyForDeploymentPostprocessing = 0; 688 | }; 689 | /* End PBXResourcesBuildPhase section */ 690 | 691 | /* Begin PBXShellScriptBuildPhase section */ 692 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 693 | isa = PBXShellScriptBuildPhase; 694 | buildActionMask = 2147483647; 695 | files = ( 696 | ); 697 | inputPaths = ( 698 | ); 699 | name = "Bundle React Native code and images"; 700 | outputPaths = ( 701 | ); 702 | runOnlyForDeploymentPostprocessing = 0; 703 | shellPath = /bin/sh; 704 | shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh"; 705 | }; 706 | /* End PBXShellScriptBuildPhase section */ 707 | 708 | /* Begin PBXSourcesBuildPhase section */ 709 | 13B07F871A680F5B00A75B9A /* Sources */ = { 710 | isa = PBXSourcesBuildPhase; 711 | buildActionMask = 2147483647; 712 | files = ( 713 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */, 714 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 715 | ); 716 | runOnlyForDeploymentPostprocessing = 0; 717 | }; 718 | /* End PBXSourcesBuildPhase section */ 719 | 720 | /* Begin PBXVariantGroup section */ 721 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = { 722 | isa = PBXVariantGroup; 723 | children = ( 724 | 13B07FB21A68108700A75B9A /* Base */, 725 | ); 726 | name = LaunchScreen.xib; 727 | path = BlogPost; 728 | sourceTree = ""; 729 | }; 730 | /* End PBXVariantGroup section */ 731 | 732 | /* Begin XCBuildConfiguration section */ 733 | 13B07F941A680F5B00A75B9A /* Debug */ = { 734 | isa = XCBuildConfiguration; 735 | buildSettings = { 736 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 737 | CURRENT_PROJECT_VERSION = 1; 738 | DEAD_CODE_STRIPPING = NO; 739 | DEVELOPMENT_TEAM = ""; 740 | INFOPLIST_FILE = BlogPost/Info.plist; 741 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 742 | OTHER_LDFLAGS = ( 743 | "$(inherited)", 744 | "-ObjC", 745 | "-lc++", 746 | ); 747 | PRODUCT_BUNDLE_IDENTIFIER = "react-native-scaling-example"; 748 | PRODUCT_NAME = BlogPost; 749 | VERSIONING_SYSTEM = "apple-generic"; 750 | }; 751 | name = Debug; 752 | }; 753 | 13B07F951A680F5B00A75B9A /* Release */ = { 754 | isa = XCBuildConfiguration; 755 | buildSettings = { 756 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 757 | CURRENT_PROJECT_VERSION = 1; 758 | DEVELOPMENT_TEAM = ""; 759 | INFOPLIST_FILE = BlogPost/Info.plist; 760 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 761 | OTHER_LDFLAGS = ( 762 | "$(inherited)", 763 | "-ObjC", 764 | "-lc++", 765 | ); 766 | PRODUCT_BUNDLE_IDENTIFIER = "react-native-scaling-example"; 767 | PRODUCT_NAME = BlogPost; 768 | VERSIONING_SYSTEM = "apple-generic"; 769 | }; 770 | name = Release; 771 | }; 772 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 773 | isa = XCBuildConfiguration; 774 | buildSettings = { 775 | ALWAYS_SEARCH_USER_PATHS = NO; 776 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 777 | CLANG_CXX_LIBRARY = "libc++"; 778 | CLANG_ENABLE_MODULES = YES; 779 | CLANG_ENABLE_OBJC_ARC = YES; 780 | CLANG_WARN_BOOL_CONVERSION = YES; 781 | CLANG_WARN_CONSTANT_CONVERSION = YES; 782 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 783 | CLANG_WARN_EMPTY_BODY = YES; 784 | CLANG_WARN_ENUM_CONVERSION = YES; 785 | CLANG_WARN_INT_CONVERSION = YES; 786 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 787 | CLANG_WARN_UNREACHABLE_CODE = YES; 788 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 789 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 790 | COPY_PHASE_STRIP = NO; 791 | ENABLE_STRICT_OBJC_MSGSEND = YES; 792 | GCC_C_LANGUAGE_STANDARD = gnu99; 793 | GCC_DYNAMIC_NO_PIC = NO; 794 | GCC_OPTIMIZATION_LEVEL = 0; 795 | GCC_PREPROCESSOR_DEFINITIONS = ( 796 | "DEBUG=1", 797 | "$(inherited)", 798 | ); 799 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 800 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 801 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 802 | GCC_WARN_UNDECLARED_SELECTOR = YES; 803 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 804 | GCC_WARN_UNUSED_FUNCTION = YES; 805 | GCC_WARN_UNUSED_VARIABLE = YES; 806 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 807 | MTL_ENABLE_DEBUG_INFO = YES; 808 | ONLY_ACTIVE_ARCH = YES; 809 | SDKROOT = iphoneos; 810 | }; 811 | name = Debug; 812 | }; 813 | 83CBBA211A601CBA00E9B192 /* Release */ = { 814 | isa = XCBuildConfiguration; 815 | buildSettings = { 816 | ALWAYS_SEARCH_USER_PATHS = NO; 817 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 818 | CLANG_CXX_LIBRARY = "libc++"; 819 | CLANG_ENABLE_MODULES = YES; 820 | CLANG_ENABLE_OBJC_ARC = YES; 821 | CLANG_WARN_BOOL_CONVERSION = YES; 822 | CLANG_WARN_CONSTANT_CONVERSION = YES; 823 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 824 | CLANG_WARN_EMPTY_BODY = YES; 825 | CLANG_WARN_ENUM_CONVERSION = YES; 826 | CLANG_WARN_INT_CONVERSION = YES; 827 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 828 | CLANG_WARN_UNREACHABLE_CODE = YES; 829 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 830 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 831 | COPY_PHASE_STRIP = YES; 832 | ENABLE_NS_ASSERTIONS = NO; 833 | ENABLE_STRICT_OBJC_MSGSEND = YES; 834 | GCC_C_LANGUAGE_STANDARD = gnu99; 835 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 836 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 837 | GCC_WARN_UNDECLARED_SELECTOR = YES; 838 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 839 | GCC_WARN_UNUSED_FUNCTION = YES; 840 | GCC_WARN_UNUSED_VARIABLE = YES; 841 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 842 | MTL_ENABLE_DEBUG_INFO = NO; 843 | SDKROOT = iphoneos; 844 | VALIDATE_PRODUCT = YES; 845 | }; 846 | name = Release; 847 | }; 848 | /* End XCBuildConfiguration section */ 849 | 850 | /* Begin XCConfigurationList section */ 851 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "BlogPost" */ = { 852 | isa = XCConfigurationList; 853 | buildConfigurations = ( 854 | 13B07F941A680F5B00A75B9A /* Debug */, 855 | 13B07F951A680F5B00A75B9A /* Release */, 856 | ); 857 | defaultConfigurationIsVisible = 0; 858 | defaultConfigurationName = Release; 859 | }; 860 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "BlogPost" */ = { 861 | isa = XCConfigurationList; 862 | buildConfigurations = ( 863 | 83CBBA201A601CBA00E9B192 /* Debug */, 864 | 83CBBA211A601CBA00E9B192 /* Release */, 865 | ); 866 | defaultConfigurationIsVisible = 0; 867 | defaultConfigurationName = Release; 868 | }; 869 | /* End XCConfigurationList section */ 870 | }; 871 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 872 | } 873 | -------------------------------------------------------------------------------- /examples/BlogPost/ios/BlogPost.xcodeproj/xcshareddata/xcschemes/BlogPost-tvOS.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /examples/BlogPost/ios/BlogPost.xcodeproj/xcshareddata/xcschemes/BlogPost.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 60 | 61 | 67 | 68 | 69 | 70 | 71 | 72 | 82 | 84 | 90 | 91 | 92 | 93 | 94 | 95 | 101 | 103 | 109 | 110 | 111 | 112 | 114 | 115 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /examples/BlogPost/ios/BlogPost/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /examples/BlogPost/ios/BlogPost/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import 13 | #import 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"BlogPost" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /examples/BlogPost/ios/BlogPost/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/BlogPost/ios/BlogPost/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /examples/BlogPost/ios/BlogPost/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | react-native-scaling-example 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /examples/BlogPost/ios/BlogPost/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/BlogPost/package.json: -------------------------------------------------------------------------------- 1 | { 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-size-matters": "0.1.0", 13 | "react-native-viewport-units": "0.0.5" 14 | }, 15 | "devDependencies": { 16 | "babel-jest": "19.0.0", 17 | "babel-preset-react-native": "1.9.1", 18 | "jest": "19.0.0", 19 | "react-test-renderer": "15.4.2" 20 | }, 21 | "jest": { 22 | "preset": "react-native" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/BlogPost/pages/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Example from './Example'; 3 | import FlexExample from './FlexExample'; 4 | import ViewPortExample from './ViewPortExample'; 5 | import ScalingExample from './ScalingExample'; 6 | 7 | const App = () => ; 8 | 9 | export default App; -------------------------------------------------------------------------------- /examples/BlogPost/pages/Example.js: -------------------------------------------------------------------------------- 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 Example = () => 7 | 8 | 9 | Awesome Blog Post Page 10 | {loremIpsum} 11 | 12 | 13 | Accept 14 | 15 | 16 | Decline 17 | 18 | 19 | 20 | ; 21 | 22 | export default Example; 23 | 24 | const styles = StyleSheet.create({ 25 | container: { 26 | width: width, 27 | height: height, 28 | backgroundColor: '#E0E0E0', 29 | alignItems: 'center', 30 | justifyContent: 'center', 31 | }, 32 | box: { 33 | width: 300, 34 | height: 450, 35 | backgroundColor: 'white', 36 | borderRadius: 10, 37 | padding: 10, 38 | shadowColor: 'black', 39 | shadowOpacity: 0.5, 40 | shadowRadius: 3, 41 | shadowOffset: { 42 | height: 0, 43 | width: 0 44 | }, 45 | elevation: 2 46 | }, 47 | title: { 48 | fontSize: 20, 49 | fontWeight: 'bold', 50 | marginBottom: 10, 51 | color: 'black' 52 | }, 53 | text: { 54 | fontSize: 14, 55 | color: 'black' 56 | }, 57 | buttonsContainer: { 58 | flex: 1, 59 | justifyContent: 'flex-end', 60 | alignItems: 'center' 61 | }, 62 | button: { 63 | width: 150, 64 | height: 45, 65 | borderRadius: 100, 66 | marginBottom: 10, 67 | backgroundColor: '#41B6E6', 68 | alignItems: 'center', 69 | justifyContent: 'center', 70 | }, 71 | buttonText: { 72 | fontWeight: 'bold', 73 | fontSize: 14, 74 | color: 'white' 75 | } 76 | }); 77 | -------------------------------------------------------------------------------- /examples/BlogPost/pages/FlexExample.js: -------------------------------------------------------------------------------- 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 FlexExample = () => 7 | 8 | 9 | 10 | 11 | 12 | Awesome Blog Post Page 13 | {loremIpsum} 14 | 15 | 16 | Accept 17 | 18 | 19 | Decline 20 | 21 | 22 | 23 | 24 | 25 | 26 | ; 27 | 28 | export default FlexExample; 29 | 30 | const styles = StyleSheet.create({ 31 | container: { 32 | backgroundColor: '#E0E0E0', 33 | alignItems: 'center', 34 | justifyContent: 'center', 35 | }, 36 | box: { 37 | backgroundColor: 'white', 38 | borderRadius: 10, 39 | padding: 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: 20, 51 | fontWeight: 'bold', 52 | marginBottom: 10, 53 | color: 'black' 54 | }, 55 | text: { 56 | fontSize: 14, 57 | color: 'black' 58 | }, 59 | buttonsContainer: { 60 | flex: 1, 61 | justifyContent: 'flex-end', 62 | alignItems: 'center' 63 | }, 64 | button: { 65 | width: 150, 66 | height: 45, 67 | borderRadius: 100, 68 | marginBottom: 10, 69 | backgroundColor: '#41B6E6', 70 | alignItems: 'center', 71 | justifyContent: 'center', 72 | }, 73 | buttonText: { 74 | fontWeight: 'bold', 75 | fontSize: 14, 76 | color: 'white' 77 | } 78 | }); 79 | -------------------------------------------------------------------------------- /examples/BlogPost/pages/ScalingExample.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, Dimensions, StyleSheet, TouchableOpacity } from 'react-native'; 3 | import { scale, moderateScale, verticalScale } from 'react-native-size-matters'; 4 | import { loremIpsum } from './contants'; 5 | const { width, height } = Dimensions.get('window'); 6 | 7 | const ScalingExample = () => 8 | 9 | 10 | Awesome Blog Post Page 11 | {loremIpsum} 12 | 13 | 14 | Accept 15 | 16 | 17 | Decline 18 | 19 | 20 | 21 | ; 22 | 23 | const styles = StyleSheet.create({ 24 | container: { 25 | width: width, 26 | height: height, 27 | backgroundColor: '#E0E0E0', 28 | alignItems: 'center', 29 | justifyContent: 'center', 30 | }, 31 | box: { 32 | width: moderateScale(300), 33 | height: verticalScale(450), 34 | padding: scale(10), 35 | backgroundColor: 'white', 36 | borderRadius: 10, 37 | shadowColor: 'black', 38 | shadowOpacity: 0.5, 39 | shadowRadius: 3, 40 | shadowOffset: { 41 | height: 0, 42 | width: 0 43 | }, 44 | elevation: 2 45 | }, 46 | title: { 47 | fontSize: moderateScale(20, 0.4), 48 | fontWeight: 'bold', 49 | marginBottom: scale(10), 50 | color: 'black' 51 | }, 52 | text: { 53 | fontSize: moderateScale(14), 54 | color: 'black' 55 | }, 56 | buttonsContainer: { 57 | flex: 1, 58 | justifyContent: 'flex-end', 59 | alignItems: 'center' 60 | }, 61 | button: { 62 | width: moderateScale(150, 0.3), 63 | height: moderateScale(45, 0.3), 64 | borderRadius: 100, 65 | marginBottom: moderateScale(10, 0.6), 66 | backgroundColor: '#41B6E6', 67 | alignItems: 'center', 68 | justifyContent: 'center', 69 | }, 70 | buttonText: { 71 | fontWeight: 'bold', 72 | fontSize: moderateScale(14), 73 | color: 'white' 74 | } 75 | }); 76 | 77 | export default ScalingExample; -------------------------------------------------------------------------------- /examples/BlogPost/pages/ViewPortExample.js: -------------------------------------------------------------------------------- 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 | 8 | 9 | Awesome Blog Post Page 10 | {loremIpsum} 11 | 12 | 13 | Accept 14 | 15 | 16 | Decline 17 | 18 | 19 | 20 | ; 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: '#E0E0E0', 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: '#41B6E6', 70 | alignItems: 'center', 71 | justifyContent: 'center', 72 | }, 73 | buttonText: { 74 | fontWeight: 'bold', 75 | fontSize: 3.6 * vw, 76 | color: 'white' 77 | } 78 | }); 79 | -------------------------------------------------------------------------------- /examples/BlogPost/pages/contants.js: -------------------------------------------------------------------------------- 1 | export const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | You can clone the [expo-example-app](./expo-example-app) from this repo. 4 | After cloning, run `npm install`, then `npm start` and scan the presented QR code in the [Expo app](https://expo.io) on your preferred device. 5 | 6 | The app has an on/off switch for using `react-native-size-matters`, so you can test yourself how the app will look with and without scaling. 7 | It is expected to look good on every device you want - iOS or Android, phone or tablet, basically anything (please let me know if isn't). 8 | 9 | There are also some attached [screenshots](./expo-example-app#screenshots) in the repo if you don't feel like cloning. 10 | 11 |
12 | 13 | ### [Blog Post](./BlogPost) 14 | ### [Expo Example App](./expo-example-app) -------------------------------------------------------------------------------- /examples/change-guideline-sizes.md: -------------------------------------------------------------------------------- 1 | # Changing the Default Guideline Sizes 2 | 3 | In the ever-changing mobile devices world, screen sizes change a lot. 4 | This lib uses 350dp x 680dp as guideline sizes, but if you (or your designer) prefer using different sizes it's possible. 5 | 6 | To do so, first, you'd need to setup [babel-plugin-dotenv-import](https://github.com/tusbar/babel-plugin-dotenv-import). 7 | After setting it up and creating `.env` file, add the following env params to it: 8 | ```env 9 | SIZE_MATTERS_BASE_WIDTH= 10 | SIZE_MATTERS_BASE_HEIGHT= 11 | ``` 12 | Next and final step, you should change all your imports to `react-native-size-matters/extend`, for instance: 13 | ```javascript 14 | import { ScaledSheet, moderateScale } from 'react-native-size-matters/extend'; 15 | ``` 16 | -------------------------------------------------------------------------------- /examples/expo-example-app/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore templates for 'react-native init' 6 | .*/local-cli/templates/.* 7 | 8 | ; Ignore the website subdir 9 | /node_modules/react-native/website/.* 10 | 11 | ; Ignore the Dangerfile 12 | /node_modules/react-native/danger/dangerfile.js 13 | 14 | ; Ignore "BUCK" generated dirs 15 | /node_modules/react-native/\.buckd/ 16 | 17 | ; Ignore unexpected extra "@providesModule" 18 | .*/node_modules/.*/node_modules/fbjs/.* 19 | .*/node_modules/fbemitter/.* 20 | 21 | ; Ignore duplicate module providers 22 | ; For RN Apps installed via npm, "Libraries" folder is inside 23 | ; "node_modules/react-native" but in the source repo it is in the root 24 | .*/Libraries/react-native/React.js 25 | 26 | ; Ignore polyfills 27 | .*/Libraries/polyfills/.* 28 | 29 | ; Ignore misbehaving dev-dependencies 30 | .*/node_modules/reqwest/.* 31 | .*/node_modules/xdl/.* 32 | 33 | ; Ignore expo dependencies 34 | 35 | ; Ignore Expo SDK + some of it's dependencies temporarily: 36 | ; https://github.com/expo/expo/issues/162 37 | .*/node_modules/expo/src/.* 38 | .*/node_modules/react-native-gesture-handler/.* 39 | 40 | [include] 41 | 42 | [libs] 43 | node_modules/react-native/Libraries/react-native/react-native-interface.js 44 | node_modules/react-native/flow/ 45 | node_modules/expo/flow/ 46 | 47 | [options] 48 | emoji=true 49 | 50 | module.system=haste 51 | 52 | munge_underscores=true 53 | 54 | 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' 55 | 56 | suppress_type=$FlowIssue 57 | suppress_type=$FlowFixMe 58 | suppress_type=$FlowFixMeProps 59 | suppress_type=$FlowFixMeState 60 | suppress_type=$FixMe 61 | 62 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\) 63 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+ 64 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 65 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 66 | 67 | unsafe.enable_getters_and_setters=true 68 | 69 | [version] 70 | ^0.53.0 71 | -------------------------------------------------------------------------------- /examples/expo-example-app/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | npm-debug.* 4 | -------------------------------------------------------------------------------- /examples/expo-example-app/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /examples/expo-example-app/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import HomeScreen from "./components/Home"; 3 | import FeedPage from "./components/Feed"; 4 | import ChatPage from "./components/Chat"; 5 | import { NavigationContainer } from "@react-navigation/native"; 6 | import { createNativeStackNavigator } from "@react-navigation/native-stack"; 7 | import { StatusBar } from "expo-status-bar"; 8 | 9 | const NativeStack = createNativeStackNavigator(); 10 | 11 | export default function App() { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /examples/expo-example-app/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app). 2 | 3 | ## Available Scripts 4 | 5 | Download [Expo app](https://expo.io) on your phone, clone this repo, cd to examples/expo-example-app and install dependencies with `npm install`. 6 | 7 | ### `npm start` 8 | 9 | Runs the app in development mode. 10 | Open it in the [Expo app](https://expo.io) on your phone to view it. It will reload if you save edits to your files, and you will see build errors and logs in the terminal. 11 | 12 | #### `npm run ios` 13 | 14 | Like `npm start`, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed. 15 | 16 | #### `npm run android` 17 | 18 | Like `npm start`, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html) for detailed setup). 19 | 20 | 21 | ## Screenshots 22 | 23 | The app has 3 scenes, each scene has a switch to enable/disable the usage of `react-native-size-matters`. 24 | Below are attached screenshot of the different scenes on different device, with the switch both on and off. 25 | These are just examples, the scaling will work on any device and any OS. 26 | 27 | ### iPhone 6 28 | 29 |

30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |

49 | 50 | ### iPhone X 51 | 52 |

53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |

72 | 73 | ### iPad Pro 12.9" 74 | 75 |

76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 |

95 | 96 | ## Side-by-Side Screenshots 97 | 98 | ### Without Size Matters 99 | | Screen | iPhone 6 | iPhone x | iPad Pro 12.9" | 100 | | --- | --- | --- | --- | 101 | | Feed | | | | 102 | | Chat | | | | 103 | 104 | ### With Size Matters 105 | | Screen | iPhone 6 | iPhone x | iPad Pro 12.9" | 106 | | --- | --- | --- | --- | 107 | | Feed | | | | 108 | | Chat | | | | 109 | -------------------------------------------------------------------------------- /examples/expo-example-app/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "Size Matters Example", 4 | "slug": "size-matters", 5 | "privacy": "public" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /examples/expo-example-app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /examples/expo-example-app/components/Chat.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, ScrollView, TextInput, Button, StyleSheet } from 'react-native'; 3 | import {ScaledSheet} from 'react-native-size-matters'; 4 | import withScaledSheetSwitch from './behaviors/withScaledSheetSwitch'; 5 | 6 | const scaledSheet = ScaledSheet.create({ 7 | container: { 8 | flex: 1, 9 | width: '100%', 10 | height: '100%' 11 | }, 12 | inputBox: { 13 | alignSelf: 'stretch', 14 | height: '45@ms', 15 | padding: '6@ms', 16 | flexDirection: 'row', 17 | }, 18 | textInput: { 19 | paddingHorizontal: '10@ms0.3', 20 | flex: 1, 21 | borderRadius: '25@ms', 22 | backgroundColor: 'white', 23 | borderWidth: 0.25, 24 | borderColor: '#545454' 25 | }, 26 | chatBox: { 27 | maxWidth: '270@s', 28 | margin: '5@s', 29 | borderRadius: '8@ms', 30 | padding: '10@ms' 31 | }, 32 | chatText: { 33 | fontSize: '15@ms0.3' 34 | } 35 | }); 36 | 37 | const regularSheet = StyleSheet.create({ 38 | container: { 39 | flex: 1, 40 | width: '100%', 41 | height: '100%' 42 | }, 43 | inputBox: { 44 | alignSelf: 'stretch', 45 | height: 45, 46 | padding:6, 47 | flexDirection: 'row', 48 | }, 49 | textInput: { 50 | paddingHorizontal: 10, 51 | flex: 1, 52 | borderRadius: 25, 53 | backgroundColor: 'white', 54 | borderWidth: 0.25, 55 | borderColor: '#545454' 56 | }, 57 | chatBox: { 58 | maxWidth: 270, 59 | margin: 5, 60 | borderRadius: 8, 61 | padding: 10 62 | }, 63 | chatText: { 64 | fontSize: 15 65 | } 66 | }); 67 | 68 | const data = [ 69 | { text: 'Hey', me: 1}, 70 | { text: 'what you doin?', me: 1}, 71 | { text: 'Eating lunch right now 🍜. What about you?', me: 0}, 72 | { text: 'nothing...', me: 1}, 73 | { text: 'Wanna do something tonight? my girlfriend is working and I\'m bored.', me: 1}, 74 | { text: 'Ummmm, I\'m only available after 9pm, sounds good?', me: 0}, 75 | { text: 'Yeah, I\'ll watch some Netflix before 📺', me: 1}, 76 | { text: 'ohhhh what are you watching??', me: 0}, 77 | { text: 'Stranger Things, season 2!', me: 1}, 78 | { text: 'Niceeee! 😍😍😍', me: 0}, 79 | { text: 'I just saw the last episode yesterday', me: 0}, 80 | { text: 'MIND = BLOWN', me: 0}, 81 | { text: 'LOL no spoilers!!! I\'m only at episode 3', me: 1}, 82 | { text: 'yeah yeah no worries!', me: 0}, 83 | { text: 'so see ya later!', me: 0}, 84 | { text: 'See ya!', me: 1}, 85 | { text: '👋', me: 1}, 86 | ]; 87 | 88 | const Chat = ({ scale }) => { 89 | const styles = scale ? scaledSheet : regularSheet; 90 | return 91 | 92 | 93 | {data.map((entry, i) => 97 | {entry.text} 98 | )} 99 | 100 | 101 | 102 | 103 |