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.
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
backgroundColor rather than
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.
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
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.
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:
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
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.
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: email@example.com. Thanks for stopping by :)