Does it work on expo? - Githubissues

Samuele-Barbiera commented 1 year ago

having the possibility to work with expo or react native

shadcn commented 1 year ago

I have not tried it yet. Would be helpful if someone could test this and report back.

corysimmons commented 1 year ago

I'm sure it doesn't. There are mentions of <div> etc. throughout the codebase. If it were React Native (Expo) compatible, those would have to be <View>s.

Something like this is sorely missing in the ReactNative/Expo/Solito ecosystem.

Tamagui is trying to fill the hole, but the API is styled-system instead of Tailwind 😞 and the design isn't on point like Radix or Tailwind.

@shadcn If you did want to offer a React Native package alongside this, you'd probably have to maintain two packages—one for the web and one for React Native. I suspect the React Native one would need to use react-native-web primitives, and it'd be a lot of work to convert Radix to react-native-web.

If you offered RadixUI + Tailwind that worked on web + React Native, I bet this repo would get tens of thousands of stars very quickly. 😄

AyoCodess commented 1 year ago

Im bumping into this issue. I want to use this library cross platform but as highlighted already it does not support reactive native components.

What im doing now is assessing if it’s worth the time and energy to convert these web components into react native components considering that it uses radix ui primitives.

tonyabracadabra commented 1 year ago

Im bumping into this issue. I want to use this library cross platform but as highlighted already it does not support reactive native components.

What im doing now is assessing if it’s worth the time and energy to convert these web components into react native components considering that it uses radix ui primitives.

have you tried Tamagui?

corysimmons commented 1 year ago

@tonyabracadabra Tamagui isn't headless. Nothing on RNW is.

triptu commented 1 year ago

@corysimmons the components in tamagui take unstyled prop which makes them headless, the composition API is similar to radix.

corysimmons commented 1 year ago

@triptu If that's true, that's pretty huge. Thank you for letting me know!

w7tf commented 1 year ago

I found this library here: https://ui.gluestack.io They claim to have support for all platforms. Haven't tried it out yet though. I'll try to use the unstyled components and see if I can get the shadcn styles working.

w7tf commented 1 year ago

I found this library here: https://ui.gluestack.io They claim to have support for all platforms. Haven't tried it out yet though. I'll try to use the unstyled components and see if I can get the shadcn styles working.

So I tried it out with Tamagui. But it would only work with client components which is a dealbreaker for me when using the components with nextjs app dir. Tamagui is already looking for a solution to this but until this happens I am going to stick with the current Shadcn Radix implementation. If you're trying to integrate shadcn on native the "easiest" library to do so is probably Tamagui + Nativewind. As triptu pointed out Tamagui takes an unstyled prop and the composition API is similar to radix. With nativewind you could mimic most of the shadcn styles. Ah and if it's okay for you to use client components @expo/html-elements is a great library that allows to use semantic HTML on the web while using an equivalent on native. With that you could replace div elements in shadcn for instance.

triptu commented 1 year ago

@warum7 did you try Gluestack as well? I have yet to try it. How's it compared to tamagui?

w7tf commented 1 year ago

@warum7 did you try Gluestack as well? I have yet to try it. How's it compared to tamagui?

@triptu Yes indeed. The installation is much easier than Tamagui but it doesn't work as expected. While you can add styles you have to add them through nativewind on web because it does not come with a className prop by default. I also couldn't figure out how I can disable the styles that come out of the box. And again same issue: everything has to load on client. I think in that sense Tamagui is the better option if you're looking to mimic Shadcn.

That being said I think that it's possible to have a shadcn-ish experience utilizing Tamagui. One could use the shadcn components for the web and copy paste them in a separate package for native while editing the types and the imports.

MrgSub commented 1 year ago

The most time consuming task here - in my opinion - is how shadcn does not separate container classes and text classes. in HTML it's valid to write <div>test</div> but not in react native as this should translate to <View><Text>test</Text></View> which means you can't share the same class name between both elements created.

rafaell-lycan commented 1 year ago

One possible idea would be creating components using RN implementation and using a flag or prefix when adding to our project.

To avoid breaking existing projects, the initial configuration could be set to components.json:

{
  ...
  "react-native": true
}

This property could be added during the setup/init phase or even included using a flag --react-native.

With this in mind, the command add would only include components made for React Native using proper components, such as:

Button: Using Pressable
Card: Using something like View or even TouchableOpacity.
And many others.

The good part is that design-wise it could match a similar design and API contract using something like tailwind-rn, nativewind or something even simpler.

TBH it would be easier for someone else to start a project like this and see if the community reacts to it, as [1] the overall complexity of this project would increase [2] for something we don't know if people would use and [3] the maintenance could become a problem if that's the case. cc @shadcn

Meanwhile, I'm using react-native-paper which fits my needs.

Notes:

Radix was designed to be used for web-only, but these RN components could have used accessibility properties in some cases;
Also react-native-reanimated would be perfect for smooth animations/transitions;

corysimmons commented 1 year ago

