Skip to content

Commit fc9722d

Browse files
authored
V0.3.1 (#48)
1 parent ac33ee0 commit fc9722d

File tree

3 files changed

+19
-22
lines changed

3 files changed

+19
-22
lines changed

Diff for: README.md

+17-20
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,19 +37,19 @@ 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
52-
* `moderateVerticalScale(size: number, factor?: number)`
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)`
5353
Same as moderateScale, but using verticalScale instead of scale.
5454

5555
All scale functions can be imported using their shorthand alias as well:
@@ -65,15 +65,15 @@ import { ScaledSheet } from 'react-native-size-matters';
6565
const styles = ScaledSheet.create(stylesObject)
6666
```
6767

68-
ScaleSheet will take the same stylesObject a regular StyleSheet will take, plus a special (optional) annotation that will automatically apply the scale functions for you:
68+
ScaledSheet will take the same stylesObject a regular StyleSheet will take, plus a special (optional) annotation that will automatically apply the scale functions for you:
6969
* `<size>@s` - will apply `scale` function on `size`.
7070
* `<size>@vs` - will apply `verticalScale` function on `size`.
7171
* `<size>@ms` - will apply `moderateScale` function with resize factor of 0.5 on `size`.
7272
* `<size>@mvs` - will apply `moderateVerticalScale` function with resize factor of 0.5 on `size`.
7373
* `<size>@ms<factor>` - will apply `moderateScale` function with resize factor of `factor` on size.
7474
* `<size>@mvs<factor>` - will apply `moderateVerticalScale` function with resize factor of `factor` on size.
7575

76-
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.
7777

7878
Example:
7979
```js
@@ -88,11 +88,8 @@ const styles = ScaledSheet.create({
8888
},
8989
row: {
9090
padding: '10@ms0.3', // = moderateScale(10, 0.3)
91-
height: '50@ms' // = moderateScale(50)
92-
},
93-
titleBar: {
94-
paddingBottom: '30@mvs0.3', // = moderateVerticalScale(30, 0.3)
95-
height: '30@mvs'
91+
width: '50@ms', // = moderateScale(50)
92+
height: '30@mvs0.3' // = moderateVerticalScale(30, 0.3)
9693
}
9794
});
9895
```

Diff for: examples/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ It is expected to look good on every device you want - iOS or Android, phone or
88

99
There are also some attached [screenshots](./expo-example-app#screenshots) in the repo if you don't feel like cloning.
1010

11-
<hr/>
11+
<hr/>
1212

1313
### [Blog Post](./BlogPost)
1414
### [Expo Example App](./expo-example-app)

Diff for: package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-size-matters",
3-
"version": "0.3.0",
3+
"version": "0.3.1",
44
"description": "A React-Native utility belt for scaling the size your apps UI across different sized devices",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)