├── .babelrc ├── .gitignore ├── .npmignore ├── package.json ├── .yarn-metadata.json ├── index.ts └── README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "module:metro-react-native-babel-preset" 4 | ] 5 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | *.log 3 | npm-debug.log 4 | 5 | # Runtime data 6 | tmp 7 | build 8 | dist 9 | 10 | # Dependency directory 11 | node_modules 12 | # Logs 13 | *.log 14 | npm-debug.log 15 | 16 | # Dependency directory 17 | node_modules 18 | 19 | # Runtime data 20 | tmp -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | *.log 3 | npm-debug.log 4 | 5 | # Runtime data 6 | tmp 7 | build 8 | dist 9 | 10 | # Dependency directory 11 | node_modules 12 | # Logs 13 | *.log 14 | npm-debug.log 15 | 16 | # Dependency directory 17 | node_modules 18 | 19 | # Runtime data 20 | tmp -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-auto-responsive-screen", 3 | "version": "1.1.9", 4 | "description": "This dependency is used to make responsive appearance in accordance with the dimensions of the design", 5 | "main": "index.ts", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Pratama Setya Aji", 10 | "license": "ISC", 11 | "homepage": "https://github.com/UADACID/react-native-auto-responsive-screen/blob/master/README.md", 12 | "devDependencies": { 13 | "metro-react-native-babel-preset": "^0.59.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.yarn-metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest": { 3 | "name": "react-native-auto-responsive-screen", 4 | "version": "1.0.0", 5 | "description": "This dependency is used to make responsive appearance in accordance with the dimensions of the design", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": { 11 | "name": "Pratama Setya Aji" 12 | }, 13 | "license": "ISC", 14 | "devDependencies": { 15 | "metro-react-native-babel-preset": "^0.59.0" 16 | }, 17 | "_registry": "npm", 18 | "_loc": "/Users/macbookpro/Library/Caches/Yarn/v6/npm-react-native-auto-responsive-screen-1.0.0-c77a13f1-8a88-4655-b8af-21e598b3f302-1591960913234/node_modules/react-native-auto-responsive-screen/package.json" 19 | }, 20 | "artifacts": [], 21 | "remote": { 22 | "type": "copy", 23 | "registry": "npm", 24 | "hash": "c77a13f1-8a88-4655-b8af-21e598b3f302-1591960913234", 25 | "reference": "/usr/local/lib/node_modules/react-native-auto-responsive-screen" 26 | }, 27 | "registry": "npm", 28 | "hash": "c77a13f1-8a88-4655-b8af-21e598b3f302-1591960913234" 29 | } -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | import { Dimensions, Platform, PixelRatio } from 'react-native' 2 | const { width, height } = Dimensions.get('window') 3 | const SCREEN_WIDTH = width 4 | const SCREEN_HEIGHT = height 5 | 6 | class ResponsiveScreen { 7 | static wscale: number = 414 8 | static hscale: number = 852 9 | 10 | static init(width: number, height: number) { 11 | this.wscale = SCREEN_WIDTH / width 12 | this.hscale = SCREEN_HEIGHT / height 13 | } 14 | 15 | static normalize = (size: number, based: string) => { 16 | if (ResponsiveScreen.hscale && ResponsiveScreen.wscale) { 17 | const newSize = 18 | based === 'height' 19 | ? size * ResponsiveScreen.hscale 20 | : size * ResponsiveScreen.wscale 21 | if (Platform.OS === 'ios') { 22 | return Math.round(PixelRatio.roundToNearestPixel(newSize)) 23 | } else { 24 | return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2 25 | } 26 | } 27 | return size 28 | } 29 | 30 | static fontSize = (size: number, based: string) => { 31 | if (ResponsiveScreen.hscale && ResponsiveScreen.wscale) { 32 | const newSize = 33 | based === 'height' 34 | ? size * ResponsiveScreen.hscale 35 | : size * ResponsiveScreen.wscale 36 | if (Platform.OS === 'ios') { 37 | return Math.round(PixelRatio.roundToNearestPixel(newSize)) 38 | } else { 39 | return Math.round(PixelRatio.roundToNearestPixel(newSize)) 40 | } 41 | } 42 | return size 43 | } 44 | } 45 | 46 | export default ResponsiveScreen 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # react-native-auto-responsive-screen 3 | 4 | This dependency is used to make responsive appearance in accordance with the dimensions of the design. 5 | 6 | ### Installation 7 | 8 | ```sh 9 | $ cd project_name 10 | $ yarn add react-native-auto-responsive-screen 11 | ``` 12 | or 13 | ```sh 14 | $ cd project_name 15 | $ npm install react-native-auto-responsive-screen 16 | ``` 17 | ### before 18 | ![alt text](https://serving.photos.photobox.com/79744764dcccf702991bc4ffa5e81d3e30ea55a3f35065658b2a59a1b0f87f5383f519f8.jpg) 19 | 20 | ### after 21 | ![alt text](https://serving.photos.photobox.com/4185396168cceb1eb88c7473f4c7afd369799824b7389d7e555188b1e1f1816005a42c71.jpg) 22 | 23 | 24 | You need init first, this step is required 25 | 26 | ```js 27 | // file on root directory 28 | 29 | import ResponsiveScreen from 'react-native-auto-responsive-screen' 30 | 31 | /** 32 | * WIDTH AND HEIGHT BASE ON MOCKUP 33 | */ 34 | ResponsiveScreen.init(414, 852) 35 | 36 | const App = () => { 37 | ... 38 | }; 39 | ``` 40 | next step 41 | 42 | ```js 43 | // font example 44 | import ResponsiveScreen from 'react-native-auto-responsive-screen' 45 | 46 | dummy text 50 | ``` 51 | 52 | ```js 53 | // component example 54 | import ResponsiveScreen from 'react-native-auto-responsive-screen' 55 | 56 | 64 | ... 65 | 66 | 67 | ``` --------------------------------------------------------------------------------