Recently I have began development in react-native and have been trying to build an app. I successfully implemented react navigation initially, but after I tried to install and use other packages I failed and gave up and tried to remove the. Somehow I ended up messing up my project and even basic navigation fails.
As of now I am simply trying to create a react native project and running it on ios using XCode simulator. Following this tutorial, https://reactnavigation.org/docs/hello-react-navigation. When I try running the most simple example given I get this error. After carefully following all the previous steps.
ERROR Invariant Violation: requireNativeComponent: >"RNSScreenStackHeaderConfig" was not found in the UIManager.
This error is located at:
in RNSScreenStackHeaderConfig (at HeaderConfig.tsx:128)
in HeaderConfig (at NativeStackView.native.tsx:223)
in MaybeFreeze (at src/index.native.tsx:229)
in RNSScreen (at createAnimatedComponent.js:242)
in AnimatedComponent (at createAnimatedComponent.js:295)
in AnimatedComponentWrapper (at src/index.native.tsx:208)
in Screen (at NativeStackView.native.tsx:176)
in SceneView (at NativeStackView.native.tsx:278)
in RNSScreenStack (at src/index.native.tsx:160)
in ScreenStack (at NativeStackView.native.tsx:269)
in NativeStackViewInner (at NativeStackView.native.tsx:323)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
in SafeAreaProviderCompat (at NativeStackView.native.tsx:322)
in NativeStackView (at createNativeStackNavigator.tsx:67)
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 Twisten(RootComponent) (at renderApplication.js:60)
This is the code I am running.
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>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
I am running it using the command react-native run-ios
I would expect this to work and show a simple homescreen however it errors when running the code. Any help is appreciated, thank you.
