Installation

To get started with gluestack-ui with nativewind, check out this quick installation guide. It provides simple steps to help you install and use the library in your projects.

Using Template

If you wish to use gluestack-ui with nativewind in your existing project using CLI or manually, you can proceed with the following steps:

Step 1: Setup Nativewind

Setup nativewind in your project following NativeWind documentation.

Step 2: Initialize



Use init command to add GluestackUIProvider and gluestack-ui-provider/config.ts file into your project.
npx gluestack-ui init

Step 3: Configure GluestackUIProvider in project

Wrap your app with GluestackUIProvider in App.tsx.
// App.tsx
export default function App() {
return (
<GluestackUIProvider>{/* Add your app code here */}</GluestackUIProvider>
)
}

Step 4: Server-side rendering (SSR) (NextJS Only).

It's also recommended to set up your server-side rendering (SSR) correctly. To do this, you will need to use the flush() function exported by the @gluestack-ui/nativewind-utils
For Next.js App Routers we will create a new registry.tsx file in the root of your project and use the flush function from @gluestack-ui/nativewind-utils
"use client"
import React, { useRef, useState } from "react"
import { useServerInsertedHTML } from "next/navigation"
import { StyleRegistry, createStyleRegistry } from "styled-jsx"
import { Html, Head, Main, NextScript } from "next/document"
// @ts-ignore
import { AppRegistry } from "react-native-web"
import { flush } from "@gluestack-ui/nativewind-utils/flush"
export default function StyledJsxRegistry({
children,
}: {
children: React.ReactNode
}) {
// Only create stylesheet once with lazy initial state
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [jsxStyleRegistry] = useState(() => createStyleRegistry())
const isServerInserted = useRef(false)
useServerInsertedHTML(() => {
AppRegistry.registerComponent("Main", () => Main)
const { getStyleElement } = AppRegistry.getApplication("Main")
console.log(getStyleElement())
if (!isServerInserted.current) {
isServerInserted.current = true
const styles = [getStyleElement(), jsxStyleRegistry.styles(), flush()]
jsxStyleRegistry.flush()
return <>{styles}</>
}
})
return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
}
  • We also need to wrap children with StyledJsxRegistry in the layout.tsx file.
"use client"
import { Inter } from "next/font/google"
import "./globals.css"
import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider"
const inter = Inter({ subsets: ["latin"] })
import StyledJsxRegistry from "./registry"
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en">
<body className={inter.className} style={{ display: "flex" }}>
<StyledJsxRegistry>
<GluestackUIProvider mode="light">{children}</GluestackUIProvider>
</StyledJsxRegistry>
</body>
</html>
)
}
Edit this page on GitHub