React-native-scaled-sheet NPM

import ScaledSheet from 'react-native-scaled-sheet';

const styles = ScaledSheet.create({
  container: {
    height: 50, // => scaleSize(50)
    width: 50, // => scaleSize(50)
    fontSize: 14, // => scaleFont(14)
  },
});

Motivation

Scale Styles: Apply scales based on PixelRatio API to fonts and number values;
Intecept Styles: Intercept every styles and apply the new calculate one;

Usage

To get started using react-native-scaled-sheet, first install the package:

yarn add react-native-scaled-sheet or npm i react-native-scaled-sheet

import ScaledSheet from 'react-native';

ScaledSheet.setLineBaseWidth(500);

const styles = ScaledSheet.create({
  container: {
    height: 50,
    width: 50,
    fontSize: 14,
  },
});

import { StyleSheet } from 'react-native';
import { scaleSize, scaleFont } from 'react-native-scaled-sheet';

const styles = StyleSheet.create({
  container: {
    height: scaleSize(50),
    width: scaleSize(50),
    fontSize: scaleFont(14),
  },
});

BEFORE:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    height: 50,
    width: 50,
    fontSize: 14,
  },
});

AFTER:

import ScaledSheet from 'react-native-scaled-sheet';

const styles = ScaledSheet.create({
  container: {
    height: 50,
    width: 50,
    fontSize: 14,
  },
});

Note: It's easier just update the .create to use from ScaleSheet and that's it!

Benchmark

The performance tests below show the comparison between using the StyleSheet offered by the React Native API and using ScaledSheet rendering 5k and 10k views. See the results: