gluestack-style is a high-performing styling library for React and React Native
that allows developers to create scalable and maintainable styles quickly and
Why we built gluestack-style?
gluestack-style originally started as part of NativeBase, a universal component library for both React and React Native. However, we realized that not everyone needs all the components from NativeBase, so we broke it down into two separate libraries:
gluestack-ui - A set of ready-to-use universal components that can be added to any project and styled to fit your needs. You can even customize the components as desired.
But aren’t React Native and React Native Web sufficient?
gluestack-style and React Native Web aren’t directly comparable, as they serve different purposes.
React Native Web has two parts
A set of low-level components
A styling library to style those components
Whereas gluestack-style is a styling library
A styling library to style any given React / React Native component
A comprehensive theming solution that enables you to easily customize the look and feel of your application
Each component built with gluestack-style can be styled with
States (hover, focus, etc)
React Native Web is great! gluestack-style needs React Native Web’s “components” to build universal components.
But, gluestack-style doesn’t use React Native Web’s styling engine (which is highly performant)! gluestack-style’s babel-plugin (compiler) precompiles the declarative styling object into CSS classes and declarations and injects them directly during compile-time leading to zero style calculation during the runtime.
Why Use gluestack-style, When We Already Have NativeBase?
gluestack-style was originally part of NativeBase, but it has since evolved into a standalone library focused solely on styling. Unlike NativeBase, which is a complete component library that includes styling, accessibility, and a default theme, gluestack-style specifically targets styling.
While NativeBase provides a comprehensive solution for building web and mobile applications, gluestack-style offers a more streamlined and flexible solution for managing styles in your projects. This makes gluestack-style a complementary tool for developers who are already using NativeBase, or for those who want to focus specifically on styling without the added complexity of a full component library.
Universal styling solution (implementation per platform can differ)
Consistent API for developers
Solve CSS Specificity
Theme / token
Platform based styling
Composable (should work with other libraries)
Don’t solve problems beyond styling!
Accessibility (check gluestack-ui)
Design (check gluestack-ui again!)
Animation (check examples with Legend-Motion)
Compatibility with other libraries and frameworks, including:
Bundler plugin instead of the current babel-plugin, which would allow for:
Generation of separate CSS files
Removal of intermediate components where appropriate
Please note that these features are not part of the current roadmap, but are being actively considered for future development.
Notes to Keep in Mind:
Although this information is internal to the library, it’s helpful to know the following
gluestack-style generates CSS styles for media queries using pure CSS.
Currently, media-query color-mode preferences are not supported.
gluestack-style creates CSS classes and declarations, but does not utilize CSS pseudo-selectors (e.g. :hover) for user interactions. This allows developers to have more control over user interactions and handle them with logic as needed.
CSS class declarations generated by gluestack-style follow a specific "order of specificity", including: