React-native deps (assume) not correctly being linked with packages

[alan-ws]

Current Behavior

React-native app does not render, even though the build is successful. This occurred after the introduction of react-navigation. However, I do not believe the issues is with react-navigation but with nx. As I have been able to add react-navigation to stand-alone react-native apps perfectly fine. The error might be caused due to dep linking.

Expected Behavior

Adding react-navigation should not break the application and the app should render as a non-monorepo version would.

Steps to Reproduce

Setup nx as per the docs
Add two apps: nextjs and react-native (non-expo version)
[the apps will work perfectly fine at this stage]
yarn add the react-navigation lib with all deps required by the docs, and follow the setup
The react-native app will fail to render at this stage.

Failure Logs

BUILD SUCCESSFUL in 5s
48 actionable tasks: 3 executed, 45 up-to-date
info Connecting to the development server...
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=com.mobile/.MainActivity }
 BUNDLE  src/main.tsx 

 LOG  Running "main" with {"rootTag":1}
 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 RNSScreen (at createAnimatedComponent.js:242)
    in AnimatedComponent (at createAnimatedComponent.js:295)
    in AnimatedComponentWrapper (at src/index.native.tsx:252)
    in MaybeFreeze (at src/index.native.tsx:251)
    in Screen (at NativeStackView.native.tsx:176)
    in SceneView (at NativeStackView.native.tsx:278)
    in RNSScreenStack (at src/index.native.tsx:191)
    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.tsx:34)
    in Provider (at App.tsx:33)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at App.tsx:32)
    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 main(RootComponent) (at renderApplication.js:60)

Environment

Linux: Pop_OS (Ubuntu latest)
Node: v16 (latest)
React-native (latest)
yarn: v1
monorepo: nx

[bilalshaikh42]

I wonder if this is related to #8537.

[matthewjdiaz1]

I'm experiencing the same issue. My react native app from my nx monorepo builds but gets a render error after adding react-navigation and running on ios simulator.

Render Error:
BUNDLE src/main.tsx

LOG Running "main" with {"rootTag":1,"initialProps":{}}
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 RNSScreen (at createAnimatedComponent.js:242)
in AnimatedComponent (at createAnimatedComponent.js:295)
in AnimatedComponentWrapper (at src/index.native.tsx:252)
in MaybeFreeze (at src/index.native.tsx:251)
in Screen (at NativeStackView.native.tsx:176)
in SceneView (at NativeStackView.native.tsx:278)
in RNSScreenStack (at src/index.native.tsx:191)
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 RootNavigation.tsx:14)
in RootNavigation (at App.tsx:23)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at App.tsx:22)
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 main(RootComponent) (at renderApplication.js:60)
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 RNSScreen (at createAnimatedComponent.js:242)
in AnimatedComponent (at createAnimatedComponent.js:295)
in AnimatedComponentWrapper (at src/index.native.tsx:252)
in MaybeFreeze (at src/index.native.tsx:251)
in Screen (at NativeStackView.native.tsx:176)
in SceneView (at NativeStackView.native.tsx:278)
in RNSScreenStack (at src/index.native.tsx:191)
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 RootNavigation.tsx:14)
in RootNavigation (at App.tsx:23)
in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
in BaseNavigationContainer (at NavigationContainer.tsx:132)
in ThemeProvider (at NavigationContainer.tsx:131)
in NavigationContainerInner (at App.tsx:22)
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 main(RootComponent) (at renderApplication.js:60)

[tharinducgs]

This works for me,

https://stackoverflow.com/a/67956805

[xiongemi]

besides install react-navigation, you still need to add react-navigation to app's package.json. (not the root's package.json). i got it working: https://github.com/xiongemi/studio-ghibli-search-engine/blob/main/apps/studio-ghibli-search-engine-mobile/package.json#L7

[matthewjdiaz1]

This works for me,

https://stackoverflow.com/a/67956805

This worked for me as well

[xiongemi]

closed this issue with the solution https://stackoverflow.com/a/67956805

[tom05919]

closed this issue with the solution https://stackoverflow.com/a/67956805

I'm kind of a beginner so I'm confused with what to do with "pod 'RNScreens', :path => '../../../node_modules/react-native-screens/'". Is it a command line that you put into the terminal or do you put it in the profile itself?

[zoe-codez]

This one worked for me: https://stackoverflow.com/a/70712913

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.