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:

| 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