Native Stack is not working with [email protected]

[pcprinz]

Description

After a clean [email protected] installation followed by the recommended installation for the native stack from the Getting Started guide, I get the following build error:

× Building Solution: C:\dev\RNWTests\node_modules\react-native-screens\windows\RNScreens\RNScreens.vcxproj(184,5...
× Build failed with message 7:10>C:\dev\RNWTests\node_modules\react-native-screens\windows\RNScreens\RNScreens.vcxproj(184,5): error : This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is C:\dev\RNWTests\windows\packages\Microsoft.Windows.CppWinRT.2.0.200316.3\build\native\Microsoft.Windows.CppWinRT.props.. Check your build configuration.

Steps to reproduce

1. install clean [email protected]
2. install and init [email protected]
3. install @react-navigation/native, react-native-screens, react-native-safe-area-context, @react-navigation/native-stack, @react-navigation/elements
4. run npx @react-native-community/cli run-windows

Snack or a link to a repository

https://github.com/pcprinz/react-native-windows-tests/tree/0.76-failing-native-stack

Screens version

4.3.0

React Native version

0.76.2

Platforms

Windows

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[kkafar]

Thanks for reporting! Noted. I'll try to get someone to look into this.

[dppo]

It works fine using 4.2.0

[eliekh12]

I have the same error during Windows build with react-native-webview 13.13.1 on [email protected] and using the new architecture.

[pedro-w]

I had this and solved it by editing NuGet.Config in the windows\ sub-directory. I moved the Nuget source above the react-native one, and added the protocol version.
i.e. from

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <config>
    <add key="repositoryPath" value="packages" />
  </config>
  <packageSources>
    <clear />
    <add key="react-native" value="https://pkgs.dev.azure.com/ms/react-native/_packaging/react-native-public/nuget/v3/index.json" />
    <add key="Nuget.org" value="https://api.nuget.org/v3/index.json" />
  </packageSources>
  <disabledPackageSources>
    <clear />
  </disabledPackageSources>
</configuration>

to

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <config>
    <add key="repositoryPath" value="packages" />
  </config>
  <packageSources>
    <clear />
    <add key="Nuget.org" value="https://api.nuget.org/v3/index.json" protocolVersion="3"/>
    <add key="react-native" value="https://pkgs.dev.azure.com/ms/react-native/_packaging/react-native-public/nuget/v3/index.json" />
  </packageSources>
  <disabledPackageSources>
    <clear />
  </disabledPackageSources>
</configuration>

[tux2nicolae]

@kkafar did you manage to get a windows machine? The above workaround does not seem to work for us on #2649 issue

[pedro-w]

IMO #2649 is not the same issue as this (though it is a Windows issue). Have you tried clearing the npm cache (with npx @react-native-community/cli clean)

[kkafar]

No, I haven't tended to this issue yet. Will update when I do

[ClaudiuHBann]

I encountered the same issue as #2649, but I haven't been able to resolve it. This is a major blocker for the Windows platform...

[joshholmeszonal]

@kkafar have you had any luck with this so far?

I've tried taking a look but getting stuck when trying to link RNScreens to the Fabric Example

[tux2nicolae]

@kkafar I see you have a lot of work with this library on Android and IOS and I don't want to look mean, but we really need your help on this issue and here #2649, it's just a blocker for windows platform, we can't build it at all

[joshholmeszonal]

@kkafar is this something that maybe Microsoft would be able to support with as it seems like a massive blocker for a lot of Windows builds

It looks like they're helping out with some packages like these:
microsoft/react-native-windows#14339
microsoft/react-native-windows#14341

It looks like @Yajur-Grover is supporting from Microsoft

[Yajur-Grover]

Just to confirm, this issue is present on the New Architecture correct? react-native-windows currently doesn't have support for @react-navigation, react-native-screens or react-native-safe-area-context on the New Architecture yet. We are actively working on adding support for @react-navigation and the others will also be on our list of modules, but there is no exact timeline fore upgrading them as of yet.

[pedro-w]

@Yajur-Grover if we're talking about the specific repo that @pcprinz links to in the first post, it is the old architecture, I believe. The report says Paper (Old Architecture)

https://github.com/pcprinz/react-native-windows-tests/blob/ce21d805716e319b0413a4ecf46e2e10a106d67d/package.json#L47-L52

However if I try to reproduce it myself, I don't get the same error message that was reported (still doesn't work though). So I think a bit more investigation is needed.

Can you confirm - should it work on the old architecture?

[joshholmeszonal]

All the windows issues seem to have been condensed to this one regardless of new/old arch

[Yajur-Grover]

@Yajur-Grover if we're talking about the specific repo that @pcprinz links to in the first post, it is the old architecture, I believe. The report says Paper (Old Architecture)

https://github.com/pcprinz/react-native-windows-tests/blob/ce21d805716e319b0413a4ecf46e2e10a106d67d/package.json#L47-L52

However if I try to reproduce it myself, I don't get the same error message that was reported (still doesn't work though). So I think a bit more investigation is needed.

Can you confirm - should it work on the old architecture?

I believe it should still work on old architecture. I will try and take a look at the repo and repro the issue locally today to investigate.

[tux2nicolae]

@Yajur-Grover can you also take a look on this issue #2649, on new architecture?

The issue was closed as a duplicate of this one, but it's actually not the same issue

[Yajur-Grover]

@Yajur-Grover can you also take a look on this issue #2649, on new architecture?

The issue was closed as a duplicate of this one, but it's actually not the same issue

It looks like you're trying to use react-native-screens on New Architecture? We currently don't have support for using react-native-screens on Windows with New Architecture. We plan to add New Arch support to it at some point, but there is no scheduled date for it at the moment.

[Yajur-Grover]

@pcprinz I was able to build the solution fine using the branch linked in the message, but the app was auto-closing on launch. Can you try and re-run yarn windows on the linked branch (sometimes you need to re-run the command to get rid of some one-off build errors).

[pedro-w]

This auto-close thing is exactly what I see so it is reproducible at least! I did a bit more investigation of this and I think it is due to a class (RNSScreenContentWrapper) which is not implemented for Windows yet. There are some details in this thread:
microsoft/react-native-windows#14273 (reply in thread)
(in a different repo as I thought the issue might be with react-native-windows itself)
I'd like to help with this but there's very little info I can glean from the iOS and Android implementations as to what the missing class(es) are supposed to do. Cloning this repo and running yarn test:unit doesn't end well.
Maybe some pointers from @kkafar and we could get started?

[pedro-w]

I've tried a few things with no success so I could really do with some advice on this. My plan is to start with the pcprinz repo mentioned at the top of this post, but replace the dependency on react-native-screens from npmjs with a local checkout, then I can edit it and hopefully start to fix the missing parts

1. Clone the react-native-screens repo
2. Clone the react-native-windows-tests repo
3. In the latter, run yarn add react-native-screens@portal:../path/to/react-native-screens
4. Run react-native-windows-tests with yarn windows

I feel this ought to work (and give me the app that closes on launch) but it does not. Instead I see an error

 × Build failed with message C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\NuGet\17.0\Microsoft.NuGet.targets(198,5): error : Your project 
does not reference "UAP,Version=v10.0" framework. 
Add a reference to "UAP,Version=v10.0" in the "TargetFrameworks" property of your project file and then 
re-run NuGet restore. [E:\source\react-native-windows-tests\node_modules\react-native-screens\node_modules\react-native-windows\Common\Common.vcxproj]. 
Check your build configuration.

I tried adding the reference as suggested but that did not change anything. I must be missing something - is there something I need to do to my local react-native-screens to make it work like the one on npmjs?