gluestack-style is a high-performing styling library for React and React Native
that allows developers to create scalable and maintainable styles quickly and
effectively.
Why we built gluestack-style?
gluestack-style is different from other styling libraries like Glamour, Emotion, Styled-components, and Vanilla-extract because it focuses on React Native while still being universal and high-performing on the web. Unlike other libraries, gluestack-style's styles are calculated during compile-time using a babel-plugin, which reduces the amount of processing needed during runtime. This means that with Server-Side Rendering (SSR) and Static Site Generation (SSG), pages created with gluestack-style can even run without JavaScript on the client, including media queries.
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-style - The high-performing and universal styling library.
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
Tokens
Variants
Media Queries
States (hover, focus, etc)
Platform
Color Mode
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.
Goals
Universal styling solution (implementation per platform can differ)
Consistent API for developers
Solve CSS Specificity
TypeScript everything
Styling for
Theme / token
Variants
Media Queries
States
Platform based styling
Color Mode
Composable (should work with other libraries)
Non goals
Don’t solve problems beyond styling!
Accessibility (check gluestack-ui)
Design (check gluestack-ui again!)
Animation (check examples with Legend-Motion)
Future Considerations:
Compatibility with other libraries and frameworks, including:
Solid
Svelte
Vue
Astro
Qwik
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: