Using WinUI.AnimatedIcon

[matthewaptaylor]

Problem Description

It seems there is no way to use the WinUI.AnimatedIcon component. The WinUI docs suggest this approach:

<!-- 
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
-->

<AppBarButton x:Name="BackButton" Label="Back"
              muxc:AnimatedIcon.State="Normal"
              PointerEntered="AppBarButton_PointerEntered"
              PointerExited="AppBarButton_PointerExited">
    <muxc:AnimatedIcon>
        <animatedvisuals:AnimatedBackVisualSource/>
        <muxc:AnimatedIcon.FallbackIconSource>
            <muxc:SymbolIconSource Symbol="Back"/>
        </muxc:AnimatedIcon.FallbackIconSource>
    </muxc:AnimatedIcon>
</AppBarButton>

But animatedvisuals:AnimatedBackVisualSource and AnimatedIcon.FallbackIconSource don't exist in this library. Furthermore, when adding a child to <WinUI.AnimatedIcon>, the app crashes with "this element cannot have children".

import { WinUI, Button } from "react-native-xaml"

<Button>
    <WinUI.AnimatedIcon />
</Button>

Steps To Reproduce

1. Create an app
2. Attempt to run this code:

import { WinUI, Button, Symbol } from "react-native-xaml"

<Button>
    <WinUI.AnimatedIcon>
        <SymbolIcon symbol={Symbol.Back} />
    </WinUI.AnimatedIcon>
</Button>

Expected Results

No response

Environment

npx @react-native-community/cli info