Does it work on expo? about ui HOT 24 CLOSED

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

from ui.

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

from ui.

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

from ui.

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

from ui.

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;

from ui.

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.

from ui.

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.

from ui.

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

from ui.

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

from ui.

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

from ui.

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

from ui.

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.

from ui.

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

from ui.

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

from ui.

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

from ui.

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.

from ui.

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?

from ui.

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

from ui.

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

from ui.

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.

from ui.

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

from ui.

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.

from ui.

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

from ui.

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!

from ui.