Global Styling in React Native
Tags: reactnative, tutorial, ios, react
Published: 2020-02-01 15:59:03

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](#section-1)
####[Method 2: Global Stylesheet](#section-2)
####[Method 3: Combine Both Approaches](#section-3)
-----
### Method 1: Custom Components <a name="section-1"></a>
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:
```javascript
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:
```javascript
<BlueText style={color: 'red'}>Red Text!</BlueText>
```


### Method 2: Global Stylesheet <a name="section-2"></a>
Create a single stylesheet (e.g. in the `constants` folder) and manage all styles from inside there.
```javascript
import { StyleSheet } from 'react-native';

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

### Method 3: Combine Both Approaches <a name="section-3"></a>
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:
```javascript
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!*