React Native Windows support

[ruslan-bikkinin]

Some time ago experimental support for React native Windows was introduced and at that moment debuging of both UWP and WPF platforms were added. Since that time no further work were continued.
Currently, React Native Windows has two main implementations: "current" which is C#-made and will be cosidered as deprecated in the future and "vnext" which is targeted to future React Native versions and will be rewritten in C++ to engage new RN architectural features such as JSI (react-native-community/discussions-and-proposals#91).
Here are the list of things that must be done to support newer React Native Windows versions that were made after retesting extension for RNW apps ("react-native-windows": "^0.58.0-vnext.101"):

• On "Debug UWP" scenario packager throws mutliple Error: jest-haste-map: Haste module naming collision: for "vnext" UWP app

Reproduction steps:

• Clone sample app (it was created by following Getting started guide)

git clone git@github.com:ruslan-bikkinin/rnw_app_058.git
cd rnw_app_058
npm i

• Install VS Code, then install "React Native Tools" extension
• Open rnw_app_058 directory in VS Code
• Press "Debug" button
• Select Attach to packager debug configuration in drop down list and press play button
• Eventually, attach process will stuck.

• Endpoint for bundle has been changed from localhost:8081/index.bundle?platform=windows to App.windows.bundle?platform=uwp (Issue tracked here on RNW)
• The debugger cannot attach to the application in launch scenario immediately after building the application (possibly connected with the fact that RNW application don't waits the debugger to attach and shows errors on application start up because debugger is not attached)
• The RNW application generates app.bundle instead of index.bundle, this causes a prewarming issues
• Couldn't run "current" UWP app due to several Couldn't find source file errors while running react-native run-windows (Need help from RNW team) Support for "current" is going away. Is there any documentation about this?
• Couldn't add WPF platform on new RNW version because looks like it's not supported yet (Need clarifications from RNW team) WPF support is going to be dropped off. Is there any documentation about this?
• "Attach to packager" scenario doesn't work (Need investigation)

Reproduction steps:

• Clone sample app (it was created by following Getting started guide)

git clone git@github.com:ruslan-bikkinin/rnw_app_058.git
cd rnw_app_058
npm i

• Start app

react-native run-windows

• Wait until Chrome debugger-ui tab is opened and app is loaded, then close Chrome tab
• Install VS Code, then install "React Native Tools" extension
• Open rnw_app_058 directory in VS Code
• Press "Debug" button
• Select Debug UWP debug configuration in drop down list and press play button
• Eventually, you will see errors in Debug Console window

• "Show Dev Menu", "Reload app" command palate commands aren't supported. Once issue 2276 is fixed we can fix this.

[kmelmon]

I'm currently stuck on a Haste issue. When I launch via Debug UWP, I get this error:

:1 - - [28/Jun/2019:23:32:51 +0000] "GET /App.windows.bundle?platform=uwp HTTP/1.1" 500 - "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
BUNDLE [uwp, dev] ./App.windows.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)::1 - - [28/Jun/2019:23:33:18 +0000] "GET /App.windows.bundle?platform=uwp HTTP/1.1" 500 - "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
error: bundling failed: Error: Unable to resolve module AccessibilityInfo from D:\myapp2\node_modules\react-native\Libraries\react-native\react-native-implementation.js: Module AccessibilityInfo does not exist in the Haste module map

I'm trying to reverse engineer metro but having difficulties even just attaching a debugger.

[kmelmon]

I debugged the Haste issue with Andrew, we now understand what's going on. The vnext implementation has its own cli.js which overrides the metro config with custom Haste paths, these include the "lib" directory. The "normal" cli.js that comes with react-native doesn't have this override. What this means is we currently only build bundles correctly if we launch metro with our custom version of cli.js. This can produce some confusion as well, as the haste map gets cached in %temp%, and so depending on which cli.js you run first, you'll get either the "correct" haste map or the "incorrect" haste map in the cache.

The fix for the haste issue we're pursuing for this is to no longer use the "lib" directory to hold these certain files, instead just use the standard Libraries directory. Andrew already has this change checked in with microsoft/react-native-windows#2727.

After that we still have the remaining issue that the vs code extension is looking for index.bundle?platform=windows, instead of app.bundle?platform=uwp. We are considering renaming vnext to windows, but in the short term I think it makes sense to change the bundle URL to app.bundle?platform=uwp. I may attempt this, or have someone on the crew take it from me if I don't have cycles.

[sportshead]

Is this dead?

[SounD120]

Hi @sportshead . It is not dead, just some of the issues are tracked in https://github.com/microsoft/react-native-windows . If you have any questions about React Native for Windows support in React Native Tools extension - please let us know about them.

[SounD120]

I think that it is better to close this issue since the extension can work with the RNW apps with the only gaps of Show DevMenu and Reload App commands which will be added as soon as DevMenu functions will be added in NativeModules.