React Native External Stylesheet

Question

Is there a way in React Native that I can put all of my styles in a single file so it can easily be maintained (from my perspective) like in HTML we have a .css file.

And also I have a module where there are different styles based on a current user.

Answer 1

You could add this module to your pipeline, and create a Gulp, or Webpack task to transpile the CSS into JavaScript.

https://github.com/sabeurthabti/react-native-css

In my experience you're best of not using the same CSS for web and react native, because React Native's stylesheets don't actually cascade.

---

Or if you're willing to change your pipeline a little bit, PostCSS, which is a CSS4 to CSS3 transpiler, which supports all the features of SASS, can also be used to transpile, CSS to JavaScript

https://github.com/postcss/postcss-js

Answer 2

You can try my project rn-less.

It isolates your stylesheet from your jsx/js files with less.js.

And I have a VS Code extension for it, with which you can jump between .less files and .js/.jsx files easily.