Support calc about css-to-react-native-transform HOT 11 OPEN

Actually I think I misunderstood the form the output takes, as viewport widths are not converted to function calls by this module. I guess I'll have to go without.

from css-to-react-native-transform.

How did you get viewport widths to work in the first place? I'm now getting the error "JSON value '30vw' of type NSString cannot be converted to a ABI33_0_0YGValue. Did you forget the % or pt suffix?".

from css-to-react-native-transform.

Hey @xsanda.

So let me explain a bit about calc and the viewport units.

Both of them need to be calculated at runtime. The viewport units work because they run through a special function that uses the Dimensions module of React Native to check what the viewport width and height is.

calc is a bit trickier to handle, because when you use width or height inside of calc, the size of the elements needs to be known. In React Native it's only possible to get the size of an element asynchronously, which means that you need to first get the value, and then re-render the component.

from css-to-react-native-transform.

If you only use exact and viewport values (as opposed to percentages), then why would calculating calc(50vw + 5 px) be any harder than calculating 50vw? The output is in pixels anyway.

from css-to-react-native-transform.

If you only use exact and viewport values (as opposed to percentages), then why would calculating calc(50vw + 5 px) be any harder than calculating 50vw? The output is in pixels anyway.

That's easy to handle, the problem is that calc is really useful when used with width and height (e.g. https://css-tricks.com/a-couple-of-use-cases-for-calc/).

I really would not like to add support for CSS features that are only partially implemented.

from css-to-react-native-transform.

So calc with viewport units is easy, but calc with width/height + percentages is difficult to implement.

from css-to-react-native-transform.

Also, I have made a proof of concept of using percentages and calc. I would just need to finish writing a babel plugin for it.

Here's an example:
https://github.com/kristerkari/css-calc-proof-of-concept/blob/master/App.js#L47-L61

from css-to-react-native-transform.

I have also created a library that turns calc values to pixels based on the viewport/element size:
https://github.com/kristerkari/css-calc-transform/blob/master/__tests__/index.spec.js

from css-to-react-native-transform.

Hey guys, will the css-calc-transform be added to this repo?

from css-to-react-native-transform.

Hey guys, will the css-calc-transform be added to this repo? +1

from css-to-react-native-transform.

@NE-SmallTown @iambool Look at my comment above. It can not just be added, calc() needs values that can only be known at runtime.

from css-to-react-native-transform.