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 fil

Answer 1

The whole process of defining styles in my JavaScript caused me a lot of confusion when I first moved over to React Native from Ionic so I hope this helps...

Firstly, you've got to understand that React Native is NOT just an application running in a native WebView. Rather than rendering divs and spans your JavaScript is actually producing higher-level, platform-specific components.

Therefore we can't apply the same styling rules (via external .css stylesheets) like you would a hybrid application written using another framework like Ionic. Well not entirely anyway (see below).

Both options mentioned above are valid solutions. Using:

• Separate JavaScript files to make your styles more modular; and
• Using libraries to transpile CSS to React Native StyleSheet objects.

Note on latter option: Libraries like postcss-js won't enable you to use your CSS the way you normally would i.e. styling based on CSS selectors like .class and #id. Styles will still need to be passed through to components via props.