Uses css classes for styling instead of inline styles

[tuckerconnelly]

This patch solves the following problem

Compatibility with Uranium and ultimately Carbon UI.

More generally, adds compatibility with classnames. Currently, any library that uses classnames to apply styles, or any user-provided css classes, will get overridden by RNW's inline styles.

This also pretty significantly reduces the css footprint, and I wouldn't be surprised if it also improved performance. material-ui noticed a 25% decrease in performance when moving to inline styles from classes.

Test plan

Updated the jest test snapshots, and confirmed it worked with the carbon ui documentation site.

This pull request

• includes documentation
• includes tests
• includes an interactive example
• includes screenshots/videos

[necolas]

material-ui noticed a 25% decrease in performance when moving to inline styles from classes

Noticed similar on an internal mobile.twitter.com branch. Now that this library essentially has full support for RN styles and i18n, we can go back to introducing a more efficient className implementation that operates at the declaration level (which styletron recently emulated).

[remon-nashid]

I'm still new to React-native, so my question is mainly to learn.

I had the impression that js inline styling solves some CSS issues; such as eliminating dead code, avoid global scoping and minification. Also IMO it's a gateway to lots of fun programmable styling, such as react-native-extended-stylesheet.

I'm wondering what advantages does CSS bring. Also if it's still possible with this merge request to use inline styling besides CSS.

[remon-nashid]

Alright, checked the merge request as well as the underlying library (classnames). Seems that inline styling will still work and that library is actually interesting. Thanks!

[necolas]

I'm closing this because it doesn't really solve the problem and creates others. Any styles set via RNW will still override the styles set via className. It only works if you use AppRegistry. And the classnames aren't obfuscated. I'll be working on a solution to the problem you raise. Thanks

[necolas]

Hey, try using 0.0.62. Styles are resolved to className where possible—which should allow you to use Uranium—and rendering performance is about 13x better against the benchmarks.

[tuckerconnelly]

Hey yup, it works :) Thanks. It is a little difficult to debug directly though, would be nice if in the future there could be a single classname per element.