Faster React Native styles with styled-components đź’…
This year I have decided to improve my JavaScript skills by enrolling into Rocketseat’s bootcamp, which is focused on Node, React and React Native. I’m halfway through it and it’s been a few weeks full of discovering new and better ways to code.
But today I’d like to focus on mobile development and how to work with React Native styles in an easier and faster way using styled-components. At the end of this article, you’ll be able to code your mobile prototypes faster than ever. So, let’s launch this rocket! 🚀
The default way of styling
React Native already comes with a way for us to style our mobile components, which is by using plain old JavaScript. This is all possible with a CSS abstraction that the React Native team has created, called StyleSheet.
With StyleSheet we’ll have some JavaScript objects which will have CSS-like rules and properties inside of them. Then, we pass these objects to a component’s style prop to bring some life to it.
Let’s take a look at a classic “Hello world” example:

Here we have a container, which takes up all of the space available on screen, a white content box which is centered on screen and some text.
Keep in mind that React Native uses Flexbox to position its components
Note how all rules are very similar to CSS rules we use on the web, but not quite the same. Sometimes this can slow us down when writing styles because we’ll constantly need to remember that we must use Flexbox only to position our components and we can never use hyphenated CSS rules because we’re working on a JavaScript object.
Also, you may have noticed that it’s impossible to use CSS shorthand properties like margin: 20px or margin: 0 20px. So it can be very frustrating to remember all this.
But fear not for there’s a very simple solution!
styled-components đź’…
With styled-components we have all of the same stuff that’s available on the web and more. Meaning there’s no need to remember specific rules when coding React Native styles, we’ll just do what we’ve always been doing on the web — except we’ll still need to use Flexbox only to align everything on screen.

Styled-components gives us the possibility to use CSS shorthand properties and the same hyphenated syntax we’re so used to. It’s also possible to use variables to make it easier when handling theming, for example. Plus, everything looks way more organized and reusable!
Which means we can apply some default styles to our styled components, make them change depending on props provided to them, and import them on every screen or component we need.
Looking at how similar to web CSS and how modular styled-components are, we could also say that it makes it much easier to transform a web project into a mobile one.
Prototyping
Prototyping can be done much faster now that we don’t need to worry about specific CSS-like rules and properties.

Now it’s possible to use an app like Figma to prototype apps on a design level, and when we’re happy with the results, we can simply copy the CSS it provides and paste them into our styled-components. Though it’s recommended to pay attention to these auto-generated CSS because some of them may not work very well for your project — like hard-coded widths, heights and absolute positions.
Conclusion
Writing React Native styles can be just like writing web styles when using styled-components and we gain some perks with it. We can also use this same package with React web apps, so almost every style code is the same both on platforms; web and mobile. Also, prototyping is much faster using a design app which gives us some auto-generated CSS providing practical copy-pasting.
That’s all, folks! 👋
