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
This is some kind of compatibility issue. Fixed by
npm update
. Anyone who knows more feel free to elaborate, but the situation is resolved.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.