Is possible to use it with size-matters?

[obetomuniz]

The scaling feature is based on a scale function that uses absolute dimensions values of an element to resize.

I want to use relative dimensions based on device dimensions to keep the aspect of my app with a complex layout in more than one device screen. Can I use some way to customize it and/or abstract some third-party library or custom function with the extended-stylesheet library? Like this library.

The .value() seems an interesting way to extend the extended-stylesheet library, but it is very verbose in my case (I'll need to use it in every width, height, padding, margin, fontSize, etc). The react-native-size-matters library includes 3 units: @s, @vs and @dm and it is very useful to make the maintainability clean.

Is possible use this same approach with this library?

[vitalets]

@obetomuniz

1. Could you show a short snippet how you solution looks with .value()?
2. Is not it possible to set $scale value based on device dimensions? Something like this:

   
   const scale = deviceWidth < 300 ? 1 : 1.5;
   const styles = EStyleSheet.create({
   $scale: scale,
   button: {
   width: 100,
   height: 20,
   marginLeft: 10
   }
   });

[obetomuniz]

Hey @vitalets, thank you for the feedback :D

Using the size-matters formula that provide for us scale, verticalScale and moderateScale, the .value() will be something like this:

const styles = EStyleSheet.create({
  button: {
    width: () => 100 * EStyleSheet.value('$scale'),
    height: () => 20 * EStyleSheet.value('$verticalScale'),
    marginLeft: () => 10 *  EStyleSheet.value('$scale')
  }
});

I would like to use some type of mixin to manipulate the way where we compute the values to looks like:

const styles = EStyleSheet.create({
  button: {
    width: '100@s',
    height: '20@vs',
    marginLeft: '10@s'
  }
});

[obetomuniz]

FYI: I want to avoid static responsive values like const scale = deviceWidth < 300 ? 1 : 1.5; once we have a bunch of screen dimensions (width/height) to support.

[obetomuniz]

Doing some research and thinking out of the box 😂 ... Is possible to create something like this?

EStyleSheet.build({
  $s: calcs to return the scale value,
  $vs: calcs to return the verticalScale value,
});

const styles = EStyleSheet.create({
  button: {
    width: '100 * $s',
    height: '20 * $vs',
    marginLeft: '10 * $s'
  }
});

Is there some way or suggestion to remove the * operator and use just number$formula? Like this:

const styles = EStyleSheet.create({
  button: {
    width: '100$s',
    height: '20$vs',
    marginLeft: '10$s'
  }
});

[vitalets]

I think ideally we should not have 100@s / 100$s / 100 * $s for scaling. Just 100. Currently EStyleSheet supports single scaling factor for both directions. And these two examples are equivalent: 1.

EStyleSheet.build({
  $s: 1.5,
});
const styles = EStyleSheet.create({
  button: {
    width: '100 * $s',
    marginLeft: '10 * $s'
  }
});

2.

EStyleSheet.build({
  $scale: 1.5,
});
const styles = EStyleSheet.create({
  button: {
    width: 100, // automatically turns into 150
    marginLeft: 10 // automatically turns into 15
  }
});

But the second looks more clean to me. As I understand the problem - you need separate scaling factor for vertical and horizontal directions. Yes?

For me it sounds reasonable. The solution can be to support in EStyleSheet direction specific scaling:

// the code below is a prototype, not a working example!
EStyleSheet.build({
  $scaleHorizontal: 1.5,
  $scaleVertical: 2,
});

const styles = EStyleSheet.create({
  button: {
    width: 100, // automatically turns into 150
    height: 20, // automatically turns into 40
    marginLeft: 10 // automatically turns into 15
  }
});

Will it solve the issue?

[obetomuniz]

Wow! I'll consider this solution. My concern is that it is not based in a specific dimension of device to use as reference as you can see here.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.