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,
    borderRadius: 3 // 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)};