As a nextjs + shadcnui user going to expo + react native, what libraries should I know about?
My biggest concern jumping into react native is not having the libraries I know and love like tailwind and shadcnui. What are you guys using?
5 Replies
Definitely https://nativewind.dev/
It basically let's you write 90% of tailwind in react native (some minor things do not work, as they cannot be replicated on mobile). It's amazing just how big of a developer experience jump it makes and my go-to now for new projects.
Home | NativeWind
NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native. NativeWind components can be shared between platforms and will output their styles as CSS StyleSheet on web and StyleSheet.create for native.
I personally am a shadcnui and tailwind user on web, but with React Native, I personally don't like nativewind. I find that ui on mobile tends to be much simpler to write so I don't need so many classes. I just use inline styles and don't end up missing tailwind too much. Also, the differences in how css works in RN makes me not like it as much. For example, since rn doesn't have grid, I find myself making grid layouts by using the flex property with different int values which tailwind doesn't have classes for.
As for shadcnui, there's no copy pasteable library equivalent, but the closest I've seen is gluestack. Tamagui also looks good but there's a bit too much config involved in that one for my taste. I personally just create all my own components as I need them and use the StyleSheet api.
thanks @shiroyasha9 @ramdude! why do you guys think this is the case? intuition tells me there should be a shadcnui equivalent. Is it just the nature of mobile dev? Are there existin built in components that just do the job better?
it's because RN renders native UI elements so not all HTML+CSS will translate as is. (render as it will in a browser)
If you are not using bluetooth/ camera or anything that needs native code you can look at ionic or tauri as alternative to RN
Well Shadcnui is essentially just a good way to use Tailwind with Radix. Radix is just an unstyled and accessible component library. The Radix equivalent of React Native would be Gluestack or React Native Elements. So the shadcnui equivalent would just be some copy pasteable way to use these libs with Nativewind. Just hasn't been built yet.