Shell flyout menu not selected item with ripple effect

[ghost]

Description

Hi, I would like to ask if it is possible to apply the ripple effect to Shell FlyoutItem. The ripple effect works, but the menu item does not work, you cannot change the page. Without ripple effect, the transition to the page works. Advise if I'm making a mistake somewhere. I will be happy for any advice.

Steps to Reproduce

1. Create a Shell project
2. Create ItemTemplate in AppShell
3. Add a ripple effect to the DataTemplate
   xct:TouchEffect.NativeAnimationColor="Red"
   xct:TouchEffect.NativeAnimation="True"

<FlyoutItem Title="Item 1"> <Shell.ItemTemplate> <DataTemplate> <ContentView> <Grid HeightRequest="50" xct:TouchEffect.NativeAnimation="True" xct:TouchEffect.NativeAnimationColor="Red"> </Grid> </ContentView> </DataTemplate> </Shell.ItemTemplate> <ShellContent Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" /> </FlyoutItem>

Expected Behavior

Ripple effect and go to the selection page from the shell menu.

Actual Behavior

The ripple effect works, switching to another page does not work when selecting from the menu.

Platforms

• Android
• iOS

Basic Information

• Version with issue:
• Xamarin.Forms 5.0.0.1791-pre5
• Last known good version:
• IDE: Visual Studio 2019
• Platform Target Frameworks:
  • iOS: Not tested
  • Android: 10, 8.1, 7.1
  • UWP: Not tested
• Android Support Library Version:
• Nuget Packages: Xamarin.CommunityToolkit 1.0.0-pre6
• Affected Devices:

Workaround

Reproduction imagery

Reproduction Link

[hartez]

I think this is a touch effect issue, not a problem with the flyout - waiting for confirmation on xamarin/XamarinCommunityToolkit#707.

[isness]

I believe adding a TapGestureRecongizer in grid might help with this case, it's just that I don't know which command to bind to.

Has anyone found a workaround? Is it even possible to implement any touch effects on flyouts?