"RNSScreenStackHeaderConfig" was not found in the UIManager

[jgf5013]

A few folks using Nx are getting the react-navigation mentioned here.

Error

 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 View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in main(RootComponent) (at renderApplication.js:60)

package.json (showing relevant parts only)

{
  ....,
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "react": "17.0.2",
    "react-native": "0.66.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.2.4",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0",
    ...
  },
  "devDependencies": {
    "@nrwl/cli": "13.2.1",
    "@nrwl/react-native": "13.2.1",
    "@nrwl/workspace": "13.2.1",
    "@react-native-community/cli": "6.1.0",
    "@react-native-community/cli-platform-android": "6.1.0",
    "@react-native-community/cli-platform-ios": "6.1.0",
    "@types/node": "14.14.33",
    "@types/react": "17.0.30",
    "@types/react-native": "0.66.2",
    "metro": "0.66.2",
    "metro-react-native-babel-preset": "0.66.2",
    "metro-resolver": "0.66.2",
    "typescript": "~4.4.3",
     ...
  }
}

App.tsx

...
const App = () => {
  return (
    <AppContextProvider gameState={{game: "flags", multipleChoiceResponses: 4}}>
      <StatusBar barStyle="dark-content" />
        <SafeAreaView>
          <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={styles.scrollView}>
            <NavigationContainer>
              <Stack.Navigator>
                <Stack.Screen name="Flags" component={PlayContainer} />
              </Stack.Navigator>
            </NavigationContainer>
        </ScrollView>
      </SafeAreaView>
    </AppContextProvider>
  );
};

export default App;

[alcir-junior-caju]

I have the same problem.

[nzcodarnoc]

I've been having the same error too, this solved it for me:

https://stackoverflow.com/questions/67556606/invariant-violation-requirenativecomponent-rnsscreen-was-not-found-in-the-u/67956805#67956805

TL;DR:
Normally these pods would be linked automatically but because of monorepo we have to tell the build system about our novel monorepo directory structure

[xiongemi]

maybe in the app's package.json (not the workspace root's package.json), add "RNSScreenStackHeaderConfig": "*" in the dependencies, it should autolink for you.

[nzcodarnoc]

Thanks @xiongemi that insight lead the me trying the following which solved this error for me.

Adding the following packages in the app's package.json (not the workspace root's package.json) has solved the problem for both iOS and Android.

"@react-navigation/native": "*",
"@react-navigation/native-stack": "*",
"react-native-screens": "*",
"react-native-gesture-handler": "*",
"react-native-safe-area-context": "*"

I didn't need to make any changes in the podfile for iOS