https://github.com/benzhe/react-native-relative-units

https://github.com/benzhe/react-native-relative-units

Last synced: 6 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/benzhe/react-native-relative-units
• Owner: benzhe
• License: mit
• Created: 2015-09-09T07:20:55.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-11-23T08:20:44.000Z (over 8 years ago)
• Last Synced: 2024-11-14T21:51:54.089Z (7 months ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 10
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-relative-units ★9 - Relative units for React Native (Components / UI)
• awesome-react-native - react-native-relative-units ★9 - Relative units for React Native (Components / UI)
• awesome-react-native - react-native-relative-units ★9 - Relative units for React Native (Components / UI)
• awesome-react-native-ui - react-native-relative-units ★5 - Relative units for React Native (Components / UI)
• awesome-react-native - react-native-relative-units ★9 - Relative units for React Native (Components / UI)

README

        
# react-native-relative-units

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 

    }

});

```