CODEWITHSUNDEEP
react-nativeexpoexpo-router
Antonio
Antonio

Reputation: 11

Expo Router Bug

After Installing the Expo router dependency, I encountered an error:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

This error is located at:
    in ContextNavigator (at ExpoRoot.js:64)
    in ExpoRoot (at qualified-entry.js:20)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (at withDevTools.ios.js:25)
    in withDevTools(ErrorOverlay) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes

I tried to use the expo router dependency normally, but it didn't work at all.

Upvotes: 1

Views: 1205

Answers (3)

Andrei
Andrei

Reputation: 44680

I fixed the issue with useNavigation() by importing it from react-navigation/native instead of expo-router.

✅ Works:

import {useNavigation} from "@react-navigation/native"

❌ Doesn't work:

import {useNavigation} from "expo-router"

Upvotes: 0

Vasileios Moysidis
Vasileios Moysidis

Reputation: 1

I struggled with this error for quite some time without any success. As the message points out it can be any rules violation of the react hooks and it can be a real pain to find out since there is no help to guide you where to look.

Long story short, I found where the problem was when I checked with Eslint. You have to run in the command line:

npx expo lint

It will install eslint, scan your code, and show you the warnings and errors. Most of all it will show where the problem is in your code.

Upvotes: 0

Luca
Luca

Reputation: 26

I used to see this error, but I don't have it anymore.

It is hard to say without seeing your code but, have you tried reviewing the layouts (stack, tab, slot...)?

Check where you may be using any expo hook. Coment all of them until the error desapears to isolate the problem.

This happens, for example, if you use a hook (like useIsFocused() - react-native) inside an useEffect.

Upvotes: 0

Related Questions