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

none of above answer is perfect in view of segregation. It's a simple javascript require will give you answer for Is there a way in React Native that I can put all of my styles in a single file.

• Just create a folder and file. ex:- MyApp/cssstyle/StyleSheet.js
• then simple module.export the object contains screen names and corresponding styles.

const {StyleSheet} = require('react-native');

module.exports = {

  login: StyleSheet.create({
    bg1: {
      backgroundColor: 'red',
    },
  home: StyleSheet.create({
    bg2: {
      backgroundColor: 'yellow',
    },
  profile: StyleSheet.create({
    bg3: {
      backgroundColor: 'green',
    },

  }),

};

• Now on your main screen(ex: login.js) where you want to apply your styles. require your styles with proper StyleSheet path. in my example it is MyApp/cssstyle/StyleSheet

const styles = require('MyApp/cssstyle/StyleSheet').login

then use it like

 
   ...
 

That's all, by this way you can segregated the styles for different screens and in the mean time you can have all your styles in a single file.