Layout issue after closing and opening NavigationView

[jeanmaried]

There seems to be a an issue with laying out the xaml components. When I first build my app with the below code:

const App = () => {
  const {height, width} = useWindowDimensions();
  const isLarge = width >= 700;
  return (
    <NavigationView
      paneDisplayMode={
        isLarge
          ? NavigationViewPaneDisplayMode.Left
          : NavigationViewPaneDisplayMode.LeftCompact
      }
      style={{height}}
      resources={{
        NavigationViewDefaultPaneBackground: '#00fff1',
        NavigationViewExpandedPaneBackground: '#00fff1',
      }}>
      <NavigationViewItemHeader content={{string: 'Header'}} />
      <NavigationViewItemSeparator />
      <NavigationViewItem content={{string: 'Home'}}>
        <FontIcon glyph="&#xE790;" />
      </NavigationViewItem>
      <NavigationViewItemSeparator />
      <NavigationViewItem content={{string: 'About'}}>
        <FontIcon glyph="&#xE790;" />
      </NavigationViewItem>
      <Text>hi</Text>
    </NavigationView>
  );
};
export default App;

The NavigationViewItem all seem to be correctly positioned. After closing and opening the navigation pane they all shift to the left.

NOTE: the issue happens regardless of using useWindowDimensions and setting a dynamic height and dynamic paneDisplayMode

Attached is a video of this occurring: https://user-images.githubusercontent.com/28982554/114101682-af11fd80-988b-11eb-97d5-9b47b47ed9cb.mp4

[asklar]

thanks @jeanmaried for filing! I've seen this, not sure what is causing it yet but I'm hoping to find out soon

[asklar]

Could be due to microsoft/react-native-windows#3581