add w-auto and h-auto

[jeffreyyoung]

No description provided.

[z0al]

Thanks for opening this @jeffreyyoung 👏

Tip: To fix linting simply update your branch with the master and run

yarn format

It looks good to me but I'm still not sure if auto actually works as expected. On React Native Styling Cheat Sheet it's written that:

properties with default value auto marked with asterisk are do not actually have auto as their default value, they just behave like if they would in css if they had auto as their value. auto is not valid value for those properties in react-native

And both width and height are marked with *.

I couldn't find something in the official docs. Do you have a link for that?

[jeffreyyoung]

ooo good catch! I saw that cheat sheet, and assumed "auto" was a valid value 🤦‍♂️. I'm struggling to find documentation on using "auto" for height and width. These are a few random things I found:

• according to the StyleSheet flow types the valid width/height values are null | number | string (not exactly helpful to us 😅) https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/StyleSheetTypes.js#L30

• I found one usage of height: "auto" in this test in the react-native repo https://github.com/facebook/react-native/blob/6e6443afd04a847ef23fb6254a84e48c70b45896/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js#L222

• I see some native code about parsing "auto" to a "yoga value", and then using auto in the context of setting width

From trying the following code samples I see that

• <View style={[{"width": 25, "height": 25, backgroundColor: "purple"}, {"width": "yay"}]}/> <-- this throws an error
• <View style={[{"width": 25, "height": 25, backgroundColor: "purple"}, {"width": "auto"}]}/> <-- this sets the width to behave like css auto
• <View style={[{"width": 25, "height": 25, backgroundColor: "purple"}, {"width": null}]}/> <-- this also sets the width to behave like css auto

Honestly not 100% sure if "auto" is actually a supported value since it isn't well documented, however since I notice it's handled in the code I think it miiiight be. 🤷‍♂️

anyways I've been using this library in a side project and am really enjoying it and appreciate your work!

[z0al]

Wow, great research, Thanks :)

The React Native example & Yoga code are enough for me to continue with this PR. We can always investigate this again if someone reports otherwise.

[z0al]

LGTM. Thank you 🙇

A git rebase & yarn format should fix the conflicts & lining issues.

[jeffreyyoung]

sounds good! Just updated the pr

[github-actions]

🎉 This PR is included in version 0.11.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