Creating a new React Native instance in another ApplicationView

[juliesaia-vendora]

Example repo (broken) https://github.com/juliesaia-vendora/rnw-secondary-window-broken

I'm trying to get my RNW app to work with 2 windows. I was able to do it with this repo as an example https://github.com/k1mmm/rnwmultiwindow, but I ran into some issues with using AppWindow over ApplicationView. I'm trying to support W10 1809, which is before they added AppWindow. Also, I'm not sure how fullscreen functionality would work with AppWindow.

Using these posts as a guide, #12905 #10817 , I tried to load a new react native instance into another ApplicationView. I can open it just fine, but when I call .ReloadInstance it crashes after bundling (after logging "Running [SecondaryWindowComponent] with props ..."

No idea what the crash means, all I can see is an exception interrupt in parent->AddView(*childNode, index)

This is how I create the instance:

#if BUNDLE
                JavaScriptBundleFile = "index_SecondaryWindow.windows",
                UseFastRefresh = false,
#else
                JavaScriptBundleFile = "index_SecondaryWindow",
                UseFastRefresh = true,
#endif

#if DEBUG
                UseDirectDebugger = true,
                UseDeveloperSupport = true,
#else
                UseDirectDebugger = false,
                UseDeveloperSupport = false,
#endif
            };

            ris.Properties.Set(
                ReactPropertyBagHelper.GetName(
                    ReactPropertyBagHelper.GetNamespace("ReactNative.Dispatcher"),
                    "UIDispatcher"
                ),
                ris.UIDispatcher
            );

            SecondaryHost = new ReactNativeHost() { InstanceSettings = ris, };

            Microsoft.ReactNative.Managed.AutolinkedNativeModules.RegisterAutolinkedNativeModulePackages(
                SecondaryHost.PackageProviders
            );
            SecondaryHost.PackageProviders.Add(new ReactPackageProvider());

And to open the window: (having this in onLaunched isnt the issue, calling this from a button click has the same issue)

        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
            base.OnLaunched(e);
            var frame = (Frame)Window.Current.Content;
            frame.Navigate(typeof(MainPage), e.Arguments);
            OpenSecondaryWindow();
        }

        public async Task OpenSecondaryWindow()
        {
            CoreApplicationView newView = CoreApplication.CreateNewView();
            int newViewId = 0;
            await newView.Dispatcher.RunAsync(
                CoreDispatcherPriority.Normal,
                () =>
                {
                    Frame frame = new Frame();
                    frame.Navigate(typeof(SecondaryWindow), null);
                    Window.Current.Content = frame;
                    // You have to activate the window in order to show it later.
                    Window.Current.Activate();
                    newViewId = ApplicationView.GetForCurrentView().Id;
                }
            );
            bool viewShown = await ApplicationViewSwitcher.TryShowAsStandaloneAsync(newViewId);
            await newView.Dispatcher.RunAsync(
                CoreDispatcherPriority.Normal,
                () =>
                {
                    SecondaryHost.ReloadInstance();
                }
            );
        }

Would really really appreciate any help with this, I've been struggling with this for days

[acoates-ms]

I think the issue might be that the UIDispatcher property on your SecondaryHost is configured with the UIDispatcher of the first window.

I think you need to move the code that creates SecondaryHost to inside OpenSecondaryWindow. And set the UIDispatcher property to newView.Dispatcher.

[juliesaia-vendora]

thanks so much for the reply :)

like this?

            ris.Properties.Set(
                ReactPropertyBagHelper.GetName(
                    ReactPropertyBagHelper.GetNamespace("ReactNative.Dispatcher"),
                    "UIDispatcher"
                ),
                newView.Dispatcher
            );

I thought the UIDispatcher was supposed to come from the new ReactInstanceSettings(), I think I'm getting "No UI Dispatcher provided" in VS:

Committed the changes to the repo if it helps

[acoates-ms]

No you shouldn't use the PropertyBag to set this. You can just use ris.UIDispatcher = newView.Dispatcher

[acoates-ms]

And did you verify that newView.Dispatcher is non-null when you are setting this?