Gluestack-UI React Expo initialization failure

[mwojcik0]

Description

Can't initialize gluestack using gluestack-ui init in my project that uses node

CodeSandbox/Snack link

https://gluestack.io/ui/docs/home/getting-started/installation

Steps to reproduce

1. npx create-expo-app@latest
2. cd app-name
3. npx gluestack-ui init
4. Detected a Expo project, continue?
   • Yes
5. The command you've run is attempting to modify certain files in your project, if already exist. Here's what's happening:
   • babel.config.js
   • metro.config.js
   • tailwind.config.js
   • global.css
   • tsconfig.json Proceed with caution. Make sure to commit your changes before proceeding. Continue?
   • Yes
6. Initializing gluestack-ui v2... ■ Cloning failed, fatal: not a git repository (or any of the parent directories): .git
7. ⏳ Generating project configuration. This might take a couple of minutes
   ■ Error: Error: ENOENT: no such file or directory, lstat 'C:\Users\xxx.gluestack\cache\gluestack-ui\example\storybook-nativewind\src\tailwind.config.js'

The install is finalized "successfully", but when I want to use "npx gluestack-ui add box", the response is: gluestack is not initialized in the project. use 'npx gluestack-ui init' or 'help' to continue.

gluestack-ui Version

v2

Platform

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

Other Platform

Windows 11

Additional Information

No response

[mwojcik0]

The version of Expo is v51, Node v20, React v18.2.0

[rajat693]

hey @mwojcik0, Thanks for reporting the issue. We will have a look.

[blue86321]

+1 same issue on macOS

[juato]

+1 same issue on Windows 11 Home Insider Preview 24H2

[The-Lone-Druid]

Same issue as @juato 😔

[mwojcik0]

Please let me know, if there will be any fixes to that issue. I was looking for both react and react native component library since I had one project in mind that needs the same app developed for mobile as well as web and this one seems to be the most polished one I have found. Thank you

[Viraj-10]

Hey @mwojcik0, @The-Lone-Druid , @juato , @blue86321 , Seems like there is issue with some specific system or permission. I have created github repo with gluestack-ui-v2 up and running. Please give it try for now till we fix this issue.

[srrsparky]

Thanks @Viraj-10

I was able to use your repo to make a blank expo project work.

npx create-expo-app gluestack --template blank
cd gluestack
npx gluestack-ui init
npx gluestack-ui add --all

Remove single quotes in these two lines in App.js

    import "'@/global.css'";
    import { GluestackUIProvider } from "@/'components/ui'/gluestack-ui-provider";

Edit metro-config.js to contain the following (mine was blank):

    const { getDefaultConfig } = require('expo/metro-config');
    const { withNativeWind } = require('nativewind/metro');

    const config = getDefaultConfig(__dirname);

    module.exports = withNativeWind(config, { input: './global.css' });

Change tailwind.config.js "content" part to (adding the bottom line):

  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './src/core-components/**/**/*.{html,js,jsx,ts,tsx}',
    './src/components/**/*.{html,js,jsx,ts,tsx,mdx}',
    './src/hooks/**/*.{html,js,jsx,ts,tsx,mdx}',
    "./app/**/*.{tsx,jsx,ts,js}", "./components/**/*.{tsx,jsx,ts,js}",
  ],

npx expo start --clear

(it will ask you to install typescript stuff)

My testing App.js

import { StatusBar } from 'expo-status-bar';
import "@/global.css";
import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
import { StyleSheet, View } from 'react-native';
import { Box } from './components/ui/box';
import { Text } from './components/ui/text';
import { Button, ButtonText } from './components/ui/button';

