Styles in React Native: A Case Study
A lot of great new tools are emerging around styles in React and React Native. Styled-components and Airbnb’s react-with-styles are both amazing and worth considering for your React Native project.
The purpose of this article however, is to analyze the quantitative usage of styles in React Native, using statistics from a production app.
Let’s begin.
The Data
Here are all of the styles from my latest app, excluding the more obscure ones that were used less than five times.
Surprised? I was a bit. I was almost certain to find a lot more flex usage than position but it turned out to be the other way around. This is not good! Using flexbox in React Native is essential to layout fidelity across many devices both iOS and Android.
Revealing bad habits is useful, but my aim in compiling this data was to prove what I suspected to be true — that the majority of the style definitions I had made were actually layout definitions. And I was right: flex and another layout definitions like position, padding, margin, etc. dominated my styles.
So that made me wonder how we came to call something “style” that is actually layout. Looking one history of css, the word “layout” only appears four times. Here, not in the best of ways:
It is now common that books are made with CSS. Not all books, though, because CSS is still missing features for the more complex layouts. That is one direction in which the language is being extended.
Css never fully accounted for a responsive layout system. 20 years later, we can be thankful for the advent of flexbox.
While having styles is welcoming feature to web developers like me who moved to working on React Native, it could be that we are bending the wrong way to bring css into something that is better suited for something else.
I acknowledge the write-once, run-anywhere core React Native paradigm here where css-like styles lend a role of bridging the divide between web and mobile. But if the majority of RN styles concern layout, perhaps React architecture in a non-css environment(native) is something to remark upon.
After coming to this realization, I decided to do something about it. I wrote about the process in my last post but essentially I took layout out of my style definitions and moved them to a wrapped component definition where they could be set through props. I had already been doing this a bit with my wrapped Text component so I extended it to a wrapper around the core RN View. The result was react-native-view.
With that in place I was able to move the the majority of styles out of my stylesheets into the actual component instances.
<Row dial={5} flex>This very concise View instance actually defines 4 styles, all of which are flexbox layout properties. The huge benefit here is in readability and flexibility (pardon the pun).
All this comes back to my point that layout is not style. Layout is more variable within the app and is often not as reusable like styles are. Styled-components or usage of Stylesheet has it’s place, but only for defining styles. If only a third or less of style definitions are non-layout, then we should be considering a break from css with React Native and perhaps also for React Web.
Conclusion
I haven’t removed stylesheets from all of my components, but they are certainly out of my containers. I confess to having a few inline styles that go off the screen. Also, I think styled-components is a great accomplishment. I just wonder if the data here proves that React Native could be a launching point for a new system for handling component properties, not necessarily styles. HTML and css had separate concerns for a reason. But that was for the web, before we cared about responsive design, and before we had the tools we have today.
