From c4aad17c66578a5c69d29d35947f0a8680496e15 Mon Sep 17 00:00:00 2001
From: Akash Gautam <akash3gtm@gmail.com>
Date: Mon, 10 Feb 2025 18:42:48 +0530
Subject: [PATCH 1/5] fix: provider update

---
 .../ui/gluestack-ui-provider/index.tsx        | 32 +++++++------------
 .../ui/gluestack-ui-provider/index.web.tsx    |  3 +-
 .../ui/gluestack-ui-provider/types.ts         |  1 +
 .../ui/gluestack-ui-provider/index.tsx        | 32 +++++++------------
 .../ui/gluestack-ui-provider/index.web.tsx    |  9 +++++-
 .../ui/gluestack-ui-provider/types.ts         |  1 +
 6 files changed, 34 insertions(+), 44 deletions(-)
 create mode 100644 apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/types.ts
 create mode 100644 apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/types.ts

diff --git a/apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/index.tsx b/apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/index.tsx
index 4855e434..d1ab4871 100644
--- a/apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/index.tsx
+++ b/apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/index.tsx
@@ -1,40 +1,30 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { config } from './config';
-import { ColorSchemeName, useColorScheme, View, ViewProps } from 'react-native';
+import { View, ViewProps } from 'react-native';
 import { OverlayProvider } from '@gluestack-ui/overlay';
 import { ToastProvider } from '@gluestack-ui/toast';
