📏 ScaledSheet
react-native-scaled-sheet is a package for React Native whose goal is to calculate scale of styles values as the easiest way.
```jsx
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:
```jsx
import ScaledSheet from 'react-native';
ScaledSheet.setLineBaseWidth(500);
const styles = ScaledSheet.create({
container: {
height: 50,
width: 50,
fontSize: 14,
},
});
```
Scale styles in the StyleSheet:
```jsx
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:**
```jsx
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
height: 50,
width: 50,
fontSize: 14,
},
});
```
**AFTER:**
```jsx
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](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
## License
[MIT License](LICENSE) © [helderburato](https://helderburato.com)