[React Native] Expand supported CSS for React Native

I would like to start a discussion on expanding the CSS supported by styled-components/native. Primary items of interest:

• rem/em/viewport units
• global syles
• media queries
• subset of pseudo classes

It would seem that some of this functionality could be included in css-to-react-native… further improving the convenience of writing styles for React Native components with styled-components. @jacobp100, this looks to be your domain.

It appears this has been discussed in at least a limited manner, but that was in context of a specific method of accomplishing these features and was some time ago.

Looking to precedent in styled-components

Based on the inclusion of shortand and convenient syntax for properties like transform, it seems that styled-components is not limiting itself to simple mapping of styles to RN. (https://www.styled-components.com/docs/basics#react-native)

Looking elsewhere in the React Native ecosystem

• https://github.com/vitalets/react-native-extended-stylesheet adds extended Stylesheets for React Native and adds a lot of convenient CSS functionality (to name a few: global styles, rem units, media queries, some pseudo classes).
• Adds viewport units: https://github.com/jmstout/react-native-viewport-units (used w/ multiplication).
• Method to add em units: https://medium.com/@elieslama/responsive-design-in-react-native-876ea9cd72a8
• It would seem that keyframes could be supported by mapping to usage of the Animated API. This may not be on the “low hanging fruit” side of the difficulty spectrum though.
• Linear gradients: https://github.com/styled-components/styled-components/issues/1170

Addressing template questions

• How is this product-centric? By allowing usage of em/rem units, viewport units, and media queries… creating native apps in a responsive manner (so they look ideal on all devices) would become much easier. Other included items improve convenience as well.

• How does it make workarounds straight forward? Any functionality that is included eliminates the need for using helper libraries or each app having their own method to deal with responsiveness of their styles.

Limitations of React Native in regards to styling.

As discussed here: https://github.com/styled-components/styled-components/issues/1243, some css properties (such as text-transform) aren’t going to be easy to support, as limitations in React Native prevent them. This discussion is meant for CSS that can be supported (as evidenced elsewhere in the React Native ecosystem) with the current state of React Native.

Related issues

• https://github.com/styled-components/styled-components/issues/1243
• https://github.com/styled-components/styled-components/issues/1170
• https://github.com/styled-components/styled-components/pull/489 *https://github.com/styled-components/styled-components/issues/835#issuecomment-313136838
• I’m sure others that I don’t have the time to hunt down.

[henrymoulton]

I think what’s changed in the last 2/3 years for React Native developers is that they recognise that some scaling is required across device sizes - React Native Extended Stylesheet’s increased download count might support this claim.

Having a way to achieve this inside of Styled Components would be ideal.

[micimize]

@jacobp100 I think the reasons for rejecting #489 should be reconsidered. The reasons given, as far as I can tell: 1. hesitance to take on more/incorrect dependencies 2. the consideration of a more general solution in #504 3. “nobody has asked for this feature”

2 got shot down and 3 is clearly no longer the case, so that just leaves 1. I don’t see why leveraging external libraries today means we can’t replace them later, either with internal implementations or other libraries. If adding extended-stylesheet support is still even close to as simple as 489 makes it look, we could really have most of this functionality by tomorrow.