Web development has been my primary approach to making things a reality. I love how easy it is to get an app released and how quickly you can iterate on it.
The web ecosystem is vast and there are many tools to choose from. This is why I've written a blog post in the past on my tech stack for web development to build web apps today.
My Tech Stack For Building Web Apps Today
When it comes to mobile, I like to stick with the same stack as much as possible. This is why I've been using React Native for mobile development. It allows me to apply the same principles and strategies I've learned from web development to mobile development, such as using React and other libraries.
However, not everything is available in React Native as it is in web development, especially in the UI.
I want to use Tailwind and shadcn libraries to make my life easier. But these libraries aren't available in React Native without some work.
This is where Gluestack UI v2 comes in. It is a library that provides a set of components that uses the same approach with shadcn and Tailwind CSS but for React Native.
gluestack: React & React Native Components & Patterns
Let me explain it further.
Tailwind CSS (NativeWind)
If you haven't heard about Tailwind CSS, it is a utility-first CSS framework that allows you to build custom designs without writing any CSS. It is a great tool for web development and I've been using it for a while now.
With Gluestack UI v2, you can apply the same principle to React Native. It allows you to apply the same classes you use in Tailwind CSS to React Native components.
Here's an example:
Here’s an example using Gluestack UI:
Most of what you’ve learned in Tailwind CSS web development can be reused for mobile development with Gluestack! I love it!
Shadcn copy-paste approach
One of the things that make shadcn unique compared to other UI libraries is its copy-paste approach. You can copy the code from the website and paste it into your project and it will work.
It gives you the whole component with the styles and everything. And you are able to fully customize it to your liking. You own the code.
Gluestack UI v2 provides the same approach. You can copy the code from the website and paste it into your project and it will work.
Or better yet, you can also use their CLI to pull the component directly into your project. Similar to the shadcn CLI tool.
Here's an example:
Here’s another component:
It's that easy!
Conclusion
I've been using Gluestack UI for a while now even before v2. I still have a project that is under v1 and it's still working as expected. I'm still able to use the same components, it's just that I can't use the Tailwind CSS approaches yet.
But with Gluestack UI v2, I can now use the same approach I use in web development to mobile development. It's a great tool to have in your toolbox.
I love how easy it is to use and how it makes my life easier. I can now focus on building the app and not worry about the UI. Check out their components!
Hope this helps you in your mobile development journey as it did mine. It's not perfect, but it's a great start and addition to your stack.
Thank you for reading. I hope this will help you on your journey! ❤️