https://github.com/helderberto/react-native-scaled-sheet
📏 A React Native interceptor for StyleSheet to scale sizes based on screen dimensions.
https://github.com/helderberto/react-native-scaled-sheet
hacktoberfest hacktoberfest-accepted react-native react-native-scale react-native-scaled-sheet scale scale-sizes
Last synced: over 1 year ago
JSON representation
📏 A React Native interceptor for StyleSheet to scale sizes based on screen dimensions.
- Host: GitHub
- URL: https://github.com/helderberto/react-native-scaled-sheet
- Owner: helderberto
- License: mit
- Created: 2020-04-23T21:14:10.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2022-02-16T15:02:42.000Z (over 4 years ago)
- Last Synced: 2025-03-18T08:11:20.396Z (over 1 year ago)
- Topics: hacktoberfest, hacktoberfest-accepted, react-native, react-native-scale, react-native-scaled-sheet, scale, scale-sizes
- Language: JavaScript
- Homepage:
- Size: 3.45 MB
- Stars: 18
- Watchers: 1
- Forks: 2
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
📏 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)