[Feature] Shared UI package between web and native

[tconroy]

Describe the feature you'd like to request

Right now, the ui package is only for web. However, given we are using both TailWind and NativeWind, it'd be great if we could have a single UI package for both platforms.

Describe the solution you'd like to see

A single UI package for both Web and Native styling:

• share the same class configuration between web and native
• for using web: import { Button } from '@acme/ui'
• for using native: import { NativeButton } from '@acme/ui'

Additional information

react-native-web might be a good way to normalize the API between web and native components.

[moritzWa]

I'm also interested in setting this up. Happy to explore this together.

I found this guide: https://www.youtube.com/watch?v=TKvL2dasRrE
and this relevant repo: https://github.com/gunnnnii/turbo-expo-trpc-starter by @gunnnnii

[moritzWa]

hmm, I noticed this in the readme now.

No. Solito will not be included in this repo. It is a great tool if you want to share code between your Next.js and Expo app. However, the main purpose of this repo is not the integration between Next.js and Expo — it's the code splitting of your T3 App into a monorepo. The Expo app is just a bonus example of how you can utilize the monorepo with multiple apps but can just as well be any app such as Vite, Electron, etc.

Integrating Solito into this repo isn't hard, and there are a few official templates by the creators of Solito that you can use as a reference.

[tconroy]

I noticed that as well, @moritzWa. Personally, I think a shared UI package is different than something like Solito, which has the goal of leveraging NextJS for your native app (i.e: using the file based routing from your next app for your native app).

If this is out-of-scope for this project that is understandable, but I think something as simple as tailwind+nativeWind+react-native-web would enable a single UI package shared across both projects. But I'd love someone more knowledgeable than me to tell me why this isn't achievable! :-)

[shawnmclean]

I'm still not sure how solito works unless its one app that ships to both mobile and web.

What I'm looking to do is write react native components in the shared UI package, more specifically react-native-reusables based on shadcn.

Then use that same component in both web and expo.

I'm stuck on getting the transpilers to work.

All I'm trying to do now is to render a react-native component inside a new next repo.

Has anyone seen anything like this? Is bringing in expo inside of next necessary? As seen in this adapter here.

[shawnmclean]

Well, I have something going on here: https://github.com/shawnmclean/sovoli

Its working on both nextjs and expo with some hacky stuff.

Not app components work yet.

[ofrades]

'use dom'

https://github.com/EvanBacon/expo-dom-components-canary-example