Bootstrap with React Native (or a sense of) using react-native-picasso

Introduction

Since I started using React Native in 2016 I always loved how you can prototype and layout an app so quickly with it.

You just use CSS classes like with built in StyleSheets. No dependency, no build time you just code your way and see the result live !

As a React developer I never liked the approach of having a single stylesheet and sharing it across components. For mainly two reasons :

1. You’ll have to import useless pieces of styles in all of your components just to access one property of your style object.
2. If you used a same style in multiple of your components and you need to change the appearance of one of them, it’s a pain to refactor. (Not mentioning duplicate codes if you only change one of the properties but keep the rest)

One solution could be to create an override and merge the two styles. Something like that :

I don’t like this approach either because it’s hard to read and by just looking at your style, an other engineer might not understand directly that card2 is an extension of card. Along side with this comes two more issues :

1. You usually forget to remove unused styles (for me it’s laziness) and the sheet quickly becomes a mess
2. Naming collisions which leads to ugly and unrepresentative variable names like “card2”

This is why during my whole journey with React Native I’ve always styled my components in a modular way. By having one stylesheet for every component.

For example for a component called Card I would usually do a folder called Card, and then inside that folder put the component itself Card.js and the styles for it Card.styles.js.

It was my favorite approach for years even though it had some drawbacks.

1. Lots of duplicate code for similar looking components
2. An inexistant sense of global style values (like the default font, default text size, etc…)

This approach is great but it’s hard to maintain consistent across your components. What you can do is create global constants to use for your stylesheets.

This way you can have global theme values and still have a granular control on you components. Pretty much like a styled-components approach.

The reveal

The last few months I gave a break on React Native mainly because I got a new job and I was since then working with React and Bootstrap on the web.

I was amazed about how I could layout a complete page without defining any new CSS class. Just by using Bootstrap’s grid system and classNames.

When I came back to React Native lately I was very frustrated by the fact of creating a new StyleSheet for every component even if it was damn simple. I had to create a whole new file and import it just to put a flex: 1 around my component.

This is when I told myself that we could easily remove this pain by adding an abstraction layer like Bootstrap.

Don’t get me wrong, I know there’s a ton of great UI libraries out there but what I really needed was a simple way to declare my styles without all the boilerplate. Without installing an external full set of ready to use components.

So this is why I just published a library to help anyone to create a design system effortlessly. I was heavily inspired by bootstrap. It’s called react-native-picasso and with this library, you can use classNames like you would on the web.

All the design values (like spacing and colors) are defined in a unique theme object. Then in your components you juste use the property className to build your layout.

Example : <View className=”flex-1 flex-row” /> would result into a view with flex: 1 and a flexDirection: ‘row’

You can even define spacing values or colors to have a single source of truth for your design system. Just like bootstrap. For example this little line of code :

Translates into :

All the classNames are computed and translated into React Native StyleSheets. You won’t get any performance drawback !

One more full example. Let’s take the following screen :

You can easily create this layout with no StyleSheet and in only 40 lines of code. Just using the built-in className property

Thanks for reading and if you like it don’t forget to spread the word about react-native-picasso !

Full documentation and code are available here : https://github.com/meienberger/react-native-picasso

meienberger/react-native-picasso

TLDR: I’ve built a Bootstrap like theming library for React Native https://github.com/meienberger/react-native-picasso