Sharing Styles In React Native

If you’re new to React Native, you may be wondering about the best way to share styles throughout your application.

Generally speaking, you’ll want to keep a lot of your styling rules component-specific where possible. This way, the components remain modular and can be easily transported or moved around without relying on an external resource.

This isn’t a hard and fast rule (and is in fact more of an opinion), but it’s often good to think in this way. Keep components as self-enclosed and as modular as possible.

There will be cases, however, where global styling is a requirement within your React Native project.

With that said, let’s go over a few different approaches with regarding to sharing styles!

Sharing individual values

The use-case here is that you have specific values that you’d like to use throughout the app in different ways.

These aren’t “styles” as such. By this, we mean these values aren’t necessarily objects that can be added directly to React Native elements under the style prop.

As an example, you can think of hex codes (or colours), like this:

const skyBlue = "#00c0ff"
const darkMango = "#ff5500"

export { skyBlue, darkMango }

It’s often handy to extract these kind of values, as the colours (or hex codes) can be easily applied and utilised in lots of different ways, for instance:

import { skyBlue, darkMango } from "./colours"

...

StyleSheet.create({
    block: {
        backgroundColor: skyBlue,
        height: 400,
        width: 100,
    },
    blockText: {
        color: darkMango
    }
})

As you can see here, the colours can be applied as a background colour, or applied directly to Text elements. This means you aren’t restricted to defining specific styles that you’d like to share, but you have a reference to the colours or properties, instead.

This approach is quite flexible, and it’s a decent approach for sharing theme-related styling or branding in this way.

Sharing variables throughout your React Native application in this manner isn’t necessarily limited to styling — it can be useful for lots of different purposes!

Sharing individual styles directly

Similarly, you can also do this kind of thing:

const colourClasses = {
    blueBackground: {
        backgroundColor: "#12aedc"
    },
    pinkBackground: {
        backgroundColor: "#ff67c7"
    },
    orangeBackground: {
        backgroundColor: "#ee803c"
    }
}

export { colourClasses }

So instead of defining only colours (hex code values) — we’re defining something we can use directly within our StyleSheet declarations.

More specifically, objects.

Like so:

import { colourClasses } from "./colourClasses.js"

...

StyleSheet.create({
    someBlueBlock: {
        ...colourClasses.blueBackground,
        height: 100,
        width: 100,
    },
});

In this case, we’re delegating the full style definition (ie. { backgroundColor: "#3fa8f9" }) to the exported member, instead.

We’re using a “piece” of styling directly in the StyleSheet declaration.

The benefit here is that we don’t need to type out the “thing” to style each time (the background), but instead, we can use the destructured object directly within our StyleSheet definition to do this for us.

As opposed to the previous approach, this time we have portable styles that can be shared and slotted in to StyleSheet declarations directly, on a per-component basis, as and when required.

Having global styles accessible in this manner throughout your React Native application can be extremely useful!

Sharing full StyleSheets

The last approach we will go over is the sharing of full StyleSheets.

This is arguably the most common and conventional approach to implementing a global styling solution within your React Native app:

// myCustomStyles.js
import { StyleSheet } from "react-native"

export default StyleSheet.create({
    someElement: {
        backgroundColor: "red",
        height: 50,
        width: 300,
    },
});

It’s as simple as defining the StyleSheet in its own file, and then exporting it for use throughout the entire application. React Native components that need to utilise or share these global styles can simply import the StyleSheet as required.

This StyleSheet can then be imported and used as follows:

import myCustomStyles from "./myCustomStyles"

...

<View style={myCustomStyles.someElement} />

To summarise

We’ve covered 3 separate approaches to sharing styles throughout your React Native application.

All approaches provide a way to effectively declare “global” style rules — these can be imported in to any component that requires them.

The approaches are as follows:

1. Define individual variables to reference as values within the relevant StyleSheet(s)
2. Define individual style properties (objects) that can be injected into the relevant StyleSheet(s) (via object destructuring) as required
3. Define and export full StyleSheets — the most conventional global styling solution in React Native

I hope you’ve enjoyed this article and that you’ve gained some insight regarding global styles in React Native and how to share styles for use within all of your components!

Check out the React Native section (or more generically, the React section) for similar articles.

← Back to blog