react-native-scaled-sheet

📏 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

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:

Library	Rendering 5k Views	Rendering 10k Views
StyleSheet	2465ms	3185ms
ScaledSheet	2515ms	3383ms

See the test files in examples/ExpoExampleApp.

Contributing

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

License

MIT License © helderburato