'React Navigation Error, Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager

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.

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

Solution 1:^[1]

I faced with same issue and I killed metro then instead of

npx react-native start

I commanded

npx react-native run-android

to rebuild everything. I think it happened in case of me because I installed packages without stopping the metro

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nstrn Ahmadi

'React Navigation Error, Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]