do I need to maintain styling in 2 places when creating a MX8 web + native mobile app?

3
We are currently working a proj where we need a website and native app. The styling is different to what we are used to. if anyone has any tips, everything is welcome.     https://docs.mendix.com/howto/mobile/native-styling https://docs.mendix.com/howto/mobile/how-to-use-native-styling (sorry cant select mx8 in mendix version forum meta data)
asked
2 answers
4

React Native is not supporting the full browser CSS as we know it. It contains only a subset of browser's CSS properties for styling. Also there is no support for complex CSS selectors. 

“What is the difference with regular CSS and React Native's CSS?

React Native's styling works a bit differently compared to regular CSS:

  • There is no cascade, CSS properties are not inherited from parent elements.
  • No complex CSS selectors. There is only support for simple CSS class selector that maps 1-to-1 with an element.
  • Many CSS properties are element specific, e.g. you can not give Text properties (font-family, etc.) to a View and vice versa.
  • React Native only implements a subset of CSS. The more complex CSS features are left out, and what you get is a set of CSS features that work well to do styling in both browsers and native apps.
  • There are some new styling properties in React Native that do not exist in regular CSS.

Even with the above differences, React Native's CSS implementation is still almost fully compatible with the one in Web browsers. You can think of it as a stricter subset of the CSS that is used in browsers.

The supported styling depends on the element that you want to style. You can have a look at the example apps, or this cheat sheet when writing your styles: https://github.com/vhpoet/react-native-styling-cheat-sheet

If you plan to use the same CSS files for both React Native and Web, then I suggest that you build your app "React Native first". It is much easier to build the app with React Native's styling limitations, and then make it work for web using React Native for Web.”, credits.

So yes you need to maintain 2 different stylesheets, but you can have different approaches:

  1. Keep them seperated.
  2. Native first and extend with extra web styling

 

Hope this helps.

answered
1

It is possible to import css/sass files for use in react native styling. This should allow for some reuse of styling

https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

answered