export default function App() {
  return (
    <GluestackUIProvider mode="light">
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <Box className="bg-primary-500 p-5">
        <Text className="text-typography-0">This is the Box</Text>
      </Box> 
      <Button size="md" variant="solid" action="primary">
<ButtonText>Hello World!</ButtonText>
</Button>
    </View>
  </GluestackUIProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[rayduui]

Thanks @Viraj-10

I was able to use your repo to make a blank expo project work.

npx create-expo-app gluestack --template blank
cd gluestack
npx gluestack-ui init
npx gluestack-ui add --all

Remove single quotes in these two lines in App.js

  import "'@/global.css'";
  import { GluestackUIProvider } from "@/'components/ui'/gluestack-ui-provider";

Edit metro-config.js to contain the following (mine was blank):

  const { getDefaultConfig } = require('expo/metro-config');
  const { withNativeWind } = require('nativewind/metro');

  const config = getDefaultConfig(__dirname);

  module.exports = withNativeWind(config, { input: './global.css' });

Change tailwind.config.js "content" part to (adding the bottom line):

  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './src/core-components/**/**/*.{html,js,jsx,ts,tsx}',
    './src/components/**/*.{html,js,jsx,ts,tsx,mdx}',
    './src/hooks/**/*.{html,js,jsx,ts,tsx,mdx}',
    "./app/**/*.{tsx,jsx,ts,js}", "./components/**/*.{tsx,jsx,ts,js}",
  ],

npx expo start --clear

(it will ask you to install typescript stuff)

My testing App.js

import { StatusBar } from 'expo-status-bar';
import "@/global.css";
import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
import { StyleSheet, View } from 'react-native';
import { Box } from './components/ui/box';
import { Text } from './components/ui/text';
import { Button, ButtonText } from './components/ui/button';

export default function App() {
  return (
    <GluestackUIProvider mode="light">
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <Box className="bg-primary-500 p-5">
        <Text className="text-typography-0">This is the Box</Text>
      </Box> 
      <Button size="md" variant="solid" action="primary">
<ButtonText>Hello World!</ButtonText>
</Button>
    </View>
  </GluestackUIProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

tried your method but failed with nativewind/metro when applying similar changes to my own repo.

I need to npm install below

npm i nativewind tailwindcss @gluestack-ui/nativewind @gluestack-ui/nativewind-utils react-native-svg

Then need to sudo npx expo start for each run on Macbook otherwise I have permission error.

To gain access permanently to the node modules folder

sudo chown -R $USER /<path_to_your_dev_folder>/node_modules/

[rayduui]

Hey @mwojcik0, @The-Lone-Druid , @juato , @blue86321 , Seems like there is issue with some specific system or permission. I have created github repo with gluestack-ui-v2 up and running. Please give it try for now till we fix this issue.

there is a permission error from tailwindcss:

Rebuilding...
[Error: EACCES: permission denied, open '/Users/...../node_modules/.cache/nativewind/global.css.ios.css'] {
  errno: -13,
  code: 'EACCES',
  syscall: 'open',
  path: '/Users/...../node_modules/.cache/nativewind/global.css.ios.css'
}

To gain access permanently to the node modules folder:

sudo chown -R $USER /<path_to_your_dev_folder>/node_modules/

[johnsonchau-bulb]

Hey team, are there any updates to this issue?

[mwojcik0]

Thanks @Viraj-10

I was able to use your repo to make a blank expo project work.

npx create-expo-app gluestack --template blank
cd gluestack
npx gluestack-ui init
npx gluestack-ui add --all

Remove single quotes in these two lines in App.js

  import "'@/global.css'";
  import { GluestackUIProvider } from "@/'components/ui'/gluestack-ui-provider";

Edit metro-config.js to contain the following (mine was blank):

  const { getDefaultConfig } = require('expo/metro-config');
  const { withNativeWind } = require('nativewind/metro');

  const config = getDefaultConfig(__dirname);

  module.exports = withNativeWind(config, { input: './global.css' });

Change tailwind.config.js "content" part to (adding the bottom line):

  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './src/core-components/**/**/*.{html,js,jsx,ts,tsx}',
    './src/components/**/*.{html,js,jsx,ts,tsx,mdx}',
    './src/hooks/**/*.{html,js,jsx,ts,tsx,mdx}',
    "./app/**/*.{tsx,jsx,ts,js}", "./components/**/*.{tsx,jsx,ts,js}",
  ],

npx expo start --clear

(it will ask you to install typescript stuff)

My testing App.js

import { StatusBar } from 'expo-status-bar';
import "@/global.css";
import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
import { StyleSheet, View } from 'react-native';
import { Box } from './components/ui/box';
import { Text } from './components/ui/text';
import { Button, ButtonText } from './components/ui/button';

export default function App() {
  return (
    <GluestackUIProvider mode="light">
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <Box className="bg-primary-500 p-5">
        <Text className="text-typography-0">This is the Box</Text>
      </Box> 
      <Button size="md" variant="solid" action="primary">
<ButtonText>Hello World!</ButtonText>
</Button>
    </View>
  </GluestackUIProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I'm unfortunately getting stuck on launching Expo via: expo start --web, in case of @Viraj-10 solution:

Web C:\Users\xxx\Desktop\expo-app-gluestack-v2-main\node_modules\expo-router/entry.js ▓▓▓▓░░░░░░░░░░░░ 25.0% (119/266) λ C:\Users\xxx\Desktop\expo-app-gluestack-v2-main\node_modules\expo-router\node/render.js ▓▓▓░░░░░░░░░░░░░ 19.3% (124/282)

And @srrsparky solution:

Web C:\Users\xxx\Desktop\test-app\node_modules\expo/AppEntry.js ▓▓▓▓▓▓░░░░░░░░░░ 41.6% ( 79/148)

[mwojcik0]

Thanks @Viraj-10

I was able to use your repo to make a blank expo project work.

npx create-expo-app gluestack --template blank

cd gluestack

npx gluestack-ui init

npx gluestack-ui add --all

Remove single quotes in these two lines in App.js

    import "'@/global.css'";

    import { GluestackUIProvider } from "@/'components/ui'/gluestack-ui-provider";

Edit metro-config.js to contain the following (mine was blank):

    const { getDefaultConfig } = require('expo/metro-config');

    const { withNativeWind } = require('nativewind/metro');

    const config = getDefaultConfig(__dirname);

    module.exports = withNativeWind(config, { input: './global.css' });

Change tailwind.config.js "content" part to (adding the bottom line):

  content: [

    './src/**/*.{html,js,jsx,ts,tsx}',

    './src/core-components/**/**/*.{html,js,jsx,ts,tsx}',

    './src/components/**/*.{html,js,jsx,ts,tsx,mdx}',

    './src/hooks/**/*.{html,js,jsx,ts,tsx,mdx}',

    "./app/**/*.{tsx,jsx,ts,js}", "./components/**/*.{tsx,jsx,ts,js}",

  ],

npx expo start --clear

(it will ask you to install typescript stuff)

My testing App.js

import { StatusBar } from 'expo-status-bar';

import "@/global.css";

import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";

import { StyleSheet, View } from 'react-native';

import { Box } from './components/ui/box';

import { Text } from './components/ui/text';

import { Button, ButtonText } from './components/ui/button';

export default function App() {

  return (

    <GluestackUIProvider mode="light">

    <View style={styles.container}>

      <Text>Open up App.js to start working on your app!</Text>

      <StatusBar style="auto" />

      <Box className="bg-primary-500 p-5">

        <Text className="text-typography-0">This is the Box</Text>

      </Box> 

      <Button size="md" variant="solid" action="primary">

<ButtonText>Hello World!</ButtonText>

</Button>

    </View>

  </GluestackUIProvider>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

I'm unfortunately getting stuck on launching Expo via: expo start --web, in case of @Viraj-10 solution:

Web C:\Users\xxx\Desktop\expo-app-gluestack-v2-main\node_modules\expo-router/entry.js ▓▓▓▓░░░░░░░░░░░░ 25.0% (119/266)

λ C:\Users\xxx\Desktop\expo-app-gluestack-v2-main\node_modules\expo-router\node/render.js ▓▓▓░░░░░░░░░░░░░ 19.3% (124/282)

And @srrsparky solution:

Web C:\Users\xxx\Desktop\test-app\node_modules\expo/AppEntry.js ▓▓▓▓▓▓░░░░░░░░░░ 41.6% ( 79/148)

The error seems to occur when I set up the metro.config.js file to contain:

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

When the said config file is empty then the server normally starts.