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"
  },
 
})