Adding Navigation to an app

[pedro-w]

I've just started with RNW and have successfully built and modified an app (based on the 'old architecture' template).
I wanted to add navigation to this, based on this guide

However the resulting app doesn't work; metro starts and the app screen appears briefly then disappears with no errors displayed.

I have put my progress so far into a repository: https://github.com/pedro-w/navigation-test

Would anyone be able to tell me, is this supposed to work? Have I made a mistake or is this combination of navigation and react native for windows not supported?

Thanks,
Peter

[pedro-w]

Here are the dependencies that got installed:

  "dependencies": {
    "@react-navigation/elements": "^2.2.5",
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/native-stack": "^7.2.0",
    "react": "18.3.1",
    "react-native": "0.76.6",
    "react-native-safe-area-context": "^5.1.0",
    "react-native-screens": "^4.5.0",
    "react-native-windows": "0.76.3",
    "tslib": "^2.8.1"
  },

[chrisglein]

It's definitely supposed to work. You can see a functioning example here: https://github.com/microsoft/react-native-gallery
There are possibly compatibility issues between specific versions. I believe I've heard that about react-native-screens in particular. At this point effort would be put into getting this to work with the new architecture (it doesn't yet), so as a mitigation maybe you can drop to an older version of the modules to get unblocked? Try the versions the gallery app uses.

[pedro-w]

That sounds likely - there are at least three different codebases coming together and all under rapid development so not surprising a mismatch has occurred. I imagined I couldn't be the only person trying to use native-navigation with react-native-windows though, that's why I thought it worth asking.

I will try the versions in the gallery app and report back.

I can confirm it doesn't work with the new architecture either, I started there!

Thanks to you and @Yajur-Grover for your support.

[pedro-w]

Just to confirm - I can get something working by dropping back the version numbers of the react-navigation dependencies (from 7.x to 6.x) and accounting for API changes.

Thanks.

[Yajur-Grover]

@pedro-w did you get any errors logged in the terminal that launched metro with the app? Can you paste those logs?

[pedro-w]

No errors seen either in the metro window or in the terminal that launched it (I can post the messages if you want but they are the same as what appears in a normal launch)

I was able to launch it from Visual Studio and there I see an assertion failure in Microsoft::ReactNative::UIManagerModule::createView

https://github.com/microsoft/react-native-windows/blob/5a89de9738378574602b341aeea2be60e5feb427/vnext/Microsoft.ReactNative/Modules/PaperUIManagerModule.cpp#L142C3-L162C4

Looks like viewName, which is set to "RNSScreenContentWrapper", doesn't correspond to a registered view.

When I look in the screens repo I can see implementations for that class in the iOS and android code but not windows. Or that's possibly the problem, I'm not at all familiar with it.

[pedro-w]

These are the messages:

PS E:\Projects\react\navigation-test> yarn windows
(node:9688) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 MSBuild version 17.12.12+1cce77968 for .NET Framework
Build started 14/01/2025 10:26:18.

Project "E:\Projects\react\navigation-test\windows\second.sln" on node 1 (Restore target(s)).
ValidateSolutionConfiguration:
  Building solution configuration "Debug|x64".
_GetAllRestoreProjectPathItems:
  Determining projects to restore...
Restore:
  X.509 certificate chain validation will use the default trust store selected by .NET for code signing.
  X.509 certificate chain validation will use the default trust store selected by .NET for timestamping.
    GET https://api.nuget.org/v3/vulnerabilities/index.json
    OK https://api.nuget.org/v3/vulnerabilities/index.json 109ms
    GET https://api.nuget.org/v3-vulnerabilities/2025.01.10.05.21.07/vulnerability.base.json
    GET https://api.nuget.org/v3-vulnerabilities/2025.01.10.05.21.07/2025.01.14.06.46.29/vulnerability.update.json
    OK https://api.nuget.org/v3-vulnerabilities/2025.01.10.05.21.07/vulnerability.base.json 110ms
    OK https://api.nuget.org/v3-vulnerabilities/2025.01.10.05.21.07/2025.01.14.06.46.29/vulnerability.update.json 138ms
Done Building Project "E:\Projects\react\navigation-test\windows\second.sln" (Restore target(s)).


Build succeeded.
    0 Warning(s)
    0 Error(s)

Time Elapsed 00:00:02.23
√ Restoring NuGet packages
 √ Auto-linking...
Success: No auto-linking changes necessary. (52ms)
 √ Found Solution: E:\Projects\react\navigation-test\windows\second.sln
 i Build configuration: Debug
 i Build platform: x64
 √ Building Solution
 √ Starting the React-Native Server
 √ Enabling Developer Mode
 √ Deploying E:/Projects/react/navigation-test/windows/x64/Debug/second/second.build.appxrecipe
 √ Verifying loopbackExempt
 √ Starting the app