Tamagui Beta

Hacker News

Share card

Tamagui Beta

Previously shown here[0], Tamagui is now in beta. It’s a UI kit for React Native & Web with an optimizing compiler. It's quite different from a typical UI kit in that it supports the compiler not only extracts styles at build-time, but also extracts inline styles, even if they use logic like ternaries or conditional spreads. Further, the compiler flattens any styled component completely a div (or View on Native) when it can. I've found that about 20% of our views get flattened completely, leading to much flatter trees, which means really significant performance improvements[1]. This is important not just for performance, but also code-sharing. Here's the why: If you just took a React Native Web app today and made it responsive using the typical way, hooks, you'd end up with a very janky web app. I know this because Tamagui was born out of an app that did exactly that, and resizing frequently took 300ms+ per frame. Themes today also have the same failure mode - without a compiler, you thread values through context. That means lots more JS to run, and whole-tree re-rendering on every change. Even beyond themes and responsivity, we found ourselves having to really limit our ambition especially for Native - lists that contained many items slowed down quickly after a certain depth. So Tamagui started solving for themes and media queries and hopefully a bit of tree depth, and it really succeeded at that. To release the alpha I wanted feature parity with modern UI kits, so I added a theme creator, token system, inline token props, media query props, shorthand props (ala tailwind), fonts, and more. Now over the past 6 months its matured immeasurably with components for gradients, images, inputs, labels, switches, shapes, popovers, and tooltips. Animations just landed, which power many of the new components. "npx create-tamagui-app@latest" to help get started fast. Hundreds of bugfixes and better docs. And one thing I'm really proud of: huge TypeScript type quality and performance improvements. [0] https://news.ycombinator.com/item?id=29321748 [1] https://tamagui.dev/docs/intro/benchmarks