├── README.md ├── index.js └── package.json /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # react-native-units 4 | 5 | A collection of useful units and a simple grid implementation for responsive layouts in React Native. 6 | 7 | React Native uses *density-independent pixels*, or *dp*, as it's default unit. This will size elements so that they are roughly the same physical size on different devices. Whilst this is useful, I missed some of the units you have available in CSS. 8 | 9 | ## Setup 10 | Add the package from NPM. No `react-native-link` required. 11 | ``` 12 | yarn add react-native-units 13 | - or - 14 | npm install react-native-units 15 | ``` 16 | 17 | Import the library where you need it: 18 | ```javascript 19 | import RNU from 'react-native-units' 20 | ``` 21 | 22 | 23 | ## Units 24 | 25 | ### vw(x=1) 26 | % of the screen width, e.g. `RNU.vw(10)` is equal to `10%` of the screens width 27 | 28 | ### vh(x=1) 29 | % of the screen height, e.g. `RNU.vh(10)` is equal to `10%` of the screen height 30 | 31 | ### px(x=1) 32 | Physical pixels based on device pixel ratio, e.g. `RNU.px(1)` is equal to `1 pixel` on the device, handy for very thin lines! 33 | 34 | ### su(x=1) 35 | Scaled unit, similar to `rem` in CSS. You can set the scale using `RNU.setScale(scale)`. This is useful for scaling fonts and layouts depending on the device e.g. 36 | 37 | ```javascript 38 | if(iPad) RNU.setScale(0.75) // RNU.su(10) > 7.5dp 39 | if(iPhone5) RNU.setScale(1.5) // RNU.su(10) > 15dp 40 | ``` 41 | 42 | ## Grid 43 | 44 | A simple way to create grids. First set your parameters: 45 | 46 | ```javascript 47 | RNU.setGrid({ 48 | cols: 24, 49 | padding: 20, 50 | spacing: 10 51 | }) 52 | ``` 53 | Then use the `gr, gs & gp` units to create your layout. I have made a snack [here](https://snack.expo.io/@alexfoxy/react-native-units-grid-example) which will create the example below. 54 | ![enter image description here](https://i.imgur.com/FbC45qM.png) 55 | 56 | ### gr(x=1) 57 | This unit is equal to one column's width, however it will also include any spacing it encompasses. In this example, if `RNU.gr(1)` is equal to `12dp` then `RNU.gr(2)` will equal `34dp ((12*2)+10)` 58 | 59 | ### gs(x=1) 60 | The grid spacing. In this example `RNU.gs()` is equal to `10dp` 61 | 62 | ### gp(x=1) 63 | The grid padding. In this example `RNU.gp()` is equal to `20dp` 64 | 65 | 66 | ## Screen Rotation 67 | As this library depends on the screen width and height to calculate units, when the screen rotates you need to call `RNU.update()`. The easiest way is to add an `onLayout` to your main app component e.g. 68 | ```javascript 69 | { RNU.update() }> 70 | ... 71 | 72 | ``` 73 | 74 | 75 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { Dimensions, PixelRatio } from 'react-native' 2 | 3 | class Units { 4 | constructor() { 5 | this.scale = 1 6 | 7 | this.grid = { 8 | cols: 3, 9 | padding: 10, 10 | spacing: 10 11 | } 12 | 13 | this.update() 14 | } 15 | 16 | update = () => { 17 | this.window = Dimensions.get('window') 18 | this.pixelRatio = PixelRatio.get() 19 | this.setGrid() 20 | } 21 | 22 | setScale = (scale) => { 23 | this.scale = scale 24 | } 25 | 26 | setGrid = (o) => { 27 | this.grid = { 28 | ...this.grid, ...o 29 | } 30 | 31 | const w = this.window.width - (this.grid.padding*2) + this.grid.spacing 32 | this.grid.colWidth = (w/this.grid.cols) 33 | } 34 | 35 | px = (x=1) => { 36 | return x/this.pixelRatio 37 | } 38 | 39 | su = (x=1) => { 40 | return x*this.scale 41 | } 42 | 43 | vh = (x=1) => { 44 | return x*this.window.height*0.01 45 | } 46 | 47 | vw = (x=1) => { 48 | return x*this.window.width*0.01 49 | } 50 | 51 | gr = (x=1) => { 52 | return (x*this.grid.colWidth)-this.grid.spacing 53 | } 54 | 55 | gs = (x=1) => { 56 | return x*this.grid.spacing 57 | } 58 | 59 | gp = (x=1) => { 60 | return x*this.grid.padding 61 | } 62 | } 63 | 64 | const units = new Units() 65 | 66 | module.exports = units; 67 | 68 | ['vw', 'vh', 'px', 'su', 'gr', 'gs', 'gp', 'update', 'setScale', 'setGrid'].forEach(o => { 69 | module.exports[o] = units[o]; 70 | }) 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "index.js", 3 | "name": "react-native-units", 4 | "version": "1.0.0", 5 | "description": "A collection of useful units and a simple grid implementation for responsive layouts in React Native.", 6 | "license": "MIT", 7 | "author": "alexfoxy@gmail.com", 8 | "repository": { 9 | "type" : "git", 10 | "url" : "https://github.com/alexfoxy/react-native-units" 11 | }, 12 | "keywords": [ 13 | "react native", 14 | "units", 15 | "pixels", 16 | "grid", 17 | "scale", 18 | "javascript", 19 | "ios" 20 | ] 21 | } 22 | --------------------------------------------------------------------------------