.png?table=block&id=735449e1-b36d-4e0b-9393-e9fb745d8bdd&cache=v2)
gluestack-ui v1.0 was launched almost a month back, and we are now 1000+ stars strong on GitHub. But as new users adopted the library quickly, we also got queries and concerns on how gluestack-ui compares with its predecessor NativeBase.
Key concerns were received from users with ongoing and finished projects dependent on NativeBase. We feel that their apprehension is valid and understand their perspective.
That is why we felt it would be best to share why we created a different library from the ground up without upgrading NativeBase. We also wanted to share what we are doing to address the concerns of current users of NativeBase through an intermediate library and a migration guide.
Quest for universal
Universality in app development has been our goal from the beginning. We chased it relentlessly and envisioned creating a UI library that lets you "write once, run anywhere.”
The result was NativeBase.
It started well. NativeBase became a toolkit that provided everything essential for crafting interfaces that worked on the Web, iOS, and Android. It was loaded with styling libraries, components, APIs, universal functionalities, and many other features.
Not to mention, it became one of the most beloved React libraries around and was extensively used for major projects.
But the library had its own set of hiccups.
Challenges with NativeBase
As NativeBase grew, we encountered limitations that couldn't be solved with incremental updates. We needed to rethink our fundamentals to:
- Deliver better performance for complex applications
- Provide more flexible customization options
- Support modern development patterns
- Reduce bundle size
- Improve type safety and developer experience
Rather than making compromises to maintain backward compatibility, we decided to rebuild from the ground up, taking everything we learned from NativeBase and applying it to create something even better.
Road to gluestack-ui
Our first instinct to fix NativeBase was to solve individual issues. But soon, we realized that it would be just patchwork. A real solution would be to rebuild NativeBase from the ground using the lessons we had learned.
gluestack-ui isn't just NativeBase v4 - it's the next evolution in cross-platform component libraries. Drawing inspiration from modern web development practices, particularly shadcn/ui and Radix UI, we've created a component library that brings the best of web development to React Native.
Why did we not call it NativeBase v4?
Two reasons! First, gluestack-ui can co-exist with NativeBase v3 for incremental adoption and smoother migration. Second, it is a ground-up rewrite with many API changes.
🎨 Modern Styling with NativeWind 4.1
One of the biggest changes in gluestack-ui is our move to NativeWind 4.1 as the default styling system. This brings the power and flexibility of Tailwind CSS to React Native, making it easier than ever to create beautiful, consistent designs across platforms.
💪 Web-Inspired Architecture
Inspired by shadcn/ui and Radix UI, we've adopted a component architecture that:
- Prioritizes composability
- Provides better accessibility out of the box
- Offers more granular control over component parts
- Enables easier customization and theming
Let's look at how this evolution manifests in code:
NativeBase v3 Button:
import { Button } from "native-base";
const Example = () => {
return (
<Button onPress={() => console.log("hello world")}>
Click Me
</Button>
);
};
gluestack-ui Button:
import {
Button,
ButtonText,
ButtonSpinner,
ButtonIcon,
ButtonGroup,
} from "@/components/ui/button"
const Example = () => {
return (
<Button size="md" variant="solid" action="primary">
<ButtonText>Hello World!</ButtonText>
</Button>
);
};
This new approach offers several advantages:
- More granular control over button parts (text, icons, spinners)
- Better composition patterns
- Clearer prop interfaces
- Enhanced type safety
- Easier customization
Why we recommend gluestack-ui
Universal application
gluestack components are usable across all platforms - mobile or web, thus eliminating effort duplication and unnecessary overheads.
Highly performant
With a Babel plugin for pre-computing styles during the build process and runtime performance optimizations, gluestack-ui delivers high-performance styling.
Great DX
VS Code Extension for ease of coding. Just type the name of the desired component and get the entire length of code written for you.
Accessible & customizable components
Fully operable and navigable components provide an allowance for personalization according to the use case.
Smaller bundle size
The unstyled library has been kept separate from the themed, resulting in a low bundle-size library. The fact that the libraries are tree-shakable and eliminate unused exports during the run process further results in an optimized bundle.
Easy Onboarding
Start your first gluestack-ui project with an easy one-line installation: npm create gluestack. A free starter kit is also provided for the developers to get a preview of the library.
What's Next
We're just getting started with gluestack-ui. Our roadmap includes:
- Expanding our NativeWind integration
- Adding more shadcn/ui inspired components
- Enhanced tooling for component customization
- Better documentation and examples
- Stronger community integration
- More web-parity features
Future of gluestack-ui
gluestack-ui v1.0 is just the tip of the iceberg. We will ensure that lessons learned materialize into a better developer experience and higher performance benchmarks. At the moment, we fare better than a few counterparts. The plan is to keep improving with your support.
GeekyAnts is also backing the library. That means better maintenance and accountability. We have started using it in our internal projects, which opens up opportunities to test the library in real-time applications. The learnings and fixes are being transferred.
Join Us on This Journey
This evolution represents not just a technical upgrade, but a renewal of our commitment to the React Native community. By bringing the best practices from web development (shadcn/ui, Radix UI) and modern styling solutions (NativeWind 4.1) to React Native, we're building something that will serve as the foundation for the next generation of cross-platform applications.
Do keep supporting us and sharing thoughts on how gluestack-ui should progress.
We would love to hear from you.
Reach out to us at email: support@gluestack.io
