Skip to content

๐Ÿ“ A React Native interceptor for StyleSheet to scale sizes based on screen dimensions.

License

Notifications You must be signed in to change notification settings

helderberto/react-native-scaled-sheet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

42 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ“ 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