It's absolutely possible to do this, but it's a huge undertaking. You'd have to make Radix RN-friendly (I looked into this in the Radix Discussions if anyone is interested), which is possible but finicky (as all RN things are). Then, you'd have to use NativeWind to copy/paste all these shadcn-ui styles to the new UI kit.

This would probably be its own two projects: radix-rn and shadcn-ui-rn

rafaell-lycan commented 1 year ago

At least someone is trying 👻 https://github.com/Mobilecn-UI/nativecn-ui

corysimmons commented 1 year ago

@rafaell-lycan That lib isn't porting all the goodness of Radix primitives (a11y-friendly keyboard nav, headless, etc.). It's just porting the Tailwind classes from shadcn-ui to RN components. It's equivalent to using any styled lib for RN.

Compare the complexity of these two files:

Unstyled Radix with all its a11y stuff: https://github.com/radix-ui/primitives/blob/main/packages/react/tabs/src/Tabs.tsx
Hard-styled RN component: https://github.com/Mobilecn-UI/nativecn-ui/blob/main/components/Tabs.tsx

One of these things is not like the other.

Again, the only way to properly do this would be to convert Radix UI's mentions of divs and other DOM elements to RN primitives. Once you do that (and create a standalone rn-radix-ui repo), then you can go over it with NativeWind and copy/paste shadcn-ui components over to its own repo (e.g. rn-shadcn-ui).

If you're feeling particularly ambitious, you could do something like Fernando Rojo is doing with his project Zeego and make as many headless UI components into their native counterparts as possible. For instance, for a Popover component, you might have:

Popover.tsx which serves one of the following depending on the user's client:
- Popover.web.tsx that uses unstyled DOM elements to create a popover effect.
- Popover.ios.tsx that hooks into SwiftUI to use the actual native SwiftUI Popover equivalent.
- Popover.android.tsx that hooks into Jetpack Compose to use the Android Popover equivalent.

So you'd have to have a decent amount of SwiftUI and Jetpack Compose knowledge. Although I suspect ChatGPT could help out a lot with this so you wouldn't have to be an iOS or Android dev or anything. 😂

If anyone wants to fork Radix UI and start work on this project, I'd be more than happy to consult in Discord and get you going on all aspects. I don't have the time right now to undertake the whole project (or keep it in sync with Radix UI, or in sync with SwiftUI and Jetpack Compose) since it will be a lot of busy work for a very long time.

But if someone did tackle this problem, it would make creating cross-platform apps insanely nice and probably become a 10k+ Star library.

WilliamWelsh commented 1 year ago

I was able to remake the button component with the same syntax as regular web, meaning you DON'T have to wrap text in a Text component, or in a label prop like nativecn-ui. This is with Tamagu unstyled and Nativewind.

SushritPasupuleti commented 1 year ago

I was able to remake the button component with the same syntax as regular web, meaning you DON'T have to wrap text in a Text component, or in a label prop like nativecn-ui. This is with Tamagu unstyled and Nativewind.

This is looking good, I am going to try something like modals to see how far this can go.

olehmelnyk commented 12 months ago

hey, have you heard about mitosis? https://github.com/BuilderIO/mitosis It looks like it can convert JSX-like components to other frameworks, including React Native, Angular, Vue, etc. - so MAYBE with it - it would be possible to make shadcn/ui framework agnostic

TheUltDev commented 12 months ago

I'm working on this currently.

The library will be called EXO and work with React Native [+ Web] Follow me on 𝕏 and I'll announce the project: @TheUltDev

I'm using shadcn-ui as a style-guide. Radix UI for web. Wix's RN UI Lib for native. Prototyping in Figma and exporting to RN/Expo via my plugin: https://figma-to-react-native.com

oguzhane commented 12 months ago

@TheUltDev this sounds so good to be true! looking forward to it to try😊

shadcn commented 11 months ago

@TheUltDev Thanks for your work on this. I'm going to close this for now as unplanned and link to your repo when launched.

ro-mgh commented 9 months ago

For those who like me are looking for a StyleSheet solution, I'm working on a malla UI library and also developing a Figma file for easy design compilation.

P.S. @shadcn, your idea is brilliant, thank you!

trevorpfiz commented 8 months ago

react-native-reusables seems like the best option right now

AurelianSpodarec commented 4 months ago

Any updates? :/

@theultdev - how ya doing? :D

TheUltDev commented 3 months ago

@AurelianSpodarec

I've been focused on the Figma -> RN plugin. I finished the final update needed to continue with EXO (the primitives + UI library) You can try it here: https://figma-to-react-native.com

As far as the UI kit goes, it's about 2-3 weeks away from being ready for the public, you can see and use a preview of the lib here: https://exo.ult.dev/

Note that most of the components will be designed and generated by the plugin, I'm currently working on building them all in Figma.

For now I would suggest going with react-native-reusables if you would like to use NativeWind and don't want to sync Figma mockups with your app.

If you would like to use Unistyles and create your design components in Figma, stay tuned over the next month, you can follow me on X for updates: https://x.com/theultdev

codeogc commented 1 month ago

@EvanBacon has this changed with Dom components?

shadcn-ui / ui

Does it work on expo? #73