Add moderateVerticalScale function.

README.md

@@ -33,6 +33,7 @@ const Component = props =>
         width: scale(30),
         height: verticalScale(50),
         padding: moderateScale(5)
+        marginVertical: moderateVerticalScale(5)
     }}/>;
 ```
 
@@ -50,9 +51,12 @@ If normal scale will increase your size by +2X, moderateScale will only increase
 ➡️ moderateScale(10) = 15  
 ➡️ moderateScale(10, 0.1) = 11  
 
+* `moderateVerticalScale(size: number)`  
+Same as moderateScale, except looking on the difference between base and actual device screen height.
+
 All scale functions can be imported using their shorthand alias as well:
 ```js
-import { s, vs, ms } from 'react-native-size-matters';
+import { s, vs, ms, mvs } from 'react-native-size-matters';
 ```
 
 
@@ -68,6 +72,7 @@ ScaleSheet will take the same stylesObject a regular StyleSheet will take, plus
 * `<size>@vs` - will apply `verticalScale` function on `size`.
 * `<size>@ms` - will apply `moderateScale` function with resize factor of 0.5 on `size`.
 * `<size>@ms<factor>` - will apply `moderateScale` function with resize factor of `factor` on size.
+* `<size>@mvs<factor>` - will apply `moderateVerticalScale` function with resize factor of `factor` on size.
 
 ScaledSheet also supports rounding the result, simply add `r` at the end of the annotation. 
 
@@ -92,7 +97,7 @@ const styles = ScaledSheet.create({
 ## Changing the Default Guideline Sizes
 
 In the ever-changing mobile devices world, screen sizes change a lot.  
-This lib uses 350dp x 680dp as guideline sizes, but if you (or your designer) prefer using different sizes it's possible.
+This lib uses 375dp x 812dp as guideline sizes, but if you (or your designer) prefer using different sizes it's possible.
 
 To do so, first, you'd need to setup [react-native-dotenv](https://github.com/zetachang/react-native-dotenv).  
 After setting it up and creating `.env` file, add the following env params to it:

extend.d.ts

@@ -5,13 +5,15 @@ declare module "react-native-size-matters/extend" {
     export function scale(size: number): number;
     export function verticalScale(size: number): number;
     export function moderateScale(size: number, factor?: number): number;
+    export function moderateVerticalScale(size: number, factor?: number): number;
     export function s(size: number): number;
     export function vs(size: number): number;
     export function ms(size: number, factor?: number): number;
+    export function mvs(size: number, factor?: number): number;
 
     export namespace ScaledSheet {
-        export function create<T extends NamedStyles<T> | NamedStyles<any>>(stylesObject: T): { 
-            [P in keyof T]: RN.RegisteredStyle<T[P] & Record<Extract<keyof T[P], keyof StringifiedStyles>, number>> 
+        export function create<T extends NamedStyles<T> | NamedStyles<any>>(stylesObject: T): {
+            [P in keyof T]: RN.RegisteredStyle<T[P] & Record<Extract<keyof T[P], keyof StringifiedStyles>, number>>
         };
     }
-}
+}

extend.js

@@ -1,5 +1,5 @@
 import scaledSheetCreator from './lib/ScaledSheet';
-import { scale, verticalScale, moderateScale } from './lib/extend/scaling-utils.extend';
+import { scale, verticalScale, moderateScale, moderateVerticalScale } from './lib/extend/scaling-utils.extend';
 
-export const ScaledSheet = scaledSheetCreator(scale, verticalScale, moderateScale);
+export const ScaledSheet = scaledSheetCreator(scale, verticalScale, moderateScale, moderateVerticalScale);
 export * from './lib/extend/scaling-utils.extend';

index.d.ts

@@ -29,15 +29,17 @@ declare module "react-native-size-matters" {
     export function scale(size: number): number;
     export function verticalScale(size: number): number;
     export function moderateScale(size: number, factor?: number): number;
+    export function moderateVerticalScale(size: number, factor?: number): number;
     export function s(size: number): number;
     export function vs(size: number): number;
     export function ms(size: number, factor?: number): number;
+    export function mvs(size: number, factor?: number): number;
 
     type NamedStyles<T> = { [P in keyof T]: RN.ViewStyle | RN.TextStyle | RN.ImageStyle | StringifiedStyles };
 
     export namespace ScaledSheet {
-        export function create<T extends NamedStyles<T> | NamedStyles<any>>(stylesObject: T): { 
-            [P in keyof T]: RN.RegisteredStyle<T[P] & Record<Extract<keyof T[P], keyof StringifiedStyles>, number>> 
+        export function create<T extends NamedStyles<T> | NamedStyles<any>>(stylesObject: T): {
+            [P in keyof T]: RN.RegisteredStyle<T[P] & Record<Extract<keyof T[P], keyof StringifiedStyles>, number>>
         };
     }
-}
+}

index.js

@@ -1,5 +1,5 @@
 import scaledSheetCreator from './lib/ScaledSheet';
-import { scale, verticalScale, moderateScale } from './lib/scaling-utils';
+import { scale, verticalScale, moderateScale, moderateVerticalScale } from './lib/scaling-utils';
 
-export const ScaledSheet = scaledSheetCreator(scale, verticalScale, moderateScale);
-export * from './lib/scaling-utils';
+export const ScaledSheet = scaledSheetCreator(scale, verticalScale, moderateScale, moderateVerticalScale);
+export * from './lib/scaling-utils';

lib/ScaledSheet.js

@@ -1,9 +1,9 @@
 import { StyleSheet } from 'react-native';
 import deepMap from './deep-map';
 
-const validScaleSheetRegex = /^(\-?\d+(\.\d{1,3})?)@(ms(\d+(\.\d{1,2})?)?|s|vs)(r?)$/;
+const validScaleSheetRegex = /^(\-?\d+(\.\d{1,3})?)@(ms(\d+(\.\d{1,2})?)?|s|vs|mvs)(r?)$/;
 
-const scaleByAnnotation = (scale, verticalScale, moderateScale) => (value) => {
+const scaleByAnnotation = (scale, verticalScale, moderateScale, moderateVerticalScale) => (value) => {
     if (!validScaleSheetRegex.test(value)) {
         return value;
     }
@@ -25,6 +25,9 @@ const scaleByAnnotation = (scale, verticalScale, moderateScale) => (value) => {
         case 'ms':
             result = moderateScale(size);
             break;
+        case 'mvs':
+            result = moderateVerticalScale(size);
+            break;
         default:
             const scaleFactor = value.split('ms')[1].replace('r', '');
             result = moderateScale(size, parseFloat(scaleFactor));
@@ -33,11 +36,11 @@ const scaleByAnnotation = (scale, verticalScale, moderateScale) => (value) => {
     return shouldRound ? Math.round(result) : result;
 };
 
-const scaledSheetCreator = (scale, verticalScale, moderateScale) => {
-    const scaleFunc = scaleByAnnotation(scale, verticalScale, moderateScale);
+const scaledSheetCreator = (scale, verticalScale, moderateScale, moderateVerticalScale) => {
+    const scaleFunc = scaleByAnnotation(scale, verticalScale, moderateScale, moderateVerticalScale);
     return {
         create: styleSheet => StyleSheet.create(deepMap(styleSheet, scaleFunc))
     }
 }
 
-export default scaledSheetCreator;
+export default scaledSheetCreator;

lib/extend/scaling-utils.extend.js

@@ -11,7 +11,9 @@ const guidelineBaseHeight = Config.SIZE_MATTERS_BASE_HEIGHT || 812;
 export const scale = size => shortDimension / guidelineBaseWidth * size;
 export const verticalScale = size => longDimension / guidelineBaseHeight * size;
 export const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;
+export const moderateVerticalScale = (size, factor = 0.5) => size + ( verticalScale(size) - size ) * factor;
 
 export const s = scale;
 export const vs = verticalScale;
 export const ms = moderateScale;
+export const mvs = moderateVerticalScale;

lib/scaling-utils.js

@@ -10,7 +10,9 @@ const guidelineBaseHeight = 812;
 export const scale = size => shortDimension / guidelineBaseWidth * size;
 export const verticalScale = size => longDimension / guidelineBaseHeight * size;
 export const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;
+export const moderateVerticalScale = (size, factor = 0.5) => size + ( verticalScale(size) - size ) * factor;
 
 export const s = scale;
 export const vs = verticalScale;
 export const ms = moderateScale;
+export const mvs = moderateVerticalScale;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-size-matters",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A React-Native utility belt for scaling the size your apps UI across different sized devices",
   "main": "index.js",
   "scripts": {