📏 A React Native interceptor for StyleSheet to scale sizes based on screen dimensions.
MIT License
import ScaledSheet from 'react-native-scaled-sheet';
const styles = ScaledSheet.create({
container: {
height: 50, // => scaleSize(50)
width: 50, // => scaleSize(50)
fontSize: 14, // => scaleFont(14)
},
});
Scale Styles:
Apply scales based on PixelRatio
API to fonts and number values;Intecept Styles
: Intercept every styles and apply the new calculate one;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!
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
.
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.