import { StyleSheet } from "react-native"
import { hScale, vScale, fScale } from "react-native-scales"
 
/*
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"
  }
 
})
 

import { StyleSheet } from "react-native"
import { sWidth, sHeight } from "react-native-scales"
 
/*
Constants:
 
sWidth: Screen Width value.
sHeight: Screen Height value.
 
*/
const styles = StyleSheet.create({
 
  myScreenContainer: {
    width: sWidth, 
    height: sHeight,
    backgroundColor: "grey"
  }
 
})
 

import { StyleSheet } from "react-native"
import { rcScale, sqScale, crScale, tScale } from "react-native-scales"
 
/*
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"
  },
 
})