Skip to content

Commit ac33ee0

Browse files
ftziftzi
authored
Added moderateVerticalScale (nirsky#46)
1 parent e988f3a commit ac33ee0

12 files changed

+133
-58
lines changed

‎README.md

+23-15
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ yarn add react-native-size-matters
1818
```
1919

2020
## Motivation
21-
When developing with react-native, you need to manually adjust your app to look great on a variety of different screen sizes. That's a tedious job.
22-
react-native-size-matters provides some simple tooling to make your scaling a whole lot easier.
23-
The idea is to develop once on a standard ~5" screen mobile device and then simply apply the provided utils.
21+
When developing with react-native, you need to manually adjust your app to look great on a variety of different screen sizes. That's a tedious job.
22+
react-native-size-matters provides some simple tooling to make your scaling a whole lot easier.
23+
The idea is to develop once on a standard ~5" screen mobile device and then simply apply the provided utils.
2424
📖 You can read more about what led to this library on my blog post, which can be found in [this repo](./examples/BlogPost) or at [Medium](https://medium.com/soluto-engineering/size-matters-5aeeb462900a).
2525

2626
## Api
@@ -37,22 +37,24 @@ const Component = props =>
3737
```
3838

3939

40-
* `scale(size: number)`
40+
* `scale(size: number)`
4141
Will return a linear scaled result of the provided size, based on your device's screen width.
42-
* `verticalScale(size: number)`
42+
* `verticalScale(size: number)`
4343
Will return a linear scaled result of the provided size, based on your device's screen height.
4444

45-
* `moderateScale(size: number, factor?: number)`
46-
Sometimes you don't want to scale everything in a linear manner, that's where moderateScale comes in.
47-
The cool thing about it is that you can control the resize factor (default is 0.5).
48-
If normal scale will increase your size by +2X, moderateScale will only increase it by +X, for example:
49-
➡️ scale(10) = 20
50-
➡️ moderateScale(10) = 15
51-
➡️ moderateScale(10, 0.1) = 11
45+
* `moderateScale(size: number, factor?: number)`
46+
Sometimes you don't want to scale everything in a linear manner, that's where moderateScale comes in.
47+
The cool thing about it is that you can control the resize factor (default is 0.5).
48+
If normal scale will increase your size by +2X, moderateScale will only increase it by +X, for example:
49+
➡️ scale(10) = 20
50+
➡️ moderateScale(10) = 15
51+
➡️ moderateScale(10, 0.1) = 11
52+
* `moderateVerticalScale(size: number, factor?: number)`
53+
Same as moderateScale, but using verticalScale instead of scale.
5254

5355
All scale functions can be imported using their shorthand alias as well:
5456
```js
55-
import { s, vs, ms } from 'react-native-size-matters';
57+
import { s, vs, ms, mvs } from 'react-native-size-matters';
5658
```
5759

5860

@@ -67,9 +69,11 @@ ScaleSheet will take the same stylesObject a regular StyleSheet will take, plus
6769
* `<size>@s` - will apply `scale` function on `size`.
6870
* `<size>@vs` - will apply `verticalScale` function on `size`.
6971
* `<size>@ms` - will apply `moderateScale` function with resize factor of 0.5 on `size`.
72+
* `<size>@mvs` - will apply `moderateVerticalScale` function with resize factor of 0.5 on `size`.
7073
* `<size>@ms<factor>` - will apply `moderateScale` function with resize factor of `factor` on size.
74+
* `<size>@mvs<factor>` - will apply `moderateVerticalScale` function with resize factor of `factor` on size.
7175

72-
ScaledSheet also supports rounding the result, simply add `r` at the end of the annotation.
76+
ScaledSheet also supports rounding the result, simply add `r` at the end of the annotation.
7377

7478
Example:
7579
```js
@@ -85,12 +89,16 @@ const styles = ScaledSheet.create({
8589
row: {
8690
padding: '[email protected]', // = moderateScale(10, 0.3)
8791
height: '50@ms' // = moderateScale(50)
92+
},
93+
titleBar: {
94+
paddingBottom: '[email protected]', // = moderateVerticalScale(30, 0.3)
95+
height: '30@mvs'
8896
}
8997
});
9098
```
9199

92100
<hr/>
93101

94102
* [Changing the Default Guideline Sizes](./examples/change-guideline-sizes.md)
95-
* [Examples](./examples/README.md)
103+
* [Examples](./examples/README.md)
96104

‎__tests__/ScaledSheet.spec.js

+38-14
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,72 @@
11
jest.mock('react-native');
2-
import { ScaledSheet, scale, verticalScale, moderateScale } from '..';
2+
import { ScaledSheet, scale, verticalScale, moderateScale, moderateVerticalScale } from '..';
33

44
const getRandomInt = (min = 1, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min;
55

66
describe('ScaledSheet', () => {
77
test('Scale works', () => {
88
const number = getRandomInt();
9-
const input = { test: `${number}@s` }
9+
const input = { test: `${number}@s` };
1010
expect(ScaledSheet.create(input).test).toBe(scale(number));
1111
});
1212

1313
test('verticalScale works', () => {
1414
const number = getRandomInt();
15-
const input = { test: `${number}@vs` }
15+
const input = { test: `${number}@vs` };
1616
expect(ScaledSheet.create(input).test).toBe(verticalScale(number));
1717
});
1818

1919
test('moderateScale with default factor works', () => {
2020
const number = getRandomInt();
21-
const input = { test: `${number}@ms` }
21+
const input = { test: `${number}@ms` };
2222
expect(ScaledSheet.create(input).test).toBe(moderateScale(number));
2323
});
2424

25+
test('moderateVerticalScale with default factor works', () => {
26+
const number = getRandomInt();
27+
const input = { test: `${number}@mvs` };
28+
expect(ScaledSheet.create(input).test).toBe(moderateVerticalScale(number));
29+
});
30+
2531
test('moderateScale with custom factor works', () => {
2632
const number = getRandomInt();
27-
const input = { test: `${number}@ms0.7` }
33+
const input = { test: `${number}@ms0.7` };
2834
expect(ScaledSheet.create(input).test).toBe(moderateScale(number, 0.7));
2935
});
3036

37+
test('moderateVerticalScale with custom factor works', () => {
38+
const number = getRandomInt();
39+
const input = { test: `${number}@mvs0.7` };
40+
expect(ScaledSheet.create(input).test).toBe(moderateVerticalScale(number, 0.7));
41+
});
42+
3143
test('Scale works with a negative value', () => {
3244
const number = getRandomInt(-100, -1);
33-
const input = { test: `${number}@s` }
45+
const input = { test: `${number}@s` };
3446
expect(ScaledSheet.create(input).test).toBe(scale(number));
3547
});
3648

3749
test('moderateScale works with a negative value', () => {
3850
const number = getRandomInt(-100, -1);
39-
const input = { test: `${number}@ms0.3` }
51+
const input = { test: `${number}@ms0.3` };
4052
expect(ScaledSheet.create(input).test).toBe(moderateScale(number, 0.3));
4153
});
4254

55+
test('moderateVerticalScale works with a negative value', () => {
56+
const number = getRandomInt(-100, -1);
57+
const input = { test: `${number}@mvs0.3` };
58+
expect(ScaledSheet.create(input).test).toBe(moderateVerticalScale(number, 0.3));
59+
});
60+
4361
test('Scale works on a deeply nested object', () => {
4462
const number = getRandomInt();
45-
const input = { test: { test: { test: `${number}@s` } } }
63+
const input = { test: { test: { test: `${number}@s` } } };
4664
expect(ScaledSheet.create(input).test.test.test).toBe(scale(number));
4765
});
4866

4967
test('No special annotation should leave the number intact', () => {
5068
const number = getRandomInt();
51-
const input = { test: number }
69+
const input = { test: number };
5270
expect(ScaledSheet.create(input).test).toBe(number);
5371
});
5472

@@ -60,11 +78,13 @@ describe('ScaledSheet', () => {
6078
margin: {
6179
width: 12,
6280
height: '12@s',
81+
paddingTop: '6.3@mvs',
6382
paddingBottom: -1
6483
}
6584
},
6685
row: {
67-
padding: '[email protected]',
86+
paddingLeft: '[email protected]',
87+
paddingBottom: '[email protected]',
6888
height: '34@ms',
6989
marginRight: '[email protected]',
7090
marginLeft: '[email protected]',
@@ -75,7 +95,8 @@ describe('ScaledSheet', () => {
7595
top: '11.3@sr',
7696
bottom: '22.75@vsr',
7797
left: '35.1@msr',
78-
right: '[email protected]'
98+
right: '[email protected]',
99+
height: '[email protected]'
79100
}
80101
};
81102

@@ -86,11 +107,13 @@ describe('ScaledSheet', () => {
86107
margin: {
87108
width: 12,
88109
height: scale(12),
110+
paddingTop: moderateVerticalScale(6.3),
89111
paddingBottom: -1
90112
}
91113
},
92114
row: {
93-
padding: moderateScale(10, 0.3),
115+
paddingLeft: moderateScale(10, 0.3),
116+
paddingBottom: moderateVerticalScale(10, 0.4),
94117
height: moderateScale(34),
95118
marginRight: moderateScale(0.5, 0.9),
96119
marginLeft: moderateScale(-0.5, 0.9),
@@ -101,10 +124,11 @@ describe('ScaledSheet', () => {
101124
top: Math.round(scale(11.3)),
102125
bottom: Math.round(verticalScale(22.75)),
103126
left: Math.round(moderateScale(35.1)),
104-
right: Math.round(moderateScale(-20.19, 0.3))
127+
right: Math.round(moderateScale(-20.19, 0.3)),
128+
height: Math.round(moderateVerticalScale(-14.13, 0.4))
105129
}
106130
};
107131

108132
expect(JSON.stringify(ScaledSheet.create(input))).toBe(JSON.stringify(expectedOutput));
109133
});
110-
})
134+
});

‎__tests__/scaling-utils-alias.spec.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
jest.mock('react-native');
2-
import { s, vs, ms } from '..';
2+
import { s, vs, ms, mvs } from '..';
33

44
describe('scaling-utils', () => {
55
test('scale returns the expected result based on mocked Dimensions', () => {
@@ -22,4 +22,13 @@ describe('scaling-utils', () => {
2222
expect(ms(100, 0.9)).toBe(190);
2323
expect(ms(100, 2)).toBe(300);
2424
});
25-
})
25+
26+
test('moderateVerticalScale returns the expected result based on mocked Dimensions', () => {
27+
expect(mvs(100)).toBe(125);
28+
expect(mvs(100, 0.1)).toBe(105);
29+
expect(mvs(100, 0.3)).toBe(115);
30+
expect(mvs(100, 0.6)).toBe(130);
31+
expect(mvs(100, 0.9)).toBe(145);
32+
expect(mvs(100, 2)).toBe(200);
33+
});
34+
});

‎__tests__/scaling-utils.extend.spec.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
jest.mock('react-native');
22
jest.mock('react-native-dotenv');
3-
import { scale, verticalScale, moderateScale } from '../extend';
3+
import { scale, verticalScale, moderateScale, moderateVerticalScale } from '../extend';
44

55
describe('scaling-utils when guideline sizes are set using react-native-dotenv', () => {
66
test('scale returns the expected result based on mocked Dimensions and mocked guideline sizes', () => {
@@ -23,4 +23,13 @@ describe('scaling-utils when guideline sizes are set using react-native-dotenv',
2323
expect(Math.floor(moderateScale(100, 0.9))).toBe(129);
2424
expect(Math.floor(moderateScale(100, 2))).toBe(166);
2525
});
26-
})
26+
27+
test('moderateVerticalScale returns the expected result based on mocked Dimensions and mocked guideline sizes', () => {
28+
expect(Math.floor(moderateVerticalScale(100))).toBe(100);
29+
expect(Math.floor(moderateVerticalScale(100, 0.1))).toBe(100);
30+
expect(Math.floor(moderateVerticalScale(100, 0.3))).toBe(100);
31+
expect(Math.floor(moderateVerticalScale(100, 0.6))).toBe(100);
32+
expect(Math.floor(moderateVerticalScale(100, 0.9))).toBe(100);
33+
expect(Math.floor(moderateVerticalScale(100, 2))).toBe(100);
34+
});
35+
});

‎__tests__/scaling-utils.spec.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
jest.mock('react-native');
2-
import { scale, verticalScale, moderateScale } from '..';
2+
import { scale, verticalScale, moderateScale, moderateVerticalScale } from '..';
33

44
describe('scaling-utils', () => {
55
test('scale returns the expected result based on mocked Dimensions', () => {
@@ -22,4 +22,13 @@ describe('scaling-utils', () => {
2222
expect(moderateScale(100, 0.9)).toBe(190);
2323
expect(moderateScale(100, 2)).toBe(300);
2424
});
25-
})
25+
26+
test('moderateVerticalScale returns the expected result based on mocked Dimensions', () => {
27+
expect(moderateVerticalScale(100)).toBe(125);
28+
expect(moderateVerticalScale(100, 0.1)).toBe(105);
29+
expect(moderateVerticalScale(100, 0.3)).toBe(115);
30+
expect(moderateVerticalScale(100, 0.6)).toBe(130);
31+
expect(moderateVerticalScale(100, 0.9)).toBe(145);
32+
expect(moderateVerticalScale(100, 2)).toBe(200);
33+
});
34+
});

‎extend.d.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@ declare module "react-native-size-matters/extend" {
55
export function scale(size: number): number;
66
export function verticalScale(size: number): number;
77
export function moderateScale(size: number, factor?: number): number;
8+
export function moderateVerticalScale(size: number, factor?: number): number;
89
export function s(size: number): number;
910
export function vs(size: number): number;
1011
export function ms(size: number, factor?: number): number;
12+
export function mvs(size: number, factor?: number): number;
1113

1214
export namespace ScaledSheet {
13-
export function create<T extends NamedStyles<T> | NamedStyles<any>>(stylesObject: T): {
14-
[P in keyof T]: RN.RegisteredStyle<T[P] & Record<Extract<keyof T[P], keyof StringifiedStyles>, number>>
15+
export function create<T extends NamedStyles<T> | NamedStyles<any>>(stylesObject: T): {
16+
[P in keyof T]: RN.RegisteredStyle<T[P] & Record<Extract<keyof T[P], keyof StringifiedStyles>, number>>
1517
};
1618
}
1719
}

‎extend.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import scaledSheetCreator from './lib/ScaledSheet';
2-
import { scale, verticalScale, moderateScale } from './lib/extend/scaling-utils.extend';
2+
import { scale, verticalScale, moderateScale, moderateVerticalScale } from './lib/extend/scaling-utils.extend';
33

4-
export const ScaledSheet = scaledSheetCreator(scale, verticalScale, moderateScale);
4+
export const ScaledSheet = scaledSheetCreator(scale, verticalScale, moderateScale, moderateVerticalScale);
55
export * from './lib/extend/scaling-utils.extend';

‎index.d.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,17 @@ declare module "react-native-size-matters" {
2929
export function scale(size: number): number;
3030
export function verticalScale(size: number): number;
3131
export function moderateScale(size: number, factor?: number): number;
32+
export function moderateVerticalScale(size: number, factor?: number): number;
3233
export function s(size: number): number;
3334
export function vs(size: number): number;
3435
export function ms(size: number, factor?: number): number;
36+
export function mvs(size: number, factor?: number): number;
3537

3638
type NamedStyles<T> = { [P in keyof T]: RN.ViewStyle | RN.TextStyle | RN.ImageStyle | StringifiedStyles };
3739

3840
export namespace ScaledSheet {
39-
export function create<T extends NamedStyles<T> | NamedStyles<any>>(stylesObject: T): {
40-
[P in keyof T]: RN.RegisteredStyle<T[P] & Record<Extract<keyof T[P], keyof StringifiedStyles>, number>>
41+
export function create<T extends NamedStyles<T> | NamedStyles<any>>(stylesObject: T): {
42+
[P in keyof T]: RN.RegisteredStyle<T[P] & Record<Extract<keyof T[P], keyof StringifiedStyles>, number>>
4143
};
4244
}
4345
}

‎index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import scaledSheetCreator from './lib/ScaledSheet';
2-
import { scale, verticalScale, moderateScale } from './lib/scaling-utils';
2+
import { scale, verticalScale, moderateScale, moderateVerticalScale } from './lib/scaling-utils';
33

4-
export const ScaledSheet = scaledSheetCreator(scale, verticalScale, moderateScale);
4+
export const ScaledSheet = scaledSheetCreator(scale, verticalScale, moderateScale, moderateVerticalScale);
55
export * from './lib/scaling-utils';

0 commit comments

Comments
 (0)