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

Troubleshooting

If you encounter any issues while using nativewind, please refer to the nativewind troubleshooting guide.

Common Issues

1. "dark:" Variant Not Working as Expected

If you are using
dark:
and experiencing unexpected behavior, ensure that you have followed the documentation for dark mode configuration correctly.

2. Toast Inside Modal Not Functioning

When using
Toast
inside a
Modal
, ensure that you have added the
OverlayProvider
from
@gluestack-ui/overlay
to the root of your application.
import { OverlayProvider } from '@gluestack-ui/overlay';
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';

const App = () => {
  return (
    <GluestackUIProvider>
      <OverlayProvider>
        <YourApp />
      </OverlayProvider>
    </GluestackUIProvider>
  );
};

3. Flashing Issue in Next.js

If encountering flashing issues in Next.js:
  • Refer to the installation documentation, click on manual, and ensure that step 4 is correctly configured.

4. TailwindCSS Classnames Not Overriding in react-native-web

To ensure Tailwind styles override with higher specificity, add
important: 'html'
to your
tailwind.config.js
.
// tailwind.config.js
module.exports = {
  ...
  important: 'html',
  ...
}

Known Issues

  • placeholder
    does not work with CSS tokens.
  • dark:
    does not function with "class" as a strategy in native devices.

Still Facing Issues?

If you continue to experience issues, please create an issue on GitHub.
Edit this page on GitHub
Go backRoadmap
Up nextDiscord FAQs
Go backRoadmap
Up nextDiscord FAQs