What about a "MyScaledSheet.create"?

[Bruno]

Hey again!

In my previous app, when I added the moderateVerticalScale to this package, I found that 0.4 was usually the golden ratio for me. This scale came out from testing in a very small android screen, a medium one (the only physical device) and on a big iPhone one.

When moving from the normal StyleSheet to the ScaledSheet (what I am going to do soon in my new app), having to change all the numbers occurrences to size-matters notation is somewhat laborious, and I don't think that using size-matters from the start is very good at the prototyping stage.

What I suggest is to have a new custom constructable ScaledSheet object to automatically apply the scaling to the applicable styles, like fontSize, margins, paddings etc, iff they are numbers, using the given golden ratio or using the default one.

This way, we could just replace all the StyleSheet.create occurrences in the project to the MyScaledSheet.create() and also add the corresponding import. It would work for most cases using the golden ratio, and at the cases it doesn't fit well, it would still allow using the lib current methods of scaling individual styles.

From

const s = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignSelf: 'stretch',
    top: 2,
    left: 4,
    paddingHorizontal: 22,
    paddingVertical: 11.5,
    paddingTop: 13,
  },
}

, instead of changing to

const s = ScaledSheet.create({
  container: {
    flexDirection: 'row',
    alignSelf: 'stretch',
    top: '2@ms0.3', // or 0.4
    left: '4@ms0.3',
    paddingHorizontal: '22@ms0.3',
    paddingVertical: '11.5@ms0.3',
    paddingTop: '13@ms0.3',
  },
}

in all occurrences like I did in many styles, we would just

const s = MyScaledSheet.create({
  container: {
    flexDirection: 'row',
    alignSelf: 'stretch',
    top: 2,
    left: 4,
    paddingHorizontal: 22,
    paddingVertical: 11.5,
    paddingTop: 13,
    // still being able to have a paddingBottom: '4mvs@0.6' here, for example
  },
}

Usage:

export const MyScaledSheet = createScaledSheet({
  factor: 0.4,
  // and possibly also
  baseWidth: 680,
  baseHeight: 350,
  reference: 'horizontal' // or 'vertical'
})

The props would have their defaults.

What do you think about it? I think it would improve the productivity significantly when reaching that stage of the app development and make our lives simpler. Also, very easy to implement this on the lib. It also allows further general options later, like a custom behavior when using web apps, as window-size-scaling in web is awful and react-native-web is becoming more common.

I would happily do a PR for it!

For stats, in my previous app (6.5k lines of code) I had
111 occurrences of 0.4 as scale
17 0.3
11 0.2
2 0.5
1 0.6
1 0.8
1 0.1

Even if at a specific case 0.X would be better than 0.4 or the given factor, it's already better than not using scaling at all.