Support core components in SplitView / NavigationView about react-native-xaml

[jonthysell]

Hi. Unfortunately, due to incompatibilities in how both RN and XAML both want control over the layout of UI, once you use RNX to add a XAML control to your UI (esp. panels of any kind like SplitView / NavigationView) all children of those panels must also be RNX XAML controls.

So in the UI tree, you can have RN core components (like View) which eventually have RNX leaf nodes, or you can avoid core components and use 100% RNX controls top to bottom.

It is not possible to support embedding core RN components within RNX panels.

[will-ks]

Thanks for the response @jonthysell, I figured that might be the case. For anyone checking this issue in the future, what I ended up doing was adding a NavigationView to the MainPage.xaml that react-native-windows generates for you, wrapping react:ReactRootView:

<Page
    x:Class="desktop.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:desktop"
    xmlns:react="using:Microsoft.ReactNative"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <NavigationView x:Name="MainNavigationView" SelectionChanged="NavView_SelectionChanged" BackRequested="NavView_BackRequested" Loaded="MainNavigationView_Loaded" >
        <NavigationView.MenuItems>
            <NavigationViewItem Content="Foo" Tag="foo" x:Name="DefaultNavViewItem"/>
        </NavigationView.MenuItems>

        <react:ReactRootView 
             x:Name="reactRootView"
             ComponentName="desktop"
             Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
             MinHeight="400"/>
    </NavigationView>
  
</Page>

Then wrote some native module code to send events from the native code back to react when navigation items are clicked. It works nicely.