React Native global styles

I'm new with React and I understand the benefits of the component based, inline styles. But I'm wondering if there is a decent way to have some sort of global style. For instance, I'd like to use the same Text and Button coloring throughout my app.

Rather than repeat in every component(and subsequently have to change it in x places if need be), my initial thought is to create a 'base' StyleSheet class in it own file and import it in my components.

Is there a better or more 'React' way?

Solution 1:

You may create a reusable stylesheet. Example:

style.js

'use strict';
import { StyleSheet } from 'react-native';

module.exports = StyleSheet.create({
    alwaysred: {
        backgroundColor: 'red',
        height: 100,
        width: 100,
    },
});

In your component:

const s = require('./style');

...then:

<View style={s.alwaysred} ></View>

Solution 2:

Create a file for your styles (I.E., Style.js).

Here is an example:

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1
  },
  welcome: {
    fontSize: 20
  }
});

In any of the files you want to use your style, add the following:

import styles from './Style'

Solution 3:

If you just wanted to set some global variables you could try.

AppStyles.js

export default AppStyles = {
    colour: {
        background: '#f4f9fd',
        font: '#434e5a',
        primary: '#ff3b30'
    }
}

index.ios.js

import AppStyles from './AppStyles';

const styles = StyleSheet.create({
    container: {
        backgroundColor: AppStyles.colour.background
    }
});