I have seen in many projects that people use StyledComponet for RN, and to be honest, I can't see any benefit of using StyledComponent over StyleSheet for RN.
These are the main pains that devs can face while using StyledComponent in RN:
- You use string literal syntax therefore, there is no auto-completion
- You have to name things(usually we see
Styled**) which is annoying. Especially for large codebases. - Most of the time, looking at the render function itself doesn't give you a good overview of the components used, and you need to travel around the code to see what this component is. Is it a simple
Viewor another custom component, etc... - This one is more about my feeling, and unfortunately, I haven't found a good benchmarking approach for it yet, but I think it somehow affects the performance. I can see that under the hood,
StyledComponentgeneratesStyleSheetobject and keeps it in an object with a randomly generated hash value to pick the same style object for the next time if everything is the same. Still, there is a process for converting those written styles to the RN styles, and all these are happening on the JS side. Although it's fast and not expensive, in large scale codebases with tons of components, it could be an overhead that is not necessary.
One of the main reasons people choose it as their styling approach for their project is that most of the RN devs are coming from the web background, and StyledComponent allows them to write "CSS like" styles. It doesn't make sense to me because you have very well-typed styles that you can use more straightforward and faster by your code editor.
I'm sharing my thoughts on this topic to get more insight from others and see if there is a strong reason for using StyledComponent in RN projects.
