Post

Day 24: Styling in #ReactNative We’re all familiar with the built-in StyleSheet API, but its simplicity leaves large gaps for improvement, and thankfully over the years many such solutions have sprung up. Today I’ll go over some of the more popular ones.

Styled Components: One of the earliest solutions for styling from @mxstbr.com, I saw it first demoed at ReactNL 2016. The dream of one styling syntax for web and native was tantalizing; however the performance overhead from runtime CSS-in-JS for web left much to be desired. styled-components.com

Restyle: A relatively new contender from Shopify, this project provides a very simple set of wrappers around a theme object constructed from your design tokens. It seems extremely lightweight, and would work very well with teams that have a solid design system in place. shopify.github.io/restyle/

StyleX: This project seems to have originated within Instagram and only seems to have been open-sourced last year. Looking through the docs, it does indeed seem very interesting, taking more of a code-based (rather than config-based) approach to theming. stylexjs.com

Unistyles: If you want the built-in StyleSheet API on steroids, Unistyles is the best bet. It adds theme support, along with a number of other quality-of-life improvements (like variants, including compounds). Frankly, I’ve got nothing but good things to say about it. www.unistyl.es

Aside: If I could have one wish granted for Unistyles, it would be handy if it exposed a styled() helper (some of our clients ask for it).

NativeWind: Without turning this into a Tailwind vs not-Tailwind holy war, I’ll just say if you like Tailwind and you want it in React Native, NativeWind is the answer. There isn't 100% compatibility between web and native, but its close enough and the gap is always closing. www.nativewind.dev

As a Tailwind enjoyer, I will readily admit that it can be a little rough sometimes with NativeWind; I’ve had a number of issues while v4 was in beta. Now that its properly released, I hope 2025 is its glow-up year.

Tamagui: Tamagui looks really cool, I just haven’t had a chance to play with it outside of a few toy examples. The documentation is top-notch, and it works with React Native Web too. Definitely one to keep an eye on in 2025 too. tamagui.dev

With all these style libraries, its useful to see some sort of benchmark, and luckily for me, there is one: github.com/efstathiosnt... The newest results show dramatic improvements across the board, with most of the frameworks mentioned above performing *better* than the built-in StyleSheet API.