Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Tamagui – React design systems optimized for native and web (tamagui.dev)
88 points by nwienert on Nov 23, 2021 | hide | past | favorite | 16 comments

Hey HN, author of Tamagui here.

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.

[0] https://tamagui.dev/docs/intro/benchmarks

This looks really neat! Love the focus on performance for mobile. The inclusion of linear gradient is also nice, since I've had to write code that seemed stupidly complex to get that working cross-platform before.

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.

Thank you!

> 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.

> Love the focus on performance for mobile. The inclusion of linear gradient is also nice

This confused me, linear gradient is the opposite of focus on performance :D

RNW is pretty seamless in that sense. You can freely mix and match RNW components and html up and down the tree.

Love the work on the webpack/babel configuration - really streamlined the crossplatform design system process. Do you have any thought on adding animation? So far looking through the source, I saw a couple code forked from NativeBase for animation that used the primitive Animated API. Wonder if the tamagui/core workflow could bundle reanimated2 and moti with it - will do an experimentation this weekends

I use reanimated in the app that Tamagui was born from and am friendly with Fernando, would love to get Moti support. Feel free to reach out to me or chat on the discord.

Awesome - just a heads up, the discord invite link in the doc has expired.

Looks like gradient text isn't rendering properly on Chrome, because it's missing -webkit- prefix on background-clip.

Thanks, pushed a fix

FYI on mobile the copy to clipboard tooltip appears on button click and stays on. (Firefox Android)

not sure what it was supposed to be but by ythe first time ever I've seen this message:

> 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

Happens for me as well when hovering the "Universal" text.

> Error: No safe area insets value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.

Looks good! Thanks for making this available to everyone.

how is the support for accessibility?

Good, react-native-web has nice accessibility built in, and we're building off react-native-aria for upcoming components. Long run we're looking to build up a nice set of accessible components ala Radix except cross platform.

Applications are open for YC Summer 2023

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact