If you have worked on a React app that also needs to run on the web you know how hard it is to maintain three slightly different versions of every component. A years back NativeBase became a popular solution to this problem. It has utility-first props, a shared theme system and one codebase that renders consistently across iOS, Android and the web via React Native for Web.
There are a patterns that make NativeBase really useful in real projects.
Constraint-based styling is used of inline style objects.
You style NativeBase components with props that map directly to theme tokens like px, py, bg rounded and so on.
NativeBase reads closer to Tailwind than to React Native styling, which makes it easier for new developers to join teams that already use utility-first CSS elsewhere.
You can use props without media query workarounds.
For example you can pass an array or object as a prop value like mb={["4" "5"]} of manually branching on Dimensions or useWindowDimensions.
This cuts down a lot of responsive logic especially on apps that need a usable tablet or web layout without a separate design pass.
NativeBase components also have built-in accessibility primitives.
Keyboard navigation and screen-reader support come built into NativeBase components by default than being something you add later.
This matters more than it sounds because adding accessibility features to an existing component tree can be really painful.
It is worth noting that NativeBase itself is now in legacy and maintenance mode.
The creators of NativeBase have moved development to gluestack, which carries forward the same utility-prop philosophy with a copy-paste component model instead of a runtime dependency.
If you are starting a project gluestack is the better choice for the future.
If you are maintaining an existing NativeBase codebase it is stable. There is a documented migration path whenever you are ready to move to gluestack.
Has anyone here gone through the NativeBase to gluestack migration yet?
I am curious to know how hard the prop API differences actually were in practice, for NativeBase and gluestack.
