React-Native responsive design utils

responsive.ts

import {widthPercentageToDP, heightPercentageToDP} from 'react-native-responsive-screen';

const REFERENCE_WIDTH = 428;
const REFERENCE_HEIGHT = 926;

export const wp = (val: number | string) => {
  if (typeof val === 'number') {
    return widthPercentageToDP(`${(100 * val) / REFERENCE_WIDTH}%`);
  }

  return widthPercentageToDP(val);
};

export const hp = (val: number | string) => {
  if (typeof val === 'number') {
    return heightPercentageToDP(`${(100 * val) / REFERENCE_HEIGHT}%`);
  }

  return heightPercentageToDP(val);
};