React-native – React Native global styles

react-native

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?

Best Solution

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>