Tamagui – UI kit that unify React Native and Web | Hacker News Reader

Tamagui – UI kit that unify React Native and Web

tamagui.dev

106 pointsvyrotek20 comments

I have been using different UI toolkits over the past ~13 years of my professional front-end development career. Probably starting with Bootstrap.

Tamagui has a really elegant combination of a Styling system (the mechanics of applying styles to the underlying systems), a Theming system (the way sizes/colors are passed down within different contexts of the UI), and a Component system (high level components that are ready to use out of the box). In my opinion, this is where Tamagui shines above the competition- each abstraction effectively builds upon the underlying ones, and it gives you a bunch of ready-to-use components so you can start building quickly and worry about the details later. Way better than the "just copy and paste" model of Tailwind which forces you to maintain components and manually create a consistent UI for your app.

We are using Tamagui for our open source electron app + web site. We hope to have a React Native app in the future, so we are strongly opposed to any solution that is overly tied to CSS. If you want to see an example (real-world, messy) codebase that uses Tamagui, please take a look here: https://github.com/MintterHypermedia/mintter/tree/main/front...

The biggest downside, in my experience, is the heavy/complicated/fragile setup process of Tamagui. Although this is typical of any TS monorepo. If you struggle to integrate Tamagui in your codebase, I encourage you to power through the setup phase- the payoff is totally worth it!

I remember trying to use react native web to unify mobile and web back in the day and I ended up using complex animation libraries for things that CSS could do in just one or two lines. Is Tamagui any better in that regard?

Absolutely. You can use different drivers for Tamagui Animations- CSS for GPU-accelerated animations on web, and Reanimated for fast animations in RN.

https://tamagui.dev/docs/core/animations

I've been trying out tamagui and for what it's worth, it's been a joy. The dev is sometimes a bit slow to respond to some issues, but he's chugging along and doing a lot of work for a single person. I really like the theming system and the abstractions, but I hope it gains more traction and more of a team working on it so you can be sure it'll keep being maintained.

The starter with nextjs/expo is sooo complicated though. I know it's not tamagui's fault, but the js ecosystem is a terrible mess. Bundlers/monorepo managers/package managers all come together to build a tower so tricky it feels like it will fall at any moment. And that's coming from someone _relatively_ used to it. It's wild to me that this is the best we can do at the browser, I've come to the conclusion that the ecosystem is not fixable. I hope WebIDL and GC in wasm take off and give us more options in the long run.

I agree it’s way too complex, it’s a problem I’m working on actively.

I’d like to first help https://vxrn.dev find some consistent contributors and get it stable.

And then I ported Expo Router to work with it, so shared single file system routes and no more need for a monorepo.

So now you’ve simplified from two bundlers, two stacks, four folders down to one stack, one bundler, and one folder.

And then I have some interesting ideas to make data a lot simpler which I’d like to try on top.

All together no reason we can’t make a modern Rails like experience work, but it is crazy how much work it is with all the modern stuff, but imo will pay off with something actually great for universal apps.

Thanks Nate for your hard work. I think you're on a great path with tamagui and vxrn sounds great too if it can hold up what you promise. The different bundlers and routers, plus having the workspaces, turbo and things like keeping deps in sync are really a major pain. I understand the need for it, but if you manage to solve this issue as well: kudos.

I wish you and your projects a lot of success and I'm looking forward to everything that's coming.

I am using TamaGUI in the last months and it has been a dream to use. It's really nice to be able to use the same code on mobile and web.

For me it feels a bit like using Tailwind CSS, but that works out of the box on all the platforms that I love. I have been active and asking questions on their Discord and people were helpful, the community seems to be good. Seems to be a pretty young project, but very interesting.

I love tamagui and their starter kit... But on other hand I feel anything I'd build with it could be achieved as web app + pwa. For anything more complex id go with native app.

Anyone else feel the same ?

So building a good API layer + web app gives you possibility to build a good native app on top of same API later when your idea is validated

PWA definitely have their place, but the UX is unquestionably far worse.

I’d say though that I’d actually choose Tamagui and native if I was going for speed to ship. Even if building a PWA, Tamagui is a great way with components designed for mobile.

speed to ship = native is bit funny considering you have no control on the review process have the app store markets. Painfully slow process releasing anything natively

If building a product takes a few months, and years of ongoing work, then the 2 weeks delay in submitting should round to 0 in terms of effect on your decision to go native or not unless there's some incredibly hard deadline.

We need a cross-platform React component system at my job, but we're going to only be sharing bits and pieces of the apps, across a pair of large existing codebases with their own design systems and architectures

I hate how so many of these things want to be a kitchen-sink framework that owns the world, instead of a library you can adopt piecemeal where it makes sense

I love Tamagui - for my are running an enterprise-grade application on it. It does come with some deep-sitting, surprising bugs though, for example modals on iOS with 2 select form components completely break form submitting but one works just fine.

Other than that, I think one cross-platform framework like Tamagui with a large company and team behind it would be the ideal framework for most projects.

Since it didn't exist: I did build a Tailwind-like UI library for Tamagui to make building new projects easier. It's called ComponentHub [0] and offers pre-built, more complex UI components

[0]: https://componenthub.io

I’m using Tamagui for my decentralized social network, Jonline. It’s my favorite web framework by far, period, and a close runner up to Flutter for native usage (and I could easily see it surpassing Flutter).

https://jonline.io https://bullcity.social https://oakcity.social

What’s the point of React Native when things like Ionic exist (webview adapter for React)? I’ve been using RN for years but just realized the JS engine doesn’t have JIT so will be way slower than the alternative I just mentioned (which seems to have similar bridge functionality and all the WebWhatever APIs since it’s a web view)

I’m new to React Native but I think the main benefit is that it can make a native app instead of just a web view. You can have transitions between screens and use native menus, for example.

Take a look at the 3 videos here: https://solito.dev

Solito is a thin wrapper around React Native and next.js so make it easier to share as much code as possible between the website and the native apps but still have the apps actually behave like native apps.

I really like some of the approaches that Tamagui has taken with regard to writing Layout and utility classes ( like HSTACK, VSTACK etc) . Maybe because it leverages react-native. Is there any way I can use it on non-react projects?

I really hope javascript can have a framework similar to flutter or the new Kotlin multiplatform, that I can share most of the same code for desktop, mobile and web.

I’ve only just started using it but https://solito.dev/ seems to do exactly that.

coming from mobile, the primitives of the web are really poorly designed. The list of tags/attributes is bloated. Each of them is overloaded with multiple purposes (presentation, semantic, accessibility)... On top of that, they all have the wrong defaults, and don't get me started with how bloated/cryptic css can be.

Reply on news.ycombinator.com