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

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 2

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 3

I agree to @Chris Geirman solution. you can just create stylesSheet as mention above by Chris and import to any view. In case if you want to merge external styleSheet to your individual view/component stylesheet then you can use ES6 new feature Object.assign like so:

styles = require('./StyleSheet');

const viewStyle = Object.assign(styles, StyleSheet.create({ ... }); );

Answer 4

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 5

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'

Answer 6

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.