Why I like using Styled Components in React Native apps — 1x10

Tasos Maroudas
Jul 3, 2018 · 4 min read

This story is part of a series where I am sharing my experiences on React Native, hoping it will prove useful to the React Native community and provide helpful insights.

Season Finale

Today I am posting my final article for this season. I really enjoyed writing React Native related articles during the past 5 months and I will return in September with more posts!

What would you like to see next? More React Native posts or something new? How about something not so technical? Maybe talk about the problems that arise often in work environments or …? Let me know in the comments below! And in case you want to say hi, don’t be shy and contact me on Twitter or send me an email.

Image 1: styled components logo

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.

If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.

About me

Hi there, I’m Tasos; a software engineer that loves web and currently works a lot with React Native and React. I’m the co-founder of Coded Lines software agency where we undertake end-to-end mobile & web projects with emphasis to in-app marketing. If it sounds what you are looking for, please contact me here: tasos.maroudas@codedlines.com. Thanks for stopping by :)

Building With React Native

Technical posts about React Native. What issues we encountered while developing Math Warriors Android game and how we solved them.

Thanks to George Karboulonis.

Tasos Maroudas

Written by

Front End / Mobile Engineer currently working with React Native, React & TypeScript 😃 Part time blogger. Co-Founder of Coded Lines Ltd https://codedlines.com

Building With React Native

Technical posts about React Native. What issues we encountered while developing Math Warriors Android game and how we solved them.