Show HN: Tamagui – React design systems optimized for native and web
tamagui.dev
tamagui.dev
I've been pursuing something like Tamagui for many years now, this is technically my 3rd or 4th iteration on a compile-time optimized UI kit depending on how you count.
The motivation is simple: build apps with less code.
In react to do this today you have to sacrifice a lot: responsive design, themes, and general speed. None of the cross-platform UI kits do media queries or themes without resorting to JS, which hampers performance. Further, if you want a more modern API for themes, typed inline styles, media queries, etc, you sacrifice more performance. Our benchmarks[0] comparing Dripsy and NativeBase show 3-10x speed improvements, and that's not comparing stuff like media queries and themes which should be even more favorable.
Tamagui does all this with an optimizing compiler that lets you keep all the slick features without sacrificing performance. The compiler pulls out even inline JS logic into CSS on the web, or StyleSheet.create on native. It even flattens View/Text into div/span.
All that performance and platform-optimized-behavior makes a big difference, especially when building apps as apps tend to render many more components! It's also the only cross-platform UI Kit to support SSR.
Happy to answer any questions here!
There's actually a ton of room for continued improvement, and I'd love to set up some sort of sponsorship to keep realizing this. I think the current state of React is that it's tremendously powerful and well-designed, but actually releasing an app that runs on web + native is still a near-Everest type mountain to climb, and I hope to continue to change that.
I've always been a frustrated by is how difficult it is to build a design system for React Native. It seems like no one who's done it has really open sourced much in the space. One thing I've often found missing is the ability to build an interactive showcase of a component library. Do you have any plans for something like that?
On a side note, I am a little skeptical of react-native-web. Admittedly, I haven't looked into it much though. Can DOM nodes be mixed with react native nodes? If not, the lockout from Normal react libs would give me pause. Also not sure if I'd trust it with components doing things like charting or animations. I'm still in that camp of people finding it easier to write React and React Native UIs totally separately.
> Do you have any plans for something like that?
It's a good idea, and in general I think a clear path to generally making frontend much easier so I'll think about it.
> Can DOM nodes be mixed with react native nodes?
Yep, they won't render on native but its totally fine to do if you're just targeting web. Theres only lockout if you want 100% sharing but it's easy enough to fork any component into web and native by having a `.native.ts` file.
This confused me, linear gradient is the opposite of focus on performance :D
> Application error: a client-side exception has occurred (see the browser console for more information).
And on the console: > Error rendering page: TypeError: t is undefined
> Error: No safe area insets value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.