Skip to content
πŸ“ A React Native interceptor for StyleSheet to scale sizes based in screen dimensions.
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
examples/ExpoExampleApp
src
.babelrc.js
.editorconfig
.eslintignore
.eslintrc.js
.gitattributes
.gitignore
.huskyrc
.npmignore
.prettierrc
CONTRIBUTING.md
LICENSE
README.md
package.json
yarn.lock

README.md

πŸ“ ScaledSheet
npm npm bundle size NPM

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

You can’t perform that action at this time.