Fresh Expo 54 project + gluestack init has dependency and runtime problems

[t3db0t]

I've been following the other Expo 54 thread but I wanted to start a new one specifically for fresh, brand-new installs. Here's a repro:

https://github.com/t3db0t/expo54-gluestack3-test

This repo is the result of:

1. pnpx create-expo-app@latest expo54-gluestack3-test
2. cd expo54-gluestack3-test
3. pnpx gluestack-ui init

During gluestack-ui init, you'll see:

Initializing gluestack-ui v3...

│
◇  Repository already cloned.
│
◇  Git pull successful.
│
○  ⏳ Installing dependencies. This might take a couple of minutes
 WARN  3 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6, rimraf@3.0.2
 WARN  Issues with peer dependencies found
.
└─┬ expo-router 6.0.6
  └── ✕ unmet peer react-native-safe-area-context@">= 5.4.0": found 4.14.1

And then trying to run the app in Expo Go:

Logs for your project will appear below. Press Ctrl+C to exit.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
iOS Bundled 4890ms node_modules/expo-router/entry.js (1582 modules)
 WARN  SafeAreaView has been deprecated and will be removed in a future release. Please use 'react-native-safe-area-context' instead. See https://github.com/th3rdwave/react-native-safe-area-context
 ERROR  [Error: Unable to manually set color scheme without using darkMode: class. See: https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually] 

Code: index.tsx
  19 |
  20 |   useEffect(() => {
> 21 |     setColorScheme(mode);
     |                   ^
  22 |     // eslint-disable-next-line react-hooks/exhaustive-deps
  23 |   }, [mode]);
  24 |
Call Stack
  useEffect$argument_0 (components/ui/gluestack-ui-provider/index.tsx:21:19) 

