Full screen animation with isUserInteractionEnabled="false"

[muratcorlu]

I'm trying to use lottie to show a full-screen success animation after a game successful. But animation blocks buttons below it, so it blocks UI. Setting isUserInteractionEnabled="false" helped on iOS but not on Android. As far as I learned, on Android, we need to set this property for every child of it. But, you know, in the implementation we don't have child elements for LottieView component.

Do you have any suggestion for this? Can we proxy this attributes to the children of LottieView component on library level?

[bradmartin]

Could you share your markup for the UI? I'm sure there are some alternatives to the approach because what you are describing seems reasonable but with some changes to the layout you might be good to go 👍

[muratcorlu]

Sure. Here is my use case:

<AbsoluteLayout>
    <GridLayout top="0" left="0" width="100%" height="100%" columns="*" rows="2*, *, 200">
        <StackLayout>
            <Image class="success-logo" src="~/images/logo-single.png"></Image>
        </StackLayout>

        <AbsoluteLayout row="1">
            <Label [text]="resultScore"></Label>
        </AbsoluteLayout>

        <FlexboxLayout row="2">
            <Label class="image-button icomoon" text="list2" [nsRouterLink]="['/games']"></Label>
            <Label class="button-label" text="Return to game list" [nsRouterLink]="['/games']"></Label>
        </FlexboxLayout>
    </GridLayout>

    <LottieView top="0" left="0" width="100%" height="100%" *ngIf="resultScore > previousBest"
        isUserInteractionEnabled="false" src="animations/confetti.json" [loop]="false" [autoPlay]="true"></LottieView>
</AbsoluteLayout>

I simplified it to focus on problem. My main screen has some buttons to navigate some other screens. With some conditions, I want to show a full screen animation with Lottie. It works, but on android I can not use buttons when I see the animation.

[bradmartin]

First thing I'd try is seeing if the absolutelayout is causing some odd behavior and switch to this:

<GridLayout rows="*" columns="*">
            <GridLayout row="0" col="0" top="0" left="0" width="100%" height="100%" columns="*" rows="2*, *, 200">
              <StackLayout>
                <Image class="success-logo" src="~/images/logo-single.png"></Image>
              </StackLayout>

              <AbsoluteLayout row="1">
                <Label [text]="resultScore"></Label>
              </AbsoluteLayout>

              <FlexboxLayout row="2">
                <Label class="image-button icomoon" text="list2" [nsRouterLink]="['/games']"></Label>
                <Label class="button-label" text="Return to game list" [nsRouterLink]="['/games']"></Label>
              </FlexboxLayout>
            </GridLayout>
            <LottieView row="0" col="0" top="0" left="0" width="100%" height="100%" *ngIf="resultScore > previousBest" isUserInteractionEnabled="false" src="animations/confetti.json" [loop]="false" [autoPlay]="true"></LottieView>
          </GridLayout>

Let me know if that helps any with the behavior.

[bradmartin]

Okay, I've actually read your layout post again and think I know what you're seeing, so when you show the LottieView it is filling the parent AbsoluteLayout in your case which renders the buttons not tappable.

So there's a few things I would try.

1. Duplicate the buttons inside a layout that houses the LottieView so they're also shown when you show it (not optimal of course but prob quickest fix in a hurry).
2. Redo the layout so that you have the lottieview inside the main grid on a row so the buttons are visible regardless of it showing or not. Hope that makes sense.

[muratcorlu]

Yeah, actually I became forced to change layout and not use animation as full-screen. But it could be great to have isUserInteractionEnabled="false" functionality on android also.

[bradmartin]

it should work, if you put a tap event on the lottieview with isUserInteractionEnabled=false does it fire? If not then it's working and the tap to the buttons isn't bleeding thru "beneath" your lottieview that was positioned on top via absolute hw=100/100. Hope that makes sense if that is the case 😄