Troubleshooting

Common Issues

1. "dark:" Variant Not Working as Expected

2. Toast Inside Modal Not Functioning

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

• 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

// 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?