Code: _layout.tsx
  17 |   return (
  18 |     
> 19 |     <GluestackUIProvider mode="light">
     |     ^
  20 |       <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
  21 |       <Stack>
  22 |         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
Call Stack
  RootLayout (app/_layout.tsx:19:5)

I've started investigating what's going on; it wasn't clear from the other thread if work is ongoing to support Expo 54 or what. Thanks all for your help!

[t3db0t]

Beyond the dependency issues, and this initial error, there's also lots of other confusing funkiness, among others, the gluestack-ui-provider/index.tsx file seems to have multiple issues, like importing from '@gluestack-ui/core/overlay/creator'...? Am I missing something or is this all messed up?

[leobar37]

same here!

[Sanchitv3]

Hi @t3db0t @leobar37 ,
Thanks for sharing the repro 🙏
Can you try starting fresh and re-running the init step with the latest release?
pnpx gluestack-ui@latest init
Sometimes the older init binary sticks around and causes mismatched dependencies (esp. with Expo 54). A clean run with the latest version should resolve most of these issues.

Let us know if you still hit the same errors after that—we’re actively testing on Expo SDK 54 and patching edge cases 🚀

[t3db0t]

Thanks @Sanchitv3 , I did:

pnpx create-expo-app@latest expo54-gluestack3latest-test
pnpx gluestack-ui@latest init

But it's still forcing some old versions:

Initializing gluestack-ui v3...

│
◇  Repository already cloned.
│
◇  Git pull successful.
│
○  ⏳ Installing dependencies. This might take a couple of minutes
 WARN  3 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6, rimraf@3.0.2
 WARN  Issues with peer dependencies found
.
└─┬ expo-router 6.0.6
  └── ✕ unmet peer react-native-safe-area-context@">= 5.4.0": found 4.14.1

and then

Starting Metro Bundler
The following packages should be updated for best compatibility with the installed expo version:
  react-native-safe-area-context@4.14.1 - expected version: ~5.6.0
  react-native-svg@15.13.0 - expected version: 15.12.1
Your project may not work correctly until you install the expected versions of the packages.

and sure enough:

› Opening on iOS...
› Opening exp://192.168.50.146:8081 on iPhone 16 Plus
› Press ? │ show all commands
Error: ENOENT: no such file or directory, scandir '/Users/tedhayes/Documents/photophlo-mobile/assets/images'
    at Object.readdir (node:internal/fs/promises:957:18)
    at getAbsoluteAssetRecord (/Users/tedhayes/Library/Caches/pnpm/dlx/32277ef8212dfbe4659caba3748e6bd5b93e18561945f800fc2608cd17e14944/199596d884c-4847/node_modules/.pnpm/metro@0.83.1/node_modules/metro/src/Assets.js:77:17)
    at getAsset (/Users/tedhayes/Library/Caches/pnpm/dlx/32277ef8212dfbe4659caba3748e6bd5b93e18561945f800fc2608cd17e14944/199596d884c-4847/node_modules/.pnpm/metro@0.83.1/node_modules/metro/src/Assets.js:191:18)
    at Server._processSingleAssetRequest (/Users/tedhayes/Library/Caches/pnpm/dlx/32277ef8212dfbe4659caba3748e6bd5b93e18561945f800fc2608cd17e14944/199596d884c-4847/node_modules/.pnpm/metro@0.83.1/node_modules/metro/src/Server.js:372:20)
    at Server._processRequest (/Users/tedhayes/Library/Caches/pnpm/dlx/32277ef8212dfbe4659caba3748e6bd5b93e18561945f800fc2608cd17e14944/199596d884c-4847/node_modules/.pnpm/metro@0.83.1/node_modules/metro/src/Server.js:458:7)
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
| [Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`. It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.
iOS Bundling failed 5333ms node_modules/expo-router/entry.js (1573 modules)
 ERROR  Error: Failed to get the SHA-1 for: /Users/tedhayes/Library/Caches/pnpm/dlx/32277ef8212dfbe4659caba3748e6bd5b93e18561945f800fc2608cd17e14944/199596d884c-4847/node_modules/.pnpm/@expo+cli@54.0.6_expo@54.0.8_@babel+core@7.28.4_react-native@0.81.4_@babel+core@7.28.4__a36e499f8aa54707750a1a022630c0e1/node_modules/@expo/cli/build/metro-require/require.js.
      Potential causes:
        1) The file is not watched. Ensure it is under the configured `projectRoot` or `watchFolders`.
        2) Check `blockList` in your metro.config.js and make sure it isn't excluding the file path.
        3) The file may have been deleted since it was resolved - try refreshing your app.
        4) Otherwise, this is a bug in Metro or the configured resolver - please report it.
    at DependencyGraph.getOrComputeSha1 (/Users/tedhayes/Library/Caches/pnpm/dlx/32277ef8212dfbe4659caba3748e6bd5b93e18561945f800fc2608cd17e14944/199596d884c-4847/node_modules/.pnpm/metro@0.83.1/node_modules/metro/src/node-haste/DependencyGraph.js:182:13)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at Transformer.transformFile (/Users/tedhayes/Library/Caches/pnpm/dlx/32277ef8212dfbe4659caba3748e6bd5b93e18561945f800fc2608cd17e14944/199596d884c-4847/node_modules/.pnpm/metro@0.83.1/node_modules/metro/src/DeltaBundler/Transformer.js:96:22)

I verified that I'm calling version 3.0.5 of gluestack-ui. Repro: https://github.com/t3db0t/expo54-gluestack3latest-test

[t3db0t]

Yes, all the same problems as before even after doing

pnpm exec expo install \
  react-native-safe-area-context@~5.6.0 \
  react-native-svg@15.12.1 \
  expo-router@~6.0.5

[daniel-alsen]

I can confirm similar issues with a completely fresh Expo 54 project and Gluestack 3 installation.

My existing Expo app with Glustack started crashing so I did a fresh install:

npx create-expo-app@latest
npx gluestack-ui init
npx gluestack-ui add box

-->>

| [Reanimated] Seems like you are using a Babel plugin react-native-reanimated/plugin. It was moved to react-native-worklets package. Please use react-native-worklets/plugin instead.
| [Reanimated] Seems like you are using a Babel plugin react-native-reanimated/plugin. It was moved to react-native-worklets package. Please use react-native-worklets/plugin instead.
| [Reanimated] Seems like you are using a Babel plugin react-native-reanimated/plugin. It was moved to react-native-worklets package. Please use react-native-worklets/plugin instead.
| [Reanimated] Seems like you are using a Babel plugin react-native-reanimated/plugin. It was moved to react-native-worklets package. Please use react-native-worklets/plugin instead.
| [Reanimated] Seems like you are using a Babel plugin react-native-reanimated/plugin. It was moved to react-native-worklets package. Please use react-native-worklets/plugin instead.
| [Reanimated] Seems like you are using a Babel plugin react-native-reanimated/plugin. It was moved to react-native-worklets package. Please use react-native-worklets/plugin instead.
| [Reanimated] Seems like you are using a Babel plugin react-native-reanimated/plugin. It was moved to react-native-worklets package. Please use react-native-worklets/plugin instead.
iOS Bundled 5172ms node_modules/expo-router/entry.js (1582 modules)

WARN SafeAreaView has been deprecated and will be removed in a future release. Please use 'react-native-safe-area-context' instead. See https://github.com/th3rdwave/react-native-safe-area-context

WARN Route "./(tabs)/explore.tsx" is missing the required default export. Ensure a React component is exported as default.
WARN Route "./(tabs)/index.tsx" is missing the required default export. Ensure a React component is exported as default.
WARN Route "./_layout.tsx" is missing the required default export. Ensure a React component is exported as default.
ERROR [TypeError: Cannot read property 'level' of undefined]

Code: parallax-scroll-view.tsx
1 | import type { PropsWithChildren, ReactElement } from 'react';
2 | import { StyleSheet } from 'react-native';

3 | import Animated, {
| ^
4 | interpolate,
5 | useAnimatedRef,
6 | useAnimatedStyle,
Call Stack
(components/parallax-scroll-view.tsx:3)
(app/(tabs)/explore.tsx:6)
ERROR [TypeError: Cannot read property 'level' of undefined]

[shaheem-khanzada]

after creating latest project useing gluestack cli i run npx expo prebuild
but on run getting error

› Logs for your project will appear below. Press Ctrl+C to exit.
iOS Bundled 2510ms node_modules/expo-router/entry.js (1783 modules)
[React] [TypeError: Cannot assign to read-only property 'NONE']
[React] [TypeError: Cannot assign to read-only property 'NONE']
[React] [TypeError: Cannot assign to read-only property 'NONE']

[daniel-alsen]

Short story is that Gluestack is not working on Expo 54, but hopefully later after Nativewind V5 is released and the dependency to legendapp/motion is removed.

[vladislav-gorovenko]

Short story is that Gluestack is not working on Expo 54, but hopefully later after Nativewind V5 is released and the dependency to legendapp/motion is removed.

is there any info on when it is going to be fixed?

[Sanchitv3]

Hi @t3db0t @leobar37 @daniel-alsen @vladislav-gorovenko @shaheem-khanzada ,

This has already been fixed — can you please try again with the latest release? 🚀

If you’re upgrading an existing Gluestack UI project to Expo SDK 54, here are the recommended troubleshooting steps:

rm -rf node_modules
rm -rf .expo
rm -rf package-lock.json yarn.lock

yarn add @gluestack-ui/core@latest @gluestack-ui/utils@latest
npx expo install expo@latest --fix

yarn add react-native-reanimated
yarn add react-native-worklets

yarn start --reset-cache

Also, please make sure you’re on the latest version of NativeWind.

Let us know if you’re still hitting issues after this 🙏

[t3db0t]

OK @Sanchitv3 I did a 100% fresh install again. At first I was getting a runtime error but I'm pretty sure that was on my end (pnpm cache). It appears to be building normally but I will do some further testing. Thank you so much for your work on this!

[gaurav21r]

@Sanchitv3 I just did this roght now (Oct 26) and still have this error.

Adding import '@/global.css'; inside @/components/ui/gluestack-ui-provider/index.tsx resolved it as mentioned earlier by someone (Sorry I forgot who, or else would've provided due credits!)

Are you sure the updated version has been pushed to the npm registry?

I am on a Macbook Air, Fresh EXPO v54.0.20