React Navigation I requireNativeComponent: "RNSScreenStackHeaderConfig"

Question

I just started my new project. After installing react-navigation and using it in my IOS app i got an error Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.. I unable to find out what's the problem.

Here is My navigation code

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import strings from '../Constants/Strings';
import {Home} from '../Screens';

const Stack = createNativeStackNavigator();

export default MainStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={strings.navHome} component={Home} />
    </Stack.Navigator>
  );
};

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import MainStack from './MainStack';

const Routes = () => {
  return (
    <NavigationContainer>
      <MainStack />
    </NavigationContainer>
  );
};

export default Routes;

Anyone can tell me what's the probem? I never got error like this before

Answer 1

If you are using @react-navigation/native-stack, you should install react-native-screens and react-native-safe-area-context too. I believe your error is because you don't have installed react-native-screens

Check the documentation