step-scale
v0.2.2
Published
React Native Scale Converters
Downloads
9
Maintainers
Readme
Step-Scale
Scale your vertical and horizontal pixel sizes on different screens' dimensions, .. And More !
- Scale pixel sizes on different screens' dimensions
- Generate common styles' shapes in one line
- Easily Get screen width and height.
Instalation
npm i step-scale
- OR - yarn add step-scale
Then.. Your Are Done !
Usage
Basic Scalers
import { StyleSheet } from "react-native"
import { hScale, vScale, fScale } from "step-scale"
/*
Basic Scalers:
hScale: Horizontal Scaler.
vScale: Vertical Scaler.
fScale: FontSize Scaler.
*/
const styles = StyleSheet.create({
myView: {
width: hScale(150),
height: vScale(90),
backgroundColor: "grey"
},
myText: {
fontSize: fScale(15),
color: "green"
}
})
Constants
import { StyleSheet } from "react-native"
import { sWidth, sHeight } from "step-scale"
/*
Constants:
sWidth: Screen Width value.
sHeight: Screen Height value.
*/
const styles = StyleSheet.create({
myScreenContainer: {
width: sWidth,
height: sHeight,
backgroundColor: "grey"
}
})
Extras
import { StyleSheet } from "react-native"
import { rcScale, sqScale, crScale, tScale } from "step-scale"
/*
Extras:
Shapes Generator
rcScale: generates scaled Rectangle.
sqScale: generates scaled Square.
crScale: generates scaled Circle.
Extra Size Scaler:
tScale: Total Size Scaler.
*/
const styles = StyleSheet.create({
myBlueRecatngle: {
// params (width, height)
...rcScale(150, 90),
backgroundColor: "blue"
},
myGreenSquare: {
...sqScale(150),
backgroundColor: "green"
},
myRedCircle: {
...crScale(150),
backgroundColor: "red"
},
myView: {
width: tScale(1.5),
height: tScale(2.9),
backgroundColor: "grey"
},
})