├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── viewport-units.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Jeff Stout
 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 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-native-viewport-units
 2 | Incredibly simple utility for (sort of) using viewport units with [React Native](https://github.com/facebook/react-native).
 3 | 
 4 | ## Install
 5 | ```sh
 6 | $ npm install react-native-viewport-units --save
 7 | ```
 8 | 
 9 | ## Usage
10 | ```javascript
11 | var {vw, vh, vmin, vmax} = require('react-native-viewport-units');
12 | ```
13 | 
14 | Notice the required operator/syntax: __x * vw__
15 | ```javascript
16 | <View style={{height:50*vh, width:50*vw}}/>
17 | ```
18 | 
19 | ```javascript
20 | var styles = StyleSheet.create({
21 |   lookingGood: {
22 |     width: 15*vmin,
23 |     height: 10*vmax,
24 |     padding: 2*vw,
25 |     margin: 4*vh,
26 |   }
27 | });
28 | ```
29 | 
30 | ## Roadmap
31 | I would like to add support for orientation changes and reflowing components that use viewport units. I am, however, waiting until something official lands. Keeping a close eye on [418](https://github.com/facebook/react-native/pull/418).
32 | 
33 | ## License
34 | MIT © [Jeff Stout](http://jmstout.com)


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-viewport-units",
 3 |   "version": "0.0.5",
 4 |   "description": "Incredibly simple utility for (sort of) using viewport units with React Native.",
 5 |   "license": "MIT",
 6 |   "repository": "jmstout/react-native-viewport-units",
 7 |   "author": {
 8 |     "name": "Jeff Stout",
 9 |     "url": "http://jmstout.com"
10 |   },
11 |   "main": "viewport-units.js",
12 |   "peerDependencies": {
13 |     "react-native": ">= 0.4.4 < 1.0"
14 |   },
15 |   "keywords": [ "react-component", "react-native", "react native", "react", "viewport", "units", "vw", "vh", "vmin", "vmax", "css", "style", "relative", "responsive", "ios" ]
16 | }
17 | 


--------------------------------------------------------------------------------
/viewport-units.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var React = require('react-native')
 4 |   , Dimensions = React.Dimensions || require('Dimensions')
 5 |   , {width, height} = Dimensions.get('window');
 6 | 
 7 | var units = {
 8 |   vw: width/100
 9 | , vh: height/100
10 | };
11 | 
12 | units.vmin = Math.min(units.vw, units.vh);
13 | units.vmax = Math.max(units.vw, units.vh);
14 | 
15 | module.exports = units;


--------------------------------------------------------------------------------