react-native-style-scale

0.1.2 • Public • Published

react-native-style-scale

Replacement for React Native's StyleSheet that performs automatic scaling.

Main Feature:

  • Scale dimensions based on height ratio, width ratio or their average dependending on the style property.

How to use:

  • Make sure you develop or set your static sizes on a iPhone 5 or comparable size device so your app can scale upwards and beyond.

Installation instructions

$ yarn add react-native-style-scale

Example usage

 
import StyleSheet, { scale, shouldScale } from 'react-native-style-scale';
 
// Toggle scaling use this as soon as possible. Before calling your Stylesheet.create
shouldScale(false) // default set to true. Pass in either true of false to disable scaling across your application
 
export const styles = StyleSheet.create({
  view: {
    height: 50, // scaled automatically
    width: 100 // scaled automatically,
    borderRadius3 // scaled automatically
  },
  text: {
    fontSize: 18 // scaled automatically
  }
}, disableScale['fontSize', 'width']); // optional list of property names that ignore scaling
 
// util usage scaled automatically
const myInlineStyle = {width: scale(30), height: scale(30)};
 

Package Sidebar

Install

npm i react-native-style-scale

Weekly Downloads

0

Version

0.1.2

License

MIT

Unpacked Size

5.62 kB

Total Files

5

Last publish

Collaborators

  • jeffmendez