gluestack-ui logo
Get Updates
Prompt to React Native UI
Home
Components
Hooks
Apps
MCP Server
Guides
Home
Overview
IntroductionQuick Start
Getting Started
InstallationTooling SetupVS Code ExtensionsFigma UI KitCLIgluestack-ui-nativewind-utils
Core Concepts
AccessibilityUniversal
Performance
Benchmarks
Theme Configuration
Default TokensCustomizing ThemeDark Mode
Components
All Components
Typography
HeadingrscTextrsc
Layout
BoxrscCenterrscDividerHStackrscVStackrscGridalpha, rsc
Feedback
AlertProgressSpinnerToast
Data Display
BadgeCardrscTablealpha
Forms
ButtonCheckboxFormControlInputLinkPressableRadioSelectSliderSwitchTextarea
Overlay
AlertDialogDrawerMenuModalPopoverPortalTooltip
Disclosure
ActionsheetAccordionBottomSheetalpha
Media And Icons
AvatarImageIconrsc
Others
FabSkeletonalpha, rsc
Hooks
useBreakPointValue
useMediaQuery
Apps
Dashboard App
Kitchensink App
Todo App
Starter Kit
MCP Server
MCP Server
Guides
Recipes
LinearGradient
Tutorials
Building Ecommerce App
More
Upgrade to v2Upgrade to v3FAQsReleasesRoadmapTroubleshootingDiscord FAQs

@gluestack-ui/utils

@gluestack-ui/utils provides a collection of utility functions for seamless integration of gluestack-ui and nativewind.

tva (Tailwind Variant Authority)

The
tva
function serves as a wrapper around Tailwind Variant, extending its functionality.
In addition to the default Tailwind variant, it introduces support for
parentVariant
and
parentCompoundVariant
.

VariantProps Utility

The
VariantProps
utility allows for easy extraction of variants from a component.

flush

This function facilitates server-side rendering (SSR) by flushing out any styles generated during the process. This ensures that these styles are properly added to the HTML document.

withStates

withStates
is a Higher Order Component (HOC) designed to incorporate state-based styling into gluestack-ui components on native devices.

withStyleContext

withStyleContext
is a HOC that creates a React context with a defined scope.

withStyleContextAndStates

This single HOC combines the functionality of both
withStyleContext
and
withStates
.

useStyleContext

useStyleContext
is a hook used to consume the context created by
withStyleContext
and
withStyleContextAndStates
.
Edit this page on GitHub
Go backCLI
Up nextAccessibility
Go backCLI
Up nextAccessibility