Structuring Styling in React Native
Let’s face it. Organising styles in React Native can be a complete nightmare. It’s so easy to just chuck our styles into our components inline instead of creating Stylesheets. However, this does make the code a lot harder to read as you invariably mix up styling code with component logic, which in turn makes reading and debugging your code a headache inducing task. 😵
We can make our components cleaner by extracting all inline styles and organising them in a unified Stylesheet, which we then access via React hooks. Here’s how we organise our styling!
Basic structure
/styles
|- palette.ts
|- styles.ts
|- themes.ts/palette.ts
First, we create a palette object where we will define all the colours we want to use in our app, and give them names that are easy to remember instead of HEX/RGB values. You can also define your font families in the same palette object.
For RGBA values, we like to append the alpha value to the end of the name to help us remember their opacity. Don’t be afraid to be creative though ;)
Why create a palette object?
Extracting your colours and fonts into a palette object effectively removes human errors when it comes to typing out hex codes and font names. Imagine having to type “#EA1515” or “‘Poppins’, sans-serif” all the time — you could end up with typos like “#EA2525” or “Poppins sans-serif” which would definitely mess up your styling.
Defining these variables in a palette object ensures consistency in your colours and fonts by making the way you access these variables easier, and also reduces human errors.
/themes.ts
Now that all our colours have been defined in palette.ts, we now have the building blocks to create a theme from our palette. The theme object is where we will define primary colours, fonts, spacings, etc. Which will then be accessed from our stylesheet using a hook.
We want to access our themes through hooks because it gives us flexibility in the future to create different themes without worrying too much about it messing up our styles in the future.
Let’s say we want to create a Christmas theme with different colours just for Christmas. All we have to do is create a christmasTheme object, by feeding our useTheme hook a parameter and returning the correct theme based on the fed parameter.
We are now ready to create our stylesheet!
/styles.ts
From here, we can define our stylesheet like how we normally would with CSS. We like to wrap our stylesheet in a hook as well.
Usage in a component:
Handling dynamic styling
Of course then comes the issue of dynamic styling when we sometimes have components from external libraries that only accept arrays of colours or specific variables.
Take react-native-linear-gradient for example. To get the gradient effect, an array of colours need to be passed directly into the colours prop, which is separate of the style prop. The most basic usage being:
In order to make this dynamic, we can define the different colour variants inside our theme object:
We will then be able to dynamically change the colours of the gradient by doing something like this, while still using our theme colours:
Why use hooks?
Using hooks to access our styles and our themes ensures that our styles are dynamically updated. It also gives us the flexibility to create dark, light, and seasonal themes without worrying about the styles being inconsistent.
And.. voila!
That’s how we organise and separate our styles from our components in React Native. 🎉
Of course this is just scratching the surface. Take it a step further and create another object for commonly used styles like margins, padding, and alignment. Go crazy! Define breakpoints, create more themes — and most importantly, keep your code clean. 😉
