react-native-relative-units

September 11, 2015 ยท View on GitHub

An simplest relative units module for react native. Design for scale pages in different devices, NOT FOR RESPONSIVE DESIGN.

Install

npm install react-native-relative-units --save

Using

var {bp, vw, vh} = require('react-native-relative-units')(/* Mockup page's width */);

Example

var {bp, vw, vh} = require('react-native-relative-units')(375);

var styles = StyleSheet.create({
    viewport: {
        width: 375 * bp,    // 100% device width, same as width: 100 * wh
        height: 100 * vh,   // 100% device height
        marginTop: 20 * bp, // 20/375 device width
        borderWidth: 1      //  bp is not recommend in border 
    }
});