Global Styling in React Native

If you've spent any time with React Native, you've surely noticed that all styling is done with JavaScript, not CSS.

For developers who are experienced with React (or web development in general) but not React Native, the idea of styling your components without the use of CSS classes may be frustrating.

I know it was for me.

In this post, I'm going to tackle the issue of implementing global styling in a React Native app.

Here are three ways to apply global styling to a React Native app:

Table Of Contents

Method 1: Custom Components

Method 2: Global Stylesheet

Method 3: Combine Both Approaches

---

Method 1: Custom Components

Since React is component-driven, the most intuitive way is to create custom components (e.g. custom text fields, custom buttons, etc.), define the styles within each component, and reuse these components throughout the app.

For example, to use a specific font color throughout the app:

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const BlueText = props => {
  return(
    <Text style={{ ...styles.blueText, ...props.style }}>{props.children}</Text>
  );
};

const styles = StyleSheet.create({
  blueText: {
    color: 'blue'
  }
});

export default BlueText;

Note: By using the spread operator in the style property, we can overwrite any styling in this custom component when we actually implement the component.

For instance, in the app itself, we could directly overwrite the blue color property by adding some inline styling:

<BlueText style={color: 'red'}>Red Text!</BlueText>

Method 2: Global Stylesheet

Create a single stylesheet (e.g. in the constants folder) and manage all styles from inside there.

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  blueText: {
    color: 'blue'
  },
  redText: {
    color: 'red'
  }
});

Method 3: Combine Both Approaches

Since React is component-driven, it might make more sense to focus on creating custom components to manage global styles.

However, you can also use a global stylesheet in the same app for several reasons:

• First, sometimes it doesn't really make sense to create a brand-new component. Adding a new style to your stylesheet (like a CSS class) and applying it to the component in question can be much more efficient in this case.
• You may want to style a custom component in a slightly different way. You may want to do this multiple times, too, e.g. applying different font sizes (14, 16, 18, etc.) to buttons that are otherwise styled identically.
  • In this case, it might make more sense to create smaller style objects in your global stylesheet (e.g. fontSmall, fontMed), handle the different property (or properties) in there, and then reference it in the style property of the custom component like so:

import GlobalStyles from './constants/GlobalStyles';
...
<Custom Button style={GlobalStyles.fontSmall} title='Tap Me' onPress={handlePress} />

(Remember, the styles from the global stylesheet are overwriting the default component styles because of how we used the spread operator when defining the style property in the custom component!)

How do you approach styling in React Native? Share your thoughts below!

Comments

[MathisBarre]

Great article ! I use to use dynamic stylesheets extracted from the main component file like you can see here : freecontent.manning.com/applying-a... (List 5). But this seems to not work with TypeScript. Create component should be a better solution i think

[MathisBarre]

In fact, it works with typeScript if you add the correct type (TextStyle or ViewStyle)

[Nathan]

I think an alternate approach that scales better is to define local components that have styles pre-configured, with the ability to overwrite them. That way you don't have to reference the styles all over the place (that sounds arduous).

Thank you for the ideas here though. :) I appreciate you taking the time to write it out for others to review :D