Expo Router Drawer Navigation Issue

[GaWr26]

Describe the bug

I'm using ignite x with expo router and want to implement a drawer navigation. I get this error: TypeError: 0, require(_dependencyMap[7], "@(...)ct-navigation/native").useLocale is not a function (it is undefined) Anybody came across this already? Cheers

Ignite version

10.0.4

Additional info

System platform win32 arch x64 cpu 12 cores AMD Ryzen 5 5600H with Radeon Graphics

JavaScript (and globally-installed packages) node 18.13.0 C:\Program Files\nodejs\node.EXE npm 8.19.3 C:\Program Files\nodejs\npm.CMD @expo/ngrok 4.1.3 @react-native-community/cli 10.1.0 eas-cli 12.6.2 firebase-tools 11.23.1 firebase 9.17.1 npm-check 6.0.1 yarn 1.22.19 yarn 1.22.19 C:\Program Files (x86)\Yarn\bin\yarn.CMD pnpm - not installed bun - not installed expo 51.0.38 managed

Ignite ignite-cli 10.0.4 C:\Users\Gabor\AppData\Local\npm-cache_npx\e31027f3785124a8\node_modules.bin\ignite.CMD ignite src build C:\Users\Gabor\AppData\Local\npm-cache_npx\e31027f3785124a8\node_modules\ignite-cli\build

Android java 17.0.11 C:\Program Files\Microsoft\jdk-17.0.11.9-hotspot\bin\java.EXE android home - C:\Users\Gabor\AppData\Local\Android\Sdk

Tools git git version 2.39.1.windows.1 C:\Program Files\Git\cmd\git.EXE

[frankcalise]

@GaWr26 are you following the documentation here? https://docs.expo.dev/router/advanced/drawer/

If you could share a repository with the issue reproduced, maybe can help you further. Ignite is just an Expo app with a bunch of pieces in place already, so feel free to follow their documentation (which is usually great!)

[GaWr26]

Thanks for the hint @frankcalise . I'm trying with the most basic approach. My folder structure is like this:

src
└── app
    ├── (app)
    │   ├── (drawer)
    │   │   ├── _layout.tsx
    │   │   └── home.tsx
    │   └── (tabs)
    │       ├── _layout.tsx
    │       ├── community.tsx
    │       ├── debug.tsx
    │       └── index.tsx
    ├── _layout.tsx
    ├── index.tsx
    ├── log-in.tsx
    └── register-push.tsx

where (drawer)/_layout.tsx looks like this:

import { GestureHandlerRootView } from "react-native-gesture-handler"
import { Drawer } from "expo-router/drawer"

export default function Layout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Drawer />
    </GestureHandlerRootView>
  )
}

and (drawer)/home.tsx looks like this:

import { View, Text } from "react-native"

const Page = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Home Screen</Text>
  </View>
)

export default Page

Login, push registration and navigating to the tab navigator works as expected.

Only when I navigate to the (drawer) group router.replace("/(drawer)/") I get: TypeError: 0, require(_dependencyMap[7], "@(...)ct-navigation/native").useLocale is not a function (it is undefined)

It's my first time using ignite so I'm not fully aware of how localisation works.

Some further findings: If I replace (drawer)/_layout.tsx with the code from expo docs

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Drawer } from 'expo-router/drawer';

export default function Layout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Drawer>
        <Drawer.Screen
          name="index" // This is the name of the page and must match the url from root
          options={{
            drawerLabel: 'Home',
            title: 'overview',
          }}
        />
        <Drawer.Screen
          name="user/[id]" // This is the name of the page and must match the url from root
          options={{
            drawerLabel: 'User',
            title: 'overview',
          }}
        />
      </Drawer>
    </GestureHandlerRootView>
  );
}

I still get the error.

If I then delete (drawer)/home.tsx, I get no error and see a blank page and no burger menu

[frankcalise]

@GaWr26 well this doesn't look to be an ignite boilerplate localization issue, but one inside of react navigation

I found this issue which might give you some insight on it: https://github.com/react-navigation/react-navigation/issues/12237

It is possible that you're adding v7 of the drawer since react navigation just had a release, while the Infinite versions of react navigation's supporting libraries are on v6.

Posting your package.json dependencies here could give a better picture, but that's where I'd look and then consider trying the version in the issue if that makes sense

[GaWr26]

Thanks a million @frankcalise, that did the trick. I was using v7 of the drawer..

Sorry for accusing ignite. I've just started using it and really like it.

[frankcalise]

@GaWr26 all good! Had you tried a week ago you wouldn't have hit the issue haha. They just released V7

Glad you're on your way!