React Native Scaling for Responsiveness

by drlanbn

React Native scaling for responsiveness, Use: style={{ fontSize: vs(34) }}

1import { Dimensions } from "react-native";
2
3const { width, height } = Dimensions.get("window");
4const [shortDimension, longDimension] =
5  width < height ? [width, height] : [height, width];
6
7//Default guideline sizes are based on standard ~5" screen mobile device
8const guidelineBaseWidth = 350;
9const guidelineBaseHeight = 680;
10
11export const scale = (size) => (shortDimension / guidelineBaseWidth) * size;
12export const verticalScale = (size) =>
13  (longDimension / guidelineBaseHeight) * size;
14export const moderateScale = (size, factor = 0.5) =>
15  size + (scale(size) - size) * factor;
16export const moderateVerticalScale = (size, factor = 0.5) =>
17  size + (verticalScale(size) - size) * factor;
18
19export const s = scale;
20export const vs = verticalScale;
21export const ms = moderateScale;
22export const mvs = moderateVerticalScale;

✨ Code Explanation ✨

This code is a utility for scaling sizes in a React Native application, based on the dimensions of the screen. It imports the `Dimensions` module from the `react-native` library. The first line of code gets the width and height of the device screen using the `Dimensions.get("window")` method. It assigns the width to the `width` variable and the height to the `height` variable. The next line of code determines the short and long dimensions by comparing the width and height. If the width is smaller than the height, it assigns the width to the `shortDimension` variable and the height to the `longDimension` variable. Otherwise, it assigns the height to `shortDimension` and the width to `longDimension`. The following lines define four scaling functions: `scale`, `verticalScale`, `moderateScale`, and `moderateVerticalScale`. These functions take a size input and return a scaled size based on the shortDimension and longDimension variables, as well as the guideline base width and height. The final lines export the scaling functions as well as provide shorter aliases (`s`, `vs`, `ms`, `mvs`) for convenience when using the scaling utility.