step-scale

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

})