My React Native Style Building Blocks
In this post I will describe my styling workflow in a React Native project. I use Typescript in the code samples but you can still use JavaScript if you like it better 😉
Atomic CSS
So a little introduction. If you are coming from a web-based React background, you should be familiar with the concept of Atomic classes. This concept isn’t a new thing and it is with us since about 2016.
For those who do now know what that concept is - in short, it’s a bunch of classes where you can place them all together to create your own styling,
The most used CSS framework today is probably Bootstrap, where you have some class and by using them you can quickly build the UI you need. Although Bootstrap is considered old — many still use it today. A recent CSS framework is that is becoming popular is tailwindcss.
Taliwind uses heavily the concept of Atomic CSS where you have (a lot of) class names and by putting them all together you can create a complex UI in minutes.
What's the different you wonder?
Well, let us take an analogy to demonstrate. In Bootstrap for the analogy you get a Bootstrap Kitchen, a Bootstrap Bedroom. I mean you have a premade rooms where you can then later customize the things you need, fix the color of the bed, or change the size of the dresser. On the other hand, in Taliwind, the classes are more specific — you get more of a control. Back to the analogy, Taliwind doorknob, a Taliwind floor , a Taliwind sink. Put them all together to construct our own Kitchen.
Another big and important different is the way the two differ is styling. In Taliwind you can work with a fixed sets (spacing, coloring etc) which makes it more agile and less complex for the develops to handle the possible class overrides needed.
Now that we understand the concept of Atomic classes. we can apply the same ideas to React Native.
But wait? Classes in React Native?
Well no, in React Native, of course, we do not use classes but Stylesheets or inline styles.
So what can you do?
Well, I’ve got inspired by @shopify/restyle package. But since I could not use it in my projects (licenses and lawyers, go figure 💼), I’ve needed to implement a simple type-safe system for me to use.
I start by defining the building blocks such as color palette, spacings and also text variants, which are some kind of grouping for text stylings. We can also set breakpoints sizes here as well if we need.
Box & Text where the magic is happing?
Now that we have the theme, in React Native we commonly use View & Text components. Instead, we are going to do use our Box & Text components while doing so, we can provide the styling inline as props to these components.
First, we will interduce the code for both. Later, we can dive in a little further. I use use the Context API to consume the Theme wherever is needed.
Okay, you are still here? so how would you use it? How would that look?
Before we dive into the magic - lets first see an example of how we use these two components to design our UI.
See how clean the code is? No StyleSheet needed? Easy to understand? Am I right? We use the variants for the texts, and we provide a vertical padding using our theme system. We can also use flex-box — Isn’t it cool?
More Complex ? We can still do it!
So what happens in a real life scenario where the code is more complex? Well it turns out since we are using the Context API its not that complex. That’s the beauty of building blocks. We can just consume it wherever we need it- and provide it to any component we want that isn’t using a Box! We can always use a Box for the layout and provide theming using context.
In the following example the button component uses TouchableOpacity and we inject styling using the context.
So How does the magic works?
If you came this far you would probably want to check the full code, but to keep it short and simple — basically we just have helper functions that transform the sizes to actual View & Text props. For example, when you provide a Box component with padding “m” — we convert the “m” to the size set on the theme.
Final Notes
So this is how I use Box & Text components to set the layout for my React Native applications making it super easy to build a clean UI. It’s easy to maintain and if you can use typescript, go for it, the auto-complete is great. In my projects when I need to support default font size or a default font or even fonts in the text variants, its super easy to update, just update the Text component or the Theme and Voilà!
By using the Context API we can also support dark and light modes, branding or anything else just by settings the theme to the provider. Everything else — stays the same!
Hope I inspire you to think outside of the box (get it? box? haha 😁)
Here is the complete repository if you want to take a look
If you want to read more about react native, here is a post about Custom Tab Navigator Using React Navigation & SVG or you can also checkout my post about The Heart of React Native Transform.
Until next time, take care ✌😷
