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.

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.