fix error Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was no-CodePudding

so I try to use Navigation React Native when i tried to run it on android emulator this error come out.
I plan to use react native stack, bottom tabs, react native stack

this is my dependencies:

"dependencies": {     
"@react-navigation/bottom-tabs": "^6.5.3",     
"@react-navigation/native": "^6.1.2",     
"@react-navigation/native-stack": "^6.9.8",     
"react": "18.2.0",     
"react-native": "0.71.1"   },

this is my code :


LOG  Running "RNCOURSE" with {"rootTag":11}
 ERROR  Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

This error is located at:
    in RNSScreenStackHeaderConfig (created by HeaderConfig)
    in HeaderConfig (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in RNCOURSE(RootComponent), js engine: hermes
 ERROR  ReferenceError: Property 'Text' doesn't exist

This error is located at:
    in ManageExpenses (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in RNCOURSE(RootComponent), js engine: hermes
 ERROR  Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

This error is located at:
    in RNSScreenStackHeaderConfig (created by HeaderConfig)
    in HeaderConfig (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in RNCOURSE(RootComponent), js engine: hermes

I tried to reinstall react native navigation but still no luck, error still come out, i even try install react-native screen

CodePudding user response：

The error message "Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager" is indicating that the library you are using, React Navigation, is trying to use a component called "RNSScreenStackHeaderConfig" that is not found in the UIManager.

This issue is most likely caused by a version mismatch between the React Navigation library and the React Native version you are using. The "RNSScreenStackHeaderConfig" component was removed in React Navigation 6.x and above, so if you are using a version of React Navigation 6.x or above and React Native version 0.71.1, the component is not supported.

To fix this issue, you will need to either upgrade your React Native version to 0.73.0 or later, or downgrade your React Navigation version to 5.x.

Additionally, the second error "ReferenceError: Property 'Text' doesn't exist" is indicating that there's a missing import of 'Text' component from 'react-native' package. Make sure that you have imported the Text component from 'react-native' in the component where you're using it or in the global file.

import { Text } from 'react-native'

It's also worth checking the documentation of React Navigation to ensure that you have the correct version of the library and that you are using the correct syntax for the components and props in your code.

CodePudding user response：

Verify that you have completed all steps of the installation. After installing @react-nativigation/native, you must install react-native-screens react-native-safe-area-context, then add the code in Android's MainActivity as specified here: https://reactnavigation.org/docs/getting-started.

Finally make sure you code is wrapped in the .

If still not working try to show some example code so we can look at your code.