-import { colorScheme as colorSchemeNW } from 'nativewind';
-
-type ModeType = 'light' | 'dark' | 'system';
-
-const getColorSchemeName = (
-  colorScheme: ColorSchemeName,
-  mode: ModeType
-): 'light' | 'dark' => {
-  if (mode === 'system') {
-    return colorScheme ?? 'light';
-  }
-  return mode;
-};
+import { useColorScheme } from 'nativewind';
+import { ModeType } from './types';
 
 export function GluestackUIProvider({
   mode = 'light',
   ...props
 }: {
-  mode?: 'light' | 'dark' | 'system';
+  mode?: ModeType;
   children?: React.ReactNode;
   style?: ViewProps['style'];
 }) {
-  const colorScheme = useColorScheme();
-
-  const colorSchemeName = getColorSchemeName(colorScheme, mode);
+  const { colorScheme, setColorScheme } = useColorScheme();
 
-  colorSchemeNW.set(mode);
+  useEffect(() => {
+    setColorScheme(mode);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode]);
 
   return (
     <View
       style={[
-        config[colorSchemeName],
+        config[colorScheme!],
         // eslint-disable-next-line react-native/no-inline-styles
         { flex: 1, height: '100%', width: '100%' },
         props.style,
diff --git a/apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/index.web.tsx b/apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/index.web.tsx
index 30cadaaa..d76161cc 100644
--- a/apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/index.web.tsx
+++ b/apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/index.web.tsx
@@ -5,6 +5,7 @@ import { OverlayProvider } from '@gluestack-ui/overlay';
 import { ToastProvider } from '@gluestack-ui/toast';
 import { setFlushStyles } from '@gluestack-ui/nativewind-utils/flush';
 import { script } from './script';
+import { ModeType } from './types';
 
 const variableStyleTagId = 'nativewind-style';
 const createStyle = (styleTagId: string) => {
@@ -21,7 +22,7 @@ export function GluestackUIProvider({
   mode = 'light',
   ...props
 }: {
-  mode?: 'light' | 'dark' | 'system';
+  mode?: ModeType;
   children?: React.ReactNode;
 }) {
   let cssVariablesWithMode = ``;
diff --git a/apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/types.ts b/apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/types.ts
new file mode 100644
index 00000000..08daa2ba
--- /dev/null
+++ b/apps/templates/expo-router-with-nativewind/components/ui/gluestack-ui-provider/types.ts
@@ -0,0 +1 @@
+export type ModeType = 'light' | 'dark' | 'system';
diff --git a/apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/index.tsx b/apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/index.tsx
index 4855e434..d1ab4871 100644
--- a/apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/index.tsx
+++ b/apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/index.tsx
@@ -1,40 +1,30 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { config } from './config';
-import { ColorSchemeName, useColorScheme, View, ViewProps } from 'react-native';
+import { View, ViewProps } from 'react-native';
 import { OverlayProvider } from '@gluestack-ui/overlay';
 import { ToastProvider } from '@gluestack-ui/toast';
-import { colorScheme as colorSchemeNW } from 'nativewind';
-
-type ModeType = 'light' | 'dark' | 'system';
-
-const getColorSchemeName = (
-  colorScheme: ColorSchemeName,
-  mode: ModeType
-): 'light' | 'dark' => {
-  if (mode === 'system') {
-    return colorScheme ?? 'light';
-  }
-  return mode;
-};
+import { useColorScheme } from 'nativewind';
+import { ModeType } from './types';
 
 export function GluestackUIProvider({
   mode = 'light',
   ...props
 }: {
-  mode?: 'light' | 'dark' | 'system';
+  mode?: ModeType;
   children?: React.ReactNode;
   style?: ViewProps['style'];
 }) {
-  const colorScheme = useColorScheme();
-
-  const colorSchemeName = getColorSchemeName(colorScheme, mode);
+  const { colorScheme, setColorScheme } = useColorScheme();
 
-  colorSchemeNW.set(mode);
+  useEffect(() => {
+    setColorScheme(mode);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode]);
 
   return (
     <View
       style={[
-        config[colorSchemeName],
+        config[colorScheme!],
         // eslint-disable-next-line react-native/no-inline-styles
         { flex: 1, height: '100%', width: '100%' },
         props.style,
diff --git a/apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/index.web.tsx b/apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/index.web.tsx
index f9a842c4..d76161cc 100644
--- a/apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/index.web.tsx
+++ b/apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/index.web.tsx
@@ -5,6 +5,7 @@ import { OverlayProvider } from '@gluestack-ui/overlay';
 import { ToastProvider } from '@gluestack-ui/toast';
 import { setFlushStyles } from '@gluestack-ui/nativewind-utils/flush';
 import { script } from './script';
+import { ModeType } from './types';
 
 const variableStyleTagId = 'nativewind-style';
 const createStyle = (styleTagId: string) => {
@@ -21,7 +22,7 @@ export function GluestackUIProvider({
   mode = 'light',
   ...props
 }: {
-  mode?: 'light' | 'dark' | 'system';
+  mode?: ModeType;
   children?: React.ReactNode;
 }) {
   let cssVariablesWithMode = ``;
@@ -80,6 +81,12 @@ export function GluestackUIProvider({
 
   return (
     <>
+      <script
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{
+          __html: `(${script.toString()})('${mode}')`,
+        }}
+      />
       <OverlayProvider>
         <ToastProvider>{props.children}</ToastProvider>
       </OverlayProvider>
diff --git a/apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/types.ts b/apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/types.ts
new file mode 100644
index 00000000..08daa2ba
--- /dev/null
+++ b/apps/templates/next-app-router-with-nativewind/components/ui/gluestack-ui-provider/types.ts
@@ -0,0 +1 @@
+export type ModeType = 'light' | 'dark' | 'system';

From 7bd5bad017188be9ccfe877a4b0bb81024f86d97 Mon Sep 17 00:00:00 2001
From: Akash Gautam <akash3gtm@gmail.com>
Date: Mon, 10 Feb 2025 18:44:17 +0530
Subject: [PATCH 2/5] fix: tailwind config

---
 apps/templates/expo-router-with-nativewind/tailwind.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/templates/expo-router-with-nativewind/tailwind.config.js b/apps/templates/expo-router-with-nativewind/tailwind.config.js
index 48b20d8d..a44bd462 100644
--- a/apps/templates/expo-router-with-nativewind/tailwind.config.js
+++ b/apps/templates/expo-router-with-nativewind/tailwind.config.js
@@ -2,7 +2,7 @@ import gluestackPlugin from "@gluestack-ui/nativewind-utils/tailwind-plugin";
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: "media",
+  darkMode: "class",
   content: ["app/**/*.{tsx,jsx,ts,js}", "components/**/*.{tsx,jsx,ts,js}"],
   presets: [require("nativewind/preset")],
   safelist: [

From 895421721de3fc3bcee9fbc3ea6dabed1aa73faf Mon Sep 17 00:00:00 2001
From: Akash Gautam <akash3gtm@gmail.com>
Date: Wed, 12 Feb 2025 19:04:16 +0530
Subject: [PATCH 3/5] fix: readme

---
 .../expo-router-with-nativewind/README.md     | 28 +++++--------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/apps/templates/expo-router-with-nativewind/README.md b/apps/templates/expo-router-with-nativewind/README.md
index cd4feb8a..44d94055 100644
--- a/apps/templates/expo-router-with-nativewind/README.md
+++ b/apps/templates/expo-router-with-nativewind/README.md
@@ -1,19 +1,13 @@
 # Welcome to your Expo app 👋
 
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+This is an [Expo](https://expo.dev) project created with [`create-gluestack-app`](https://www.npmjs.com/package/create-gluestack).
 
 ## Get started
 
-1. Install dependencies
+1. Start the app
 
    ```bash
-   npm install
-   ```
-
-2. Start the app
-
-   ```bash
-    npx expo start
+    npm run start
    ```
 
 In the output, you'll find options to open the app in a
@@ -25,26 +19,18 @@ In the output, you'll find options to open the app in a
 
 You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
 
-## Get a fresh project
-
-When you're ready, run:
-
-```bash
-npm run reset-project
-```
-
-This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
-
 ## Learn more
 
 To learn more about developing your project with Expo, look at the following resources:
 
 - [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
 - [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+- [Nativewind](https://www.nativewind.dev/): Nativewind is a utility-first library for building native apps with Tailwind CSS.
+- [Gluestack](https://gluestack.io/): Gluestack is a component library for building native apps with Tailwind CSS.
 
 ## Join the community
 
 Join our community of developers creating universal apps.
 
-- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
-- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
+- [gluestack-ui on GitHub](https://github.com/gluestack/gluestack-ui): View our open source ui library and contribute.
+- [gluestack community](https://discord.com/channels/1050761204852858900/1336392784168484914): Chat with gluestack users and ask questions.

From 82b772e83a7b9d3a174588dbbf2ddfb904a17479 Mon Sep 17 00:00:00 2001
From: Akash Gautam <akash3gtm@gmail.com>
Date: Wed, 12 Feb 2025 19:04:36 +0530
Subject: [PATCH 4/5] chore: remove reset command

---
 .../scripts/reset-project.js                  | 84 -------------------
 1 file changed, 84 deletions(-)
 delete mode 100755 apps/templates/expo-router-with-nativewind/scripts/reset-project.js

diff --git a/apps/templates/expo-router-with-nativewind/scripts/reset-project.js b/apps/templates/expo-router-with-nativewind/scripts/reset-project.js
deleted file mode 100755
index 5f814634..00000000
--- a/apps/templates/expo-router-with-nativewind/scripts/reset-project.js
+++ /dev/null
@@ -1,84 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * This script is used to reset the project to a blank state.
- * It moves the /app, /components, /hooks, /scripts, and /constants directories to /app-example and creates a new /app directory with an index.tsx and _layout.tsx file.
- * You can remove the `reset-project` script from package.json and safely delete this file after running it.
- */
-
-const fs = require("fs");
-const path = require("path");
-
-const root = process.cwd();
-const oldDirs = ["app", "components", "hooks", "constants", "scripts"];
-const newDir = "app-example";
-const newAppDir = "app";
-const newDirPath = path.join(root, newDir);
-
-const indexContent = `import { Text, View } from "react-native";
-
-export default function Index() {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Text>Edit app/index.tsx to edit this screen.</Text>
-    </View>
-  );
-}
-`;
-
-const layoutContent = `import { Stack } from "expo-router";
-
-export default function RootLayout() {
-  return <Stack />;
-}
-`;
-
-const moveDirectories = async () => {
-  try {
-    // Create the app-example directory
-    await fs.promises.mkdir(newDirPath, { recursive: true });
-    console.log(`📁 /${newDir} directory created.`);
-
-    // Move old directories to new app-example directory
-    for (const dir of oldDirs) {
-      const oldDirPath = path.join(root, dir);
-      const newDirPath = path.join(root, newDir, dir);
-      if (fs.existsSync(oldDirPath)) {
-        await fs.promises.rename(oldDirPath, newDirPath);
-        console.log(`➡️ /${dir} moved to /${newDir}/${dir}.`);
-      } else {
-        console.log(`➡️ /${dir} does not exist, skipping.`);
-      }
-    }
-
-    // Create new /app directory
-    const newAppDirPath = path.join(root, newAppDir);
-    await fs.promises.mkdir(newAppDirPath, { recursive: true });
-    console.log("\n📁 New /app directory created.");
-
-    // Create index.tsx
-    const indexPath = path.join(newAppDirPath, "index.tsx");
-    await fs.promises.writeFile(indexPath, indexContent);
-    console.log("📄 app/index.tsx created.");
-
-    // Create _layout.tsx
-    const layoutPath = path.join(newAppDirPath, "_layout.tsx");
-    await fs.promises.writeFile(layoutPath, layoutContent);
-    console.log("📄 app/_layout.tsx created.");
-
-    console.log("\n✅ Project reset complete. Next steps:");
-    console.log(
-      "1. Run `npx expo start` to start a development server.\n2. Edit app/index.tsx to edit the main screen.\n3. Delete the /app-example directory when you're done referencing it."
-    );
-  } catch (error) {
-    console.error(`Error during script execution: ${error}`);
-  }
-};
-
-moveDirectories();

From b42aaf01554e1585e4a41cfb6ec3a0c7f15acd6d Mon Sep 17 00:00:00 2001
From: Akash Gautam <akash3gtm@gmail.com>
Date: Wed, 12 Feb 2025 19:04:59 +0530
Subject: [PATCH 5/5] chore: remove reset command

---
 apps/templates/expo-router-with-nativewind/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/templates/expo-router-with-nativewind/package.json b/apps/templates/expo-router-with-nativewind/package.json
index f4d73ca4..083461da 100644
--- a/apps/templates/expo-router-with-nativewind/package.json
+++ b/apps/templates/expo-router-with-nativewind/package.json
@@ -4,7 +4,6 @@
   "version": "1.0.0",
   "scripts": {
     "start": "expo start",
-    "reset-project": "node ./scripts/reset-project.js",
     "android": "DARK_MODE=media expo start --android",
     "ios": "DARK_MODE=media expo start --ios",
     "web": "DARK_MODE=media expo start --web",