Version 0.3 features and improvements (#34)

Author: nirsky

README.md

@@ -49,6 +49,12 @@ If normal scale will increase your size by +2X, moderateScale will only increase
 ➡️ moderateScale(10) = 15  
 ➡️ moderateScale(10, 0.1) = 11  
 
+All scale functions can be imported using their shorthand alias as well:
+```js
+import { s, vs, ms } from 'react-native-size-matters';
+```
+
+
 ### ScaledSheet
 ```js
 import { ScaledSheet } from 'react-native-size-matters';
@@ -62,6 +68,8 @@ ScaleSheet will take the same stylesObject a regular StyleSheet will take, plus
 * `<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.
 
+ScaledSheet also supports rounding the result, simply add `r` at the end on of the annotation. 
+
 Example:
 ```js
 import { ScaledSheet } from 'react-native-size-matters';
@@ -70,6 +78,7 @@ const styles = ScaledSheet.create({
     container: {
         width: '100@s', // = scale(100)
         height: '200@vs', // = verticalScale(200)
+        padding: '2@msr', // = Math.round(moderateScale(2))
         margin: 5
     },
     row: {

__tests__/ScaledSheet.spec.js

@@ -68,7 +68,14 @@ describe('ScaledSheet', () => {
                 height: '34@ms',
                 marginRight: '0.5@ms0.9',
                 marginLeft: '-0.5@ms0.9',
+                marginBottom: '0.532@ms0.9',
                 marginTop: '-10@s',
+            },
+            round: {
+                top: '11.3@sr',
+                bottom: '22.75@vsr',
+                left: '35.1@msr',
+                right: '-20.19@ms0.3r'
             }
         };
 
@@ -87,7 +94,14 @@ describe('ScaledSheet', () => {
                 height: moderateScale(34),
                 marginRight: moderateScale(0.5, 0.9),
                 marginLeft: moderateScale(-0.5, 0.9),
+                marginBottom: moderateScale(0.532, 0.9),
                 marginTop: scale(-10),
+            },
+            round: {
+                top: Math.round(scale(11.3)),
+                bottom: Math.round(verticalScale(22.75)),
+                left: Math.round(moderateScale(35.1)),
+                right: Math.round(moderateScale(-20.19, 0.3))
             }
         };
 

__tests__/scaling-utils-alias.spec.js

@@ -0,0 +1,25 @@
+jest.mock('react-native');
+import { s, vs, ms } from '..';
+
+describe('scaling-utils', () => {
+    test('scale returns the expected result based on mocked Dimensions', () => {
+        expect(s(2.5)).toBe(5);
+        expect(s(100)).toBe(200);
+        expect(s(200)).toBe(400);
+    });
+
+    test('verticalScale returns the expected result based on mocked Dimensions', () => {
+        expect(vs(5)).toBe(7.5);
+        expect(vs(100)).toBe(150);
+        expect(vs(200)).toBe(300);
+    });
+
+    test('moderateScale returns the expected result based on mocked Dimensions', () => {
+        expect(ms(100)).toBe(150);
+        expect(ms(100, 0.1)).toBe(110);
+        expect(ms(100, 0.3)).toBe(130);
+        expect(ms(100, 0.6)).toBe(160);
+        expect(ms(100, 0.9)).toBe(190);
+        expect(ms(100, 2)).toBe(300);
+    });
+})

extend.d.ts

@@ -5,6 +5,9 @@ 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 s(size: number): number;
+    export function vs(size: number): number;
+    export function ms(size: number, factor?: number): number;
 
     export namespace ScaledSheet {
         export function create<T extends NamedStyles<T> | NamedStyles<any>>(stylesObject: T): { 

index.d.ts

@@ -29,6 +29,9 @@ 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 s(size: number): number;
+    export function vs(size: number): number;
+    export function ms(size: number, factor?: number): number;
 
     type NamedStyles<T> = { [P in keyof T]: RN.ViewStyle | RN.TextStyle | RN.ImageStyle | StringifiedStyles };
 

lib/ScaledSheet.js

@@ -1,32 +1,36 @@
 import { StyleSheet } from 'react-native';
 import deepMap from './deep-map';
 
-const validScaleSheetRegex = /^(\-?\d+(\.\d{1,2})?)@(ms(\d+(\.\d{1,2})?)?|s|vs)$/;
-const scaleRegex = /^(\-?\d+(\.\d{1,2})?)@s$/;
-const verticalScaleRegex = /^(\-?\d+(\.\d{1,2})?)@vs$/;
-const moderateScaleRegex = /^(\-?\d+(\.\d{1,2})?)@ms(\d+(\.\d{1,2})?)?$/;
+const validScaleSheetRegex = /^(\-?\d+(\.\d{1,3})?)@(ms(\d+(\.\d{1,2})?)?|s|vs)(r?)$/;
 
 const scaleByAnnotation = (scale, verticalScale, moderateScale) => (value) => {
     if (!validScaleSheetRegex.test(value)) {
         return value;
     }
-    const size = parseFloat(value.split('@')[0]);
 
-    if (scaleRegex.test(value)) {
-        return scale(size);
-    }
+    const regexExecResult = validScaleSheetRegex.exec(value);
+    const size = parseFloat(regexExecResult[1]);
+    const scaleFunc = regexExecResult[3];
+    const shouldRound = value.endsWith('r');
 
-    if (verticalScaleRegex.test(value)) {
-        return verticalScale(size);
-    }
+    let result;
 
-    if (moderateScaleRegex.test(value)) {
-        const scaleFactor = value.split('ms')[1];
-        if (scaleFactor) {
-            return moderateScale(size, parseFloat(scaleFactor));
-        }
-        return moderateScale(size);
+    switch (scaleFunc) {
+        case 's':
+            result = scale(size);
+            break;
+        case 'vs':
+            result = verticalScale(size);
+            break;
+        case 'ms':
+            result = moderateScale(size);
+            break;
+        default:
+            const scaleFactor = value.split('ms')[1].replace('r', '');
+            result = moderateScale(size, parseFloat(scaleFactor));
     }
+
+    return shouldRound ? Math.round(result) : result;
 };
 
 const scaledSheetCreator = (scale, verticalScale, moderateScale) => {

lib/extend/scaling-utils.extend.js

@@ -8,8 +8,10 @@ const [shortDimension, longDimension] = width < height ? [width, height] : [heig
 const guidelineBaseWidth = SIZE_MATTERS_BASE_WIDTH || 350;
 const guidelineBaseHeight = SIZE_MATTERS_BASE_HEIGHT || 680;
 
-const scale = size => shortDimension / guidelineBaseWidth * size;
-const verticalScale = size => longDimension / guidelineBaseHeight * size;
-const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;
+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 {scale, verticalScale, moderateScale};
+export const s = scale;
+export const vs = verticalScale;
+export const ms = moderateScale;

lib/scaling-utils.js

@@ -7,8 +7,10 @@ const [shortDimension, longDimension] = width < height ? [width, height] : [heig
 const guidelineBaseWidth = 350;
 const guidelineBaseHeight = 680;
 
-const scale = size => shortDimension / guidelineBaseWidth * size;
-const verticalScale = size => longDimension / guidelineBaseHeight * size;
-const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;
+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 {scale, verticalScale, moderateScale};
+export const s = scale;
+export const vs = verticalScale;
+export const ms = moderateScale;

package.json

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