Percentages are handled in confusing way

[michalchudziak]

Percent values are supported natively since React Native 0.43. EStyleSheet passes them through to original StyleSheet except cases, when you use calculations with percents, e.g. "100% - 20". Percents are calculated relative to screen width/height on application launch.

The way library handles it right now seems to be confusing. How about splitting percentages based on parent and screen to two (or three) separate units.

My proposal would be to handle it the way it's working on the web, so:

• X% - uses native RN implementation.
• Xvw - uses screen's width
• Xvh - uses screen's height

[vitalets]

Good proposal. What do you think we should do for expressions with percentage like width: '100% - 20'? it seems such code should throw error as in new implementation it should be replaced with width: '100vw - 20'.

[ohm924]

Sorry If my english makes you all confused. Same as @mike866. I think it is good that we can use vw and vh. Then I'd decided to edit the code by add tryCalcViewport function in value.js

tryCalcViewport(str) {
    let vpprop = null;
    if(str.endsWith("vw")) {
      vpprop = "width";
    }
    else if(str.endsWith("vh")) {
      vpprop = "height";
    }
    else if(str.endsWith("vp")) {
      vpprop = this.prop;
    }
    if(vpprop != null) {
      let val = str.substr(0, str.length-2)+"%"
      return percent.calc(val, vpprop);
    }
    return null;
}

and insert function into action array at calcString and calcOperandValue

  calcString() {
    let actions = [
      this.tryCalcOperation,
      this.tryCalcViewport, // <<<<<<<<<<<<<<<<<<< insert here
      this.isOperation ? this.tryCalcPercent : null,
      this.tryCalcVar,
      this.tryCalcRem,
    ].filter(Boolean);
    let value = this.tryActions(actions, this.value);
    if (value !== null) {
      this.outValue = value;
    } else {
      this.proxyValue();
    }
  }

and

  calcOperandValue(str) {
    let actions = [
      this.tryCalcVar,
      this.tryCalcViewport, // <<<<<<<<<<<<<<<<<<< insert here
      this.tryCalcPercent,
      this.tryCalcRem,
      this.tryCalcFloat,
    ];
    return this.tryActions(actions, str);
  }

Now I can use vw vh and still use %.

Especially I create vp to force calculate by prop name same as % do. Not sure is it bug that It's not calculate If use % with no any operand.

Here is my code value.js.zip

[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.

[kokoskiwi]

Hi! Consider this article here. I had the same problem. https://medium.com/react-native-training/build-responsive-react-native-views-for-any-device-and-support-orientation-change-1c8beba5bc23

https://github.com/marudy/react-native-responsive-screen

[vitalets]

Here are possible solutions: https://stackoverflow.com/questions/52449976/how-to-use-vw-and-vh-css-with-react-native