skip to Main Content
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;

2

Answers


  1. Chosen as BEST ANSWER

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


  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search