Package Exports

react-native-scaled-sheet

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-scaled-sheet) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

📏 ScaledSheet

react-native-scaled-sheet is a package for React Native whose goal is to calculate scale of styles values as the easiest way.

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

Update the line base width:

import ScaledSheet from 'react-native';

ScaledSheet.setLineBaseWidth(500);

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

Scale styles in the StyleSheet:

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),
  },
});

Update existent styles to use the ScaleSheet:

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

In the following example you can see the performance test case:

Using ScaledSheet

console.group('ScaledSheet');
console.time();
const scaledStyles = ScaledSheet.create({
  container: {
    height: 50,
    width: 50,
    fontSize: 14,
  },
});
console.timeEnd();
console.groupEnd();
// => Output: ScaledSheet - default: 0.065185546875ms

Using StyleSheet

console.group('StyleSheet');
console.time();
const regularStyles = StyleSheet.create({
  container: {
    height: 50,
    width: 50,
    fontSize: 14,
  },
});
console.timeEnd();
console.groupEnd();
// => Output: StyleSheet - default: 0.031982421875ms

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

react-native-scaled-sheet