Use CSS in React-Native with rn-css
rn-css is a drop-in replacement for styled-components with a wider support for CSS.
Limitations of styled-components for native
styled-components library comes with styled-components/native to handle the development of components in React Native. This sub-library presents a major drawback: the range of supported css is very limited. Here is a list of the lacking features
- Units (em, rem, pt, pc, %, …)
- Media-queries
- Hover effects
- Transitions
- Animations
- text-overflow
- overflow (scroll)
- z-index
Those limitations make it quite complicated to develop a project for both React-Native AND React-Native-Web.
Fixing those limitations directly within styled-components appeared to be impossible due to the architecture of the original styled-components project. Basically, we are facing a library that was designed for web and then patched to support React-Native.
We needed something that was working the other way around. And here it is, meet rn-css
Presentation of rn-css
rn-css works perfectly fine in React-Native and React-Native-Web projects. You can use it easily in existing projects by replacing all occurrences of styled-components/native by rn-css within your code.
Here is an overview of the CSS that you will get access to:
- Units (em, rem, pt, pc, %, …)
- Media-queries
- Hover effects
- text-overflow
- unified z-index behavior
- min, max and calc support within your css
There are also 3 important added features:
- Inject CSS style as a CSS string
- Convert any CSS string into React-Native style
- Access the em current value to programmatically convert pixels into em
Let’s see those into details:
CSS units
This is the main feature. Check out how you can create a circle that will adapt to the font size of the text without any calculation on your side.
Media Query
Using media queries in rn-css is quite straight forward. Let’s decrease our circle based on the size of the screen:
Hover
Using &:hover, you can add some style that will be applied only on hover. This relies on onMouseEnter/ onMouseLeave props and will be available only for web.
Ellipsis
For responsive design, you probably want your text to shrink and use ellipsis when too long?
You can achieve this by using text-overflow: ellipsis in rn-css
Inline css injection
This is my favorite feature. Did you ever find annoying to create a new styled-component just to add a margin or some small style details? You don’t need that anymore. Just inject the style as an inline prop:
Access current em value
This feature might not look like it, but it can be very handy. You can access the current value of em to manually convert pixels into em.
Let’s say that you are building a calendar. You have 3 possible layouts: The current day only, 3 days, or the whole week, and the user can pick one in a dropdown. When the screen is too small, you need to remove the “week” option from the dropdown. Here is how you could do it in rn-css
I remind you that the value of em changes when a parent component uses font-size instruction.
Convert CSS into RN style
Finally, you might wonder how you can use CSS with components or libraries that do not rely on rn-css? Well, you can simply convert your css into React-Native style object with the function cssToRNStyle .
Imagine that you receive some css style from an html document, and you need to reflect this style within your app. You could directly inject the css into your component:
The second parameter of cssToRNStyle will make it possible to convert accurately em units that might be present within the css string.
Conclusion
I hope this article will help you improve your dev experience with cross-plateform apps in React-Native. I didn’t mention some other features of rn-css that you can check out in the Readme. There are also some new features still in development to add yet another range of css to React Native (overflow, transitions, animations…).
Happy coding!
