Responsive unit size for react native using `Dimensions` Api

Metrics.ts

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

const guidelineBaseWidth = 360;
const guidelineBaseHeight = 724;

/**
 * 
 * @param size number
 * @returns responsive horizontal number size
 * @description usage: height, marginTop, marginBottom, marginVertical, lineHeight, paddingTop, paddingBottom, padingVertical
 */
const horizontalScale = (size: number) => (width / guidelineBaseWidth) * size;
/**
 * 
 * @param size 
 * @returns responsive vertical number size
 * @description usage: width, marginLeft, marginRight, marginHorizontal, paddingLeft, paddingRight, padingHorizontal
 */
const verticalScale = (size: number) => (height / guidelineBaseHeight) * size;
/**
 * 
 * @param size number
 * @param factor number
 * @returns usage: fontSize, borderRadius
 */
const moderateScale = (size: number, factor = 0.5) => size + (horizontalScale(size) - size) * factor;

export { horizontalScale, verticalScale, moderateScale };