Found a bug in npx gluestack-ui init for Dark Mode

[tipbsy]

Description

Found a bug in npx gluestack-ui init

CodeSandbox/Snack link

https://gluestack.io/ui/docs/home/theme-configuration/dark-mode

Steps to reproduce

After using npx gluestack-ui init, files such as metro.config.js and tailwind.config.js are generated, and the nativewind plugin is introduced into the project. This plugin plays a crucial role in using Tailwind CSS within an Expo project. In my most recent use of npx gluestack-ui init to introduce the gluestack-ui with the nativewind version ^4.0.36, the metro.config.js file was empty. However, the v4 version of nativewind requires the following code to be added to the metro.config.js file for it to take effect:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: './global.css' });

Without this code, Tailwind CSS will not function at all.

Reference link：https://www.nativewind.dev/v4/getting-started/expo-router

gluestack-ui Version

v2

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

No response

[vaibhk20]

Hey @tipbsy thanks for reporting the issue! It's already on our roadmap. We'll look into it and provide an update here soon. 👍