Styling is an integral part of front end development, noone can deny that. An app has to look nice as well! And it’s not a pleasant task for all JavaScript/FrontEnd devs; especially when someone has just started with web development. This is where styled components come and save the day, by making styling simpler specifically for React Native apps in my opinion.

What about Styled Components

Styled Components is a CSS-in-JS library that “pushes” developers to write CSS per component (and have style for this component in one place only). They utilize the tagged template literals ES2015 feature for their syntax. This new ES2015 syntax might look a bit awkward in the beginning but it’s easy to grasp the concept after all!

Why I felt the need to try it out

In React Native, CSS is already coded in JavaScript and developers need to create JavaScript objects with keys the style properties written in camel casing, instead of separating words with dashes as per the “normal” CSS (e.g backgroundColor rather than background-color ).

To be honest I don’t like this JS syntax, and if you are new to web/mobile development, this syntax will make things a bit confusing and harder to grasp. And for a lot of web developers it feels very unintuitive having to write CSS code like that. Here is where styled components enter the scene. They bring back the classic CSS syntax and since they are a CSS-in-JS library as well, they make a good fit for RN.

Let’s see an example of a custom React Native Button component that is styled both with and without styled components.

Image 2: Button component example styled with styled components (on the left) VS RN style property (on the right)

More pros of using styled components

After using them for over a year I have seen more in this library than just syntax. With styled components, you practically assign alias names to your comments and that has the great benefit of making your JSX code very easily readable and understandable. Let’s see an example of a larger component’s JSX

Image 3: Leaderboard list component example

It is easily understandable what this JSX renders by just reading it right?

Also, styled components accept props as values too, meaning that you can assign different values per occasion and depending on your requirements either that’s a condition or a React prop coming from a parent component. To understand this better let’s see the previous example of our Button component but with props this time.

Image 4: Button component styled with styled components and props coming from the caller component

You can convert any component to a styled one, even custom ones by simply invoking the factory function styled() . For example if you have a component called Tab , you can style it by simply wrapping it as an existing styled component as follows:

const CustomTab = styled(Tab)`

.

.

.

`;

The cons of styled components

The only downside I have noticed is that sometimes you have a component that does not need CSS customization at all but you still make it a styled component in order to give it a semantic name and fit inside your JSX. In these cases you create an empty styled component like that:

const UserName = styled.Text``;

Let’s see an example of that case:

Image 5: CustomTextInput component with empty styled component

In the example above we have a custom text input component which is practically a wrapper on top of TextInput RN component. Here we need an empty wrapper element because we always position the component through flex. In the above example it’s the styled component TextInputWrapper .

What do you think?

What do you think about this article? Do you use Styled Components? Or how do you style your RN apps? Offer your perspective and ideas in the comments section below.