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

This works for me on the latest React:

I have my stylesheet named CoolTextStyle.js (which is in the same directory as my index.ios.js). And it turns out you dont even need the 'StyleSheet' class

module.exports = 
{
  borderRadius:5
}); 

Then in index.ios.js

import React, { Component, PropTypes } from 'react';
import { View, Text, TextInput,TouchableHighlight,StatusBar } from 'react-native';

var cool_text_style = require('./CoolTextStyle');

export default class delme extends Component 
{
  render() 
  {
    return (
  <View>
    <StatusBar hidden={true} />
    <Text>Login</Text>
    <TextInput placeHolder='UserName' style={cool_text_style}></TextInput>
  </View>
)
  }
}


AppRegistry.registerComponent('delme', () => delme);

Answer 2

Yes you can

• First create a file name style.js and create what ever style you want like the following example:

Style.js

module.exports = {

    "centerRowAligment":{
        flex: 1,
        backgroundColor:"#a22a5f",
        flexDirection: 'row',
        alignItems:"center"
    },
    "centerColumnAligment":{
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column',
        alignItems: 'center'
    }

}

Then in your react file just import it

import styles from './style'

And then use it in the render components

   <View style={styles.centerRowAligment}></View>

This should works fine !

Answer 3

You could simply create a Styles component like so with all your styles...

import { StyleSheet } from "react-native"

export default StyleSheet.create({
   ...
})

Then on any view needing styles, simply require it...

import styles from "./Styles"

Answer 4

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 5

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

 <View style={styles.bgr}>
   ...
 </View>

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.

Answer 6

According to ECMAScript 6, correct way to export your styles would be like this.

style.js

import {StyleSheet} from 'react-native'

export default StyleSheet.create({

container: {
    flex: 1,
    marginTop: 20
},
welcome: {
    textAlign: 'center'
}
});

Then in your main JS file you can import like this.

import styles from './style'