CODEWITHSUNDEEP
androidreact-nativereact-navigationreact-navigation-v6
Tim Gass
Tim Gass

Reputation: 383

React Navigation v6 usePreventRemoveContext is undefined error

TypeError: (0, _$$_REQUIRE(_dependencyMap[1], "@react-navigation/native").usePreventRemoveContext) is not a function. (In '(0, _$$_REQUIRE(_dependencyMap[1], "@react-navigation/native").usePreventRemoveContext)()', '(0, _$$_REQUIRE(_dependencyMap[1], "@react-navigation/native").usePreventRemoveContext)' is undefined)

This error is located at:
    in NativeStackViewInner (at NativeStackView.native.tsx:420)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:87)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
    in SafeAreaProviderCompat (at NativeStackView.native.tsx:419)
    in NativeStackView (at createNativeStackNavigator.tsx:72)
    in Unknown (at createNativeStackNavigator.tsx:71)
    in NativeStackNavigator (at App.js:19)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at App.js:18)
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in hello_world(RootComponent) (at renderApplication.js:60)

I am brand new to react-native and react navigation. I am trying to use react navigation v6 and am just running the getting started guide. I am getting this error that I have never seen before. I can run a few basic pages just fine. However, whenever I add navigation I get this unusual error. I have followed all of the guides to the best of my ability and created the original folder with the npx react-native init command. Here's a copy of my App.js file which is the only file that I have changed other than MainActivity.java, where I added the prerequiste onCreate function for React navigation v6. This is straight from their website: https://reactnavigation.org/docs/hello-react-navigation/. I genuinely have no idea why this issue is occurring. Feel free to leave feedback if you need more information. All help would be greatly appreciated.

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Upvotes: 4

Views: 5445

Answers (3)

ejrb
ejrb

Reputation: 338

I ran into this problem because I had an old version of @react-navigation/core. Make sure you have a version compatible with @react-navigation/native's listed dependencies.

In my case, I removed an explicit override in my package.json and ran npm update @react-navigation/core

Upvotes: 0

Eugene
Eugene

Reputation: 11

I ran into the same problem when I rewrote a project from YouTube. I would have @react-navigation/native": "^6.0.11" installed, I would have installed an older version of "@react-navigation/native": "^6.0.6", and "@react-navigation/native-stack": "^6.2.5",. After that it worked.

Upvotes: 1

Tim Gass
Tim Gass

Reputation: 383

This is some kind of compatibility issue. Fixed by npm update. Anyone who knows more feel free to elaborate, but the situation is resolved.

Upvotes: 4

Related Questions