React Native global styles

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
    }
});

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>

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'

You may also try react-native-extended-stylesheet that supports global styling variables:

// app.js
EStyleSheet.build({
   buttonColor: 'green'
});

// component.js
var styles = EStyleSheet.create({
  button: {
    backgroundColor: '$buttonColor',
    ...
  }
});