Panning doesn't work for "tappable" elements on Android

[TeorikDeli]

Hi!

I'm making a full screen, tappable image slides. Everything works well on iOS, but on Android, panning on tappable slides doesn't work.

<Slides:SlideContainer id="slides" hasNext="true" hasPrevious="true"> <Slides:Slide class="slide-1"> <Image src="~/images/fil.png" stretch="aspectFill" tap="playSound" /> </Slides:Slide> <Slides:Slide class="slide-2"> <Label text="This is Panel 2"/> </Slides:Slide> <Slides:Slide class="slide-3"> <Label text="This is Panel 3"/> </Slides:Slide> <Slides:Slide class="slide-4"> <Label text="This is Panel 4"/> </Slides:Slide> <Slides:Slide class="slide-5"> <Label text="This is Panel 5"/> </Slides:Slide> <DockLayout top="0" left="0" height="64" width="100%"> <Button text="<" tap="prevButton" dock="left" width="120" style.backgroundColor="white"/> <Button text=">" tap="nextButton" width="120" style.backgroundColor="white" style.horizontalAlignment="right"/> </DockLayout> </Slides:SlideContainer>

This is my example code. Am I missing something? 🤔

Thank you!

[JoshDSommer]

Hi @TeorikDeli, did you get this figured out? if not i think the problem may be the docklayout inside the SlideContainers. That very well may cause problems. if you want your bottom dock to float over teh slides your probably best of using a grid or absolute layout to position it as an overlay to the slide container.

[TeorikDeli]

Hi @TheOriginalJosh, thanks for your answer. I tried without the docklayout and buttons, but can't pan to second slide. Panning works only when I remove tap="playSound" part from the first slide. This problem only exists on Android, maybe this is related to nativescript (or Android).

[JoshDSommer]

@TeorikDeli I think on second thought that is a known issue in android. Basically the event doesn't propagate down since the image is taking up the full slide amount.

it's kinda hacky, but one way to get around it you can to a pan event on the image. and when they swipe left or right, then call the slideContainers next or previous slide function... it's not quite the same but it works.

[bnussey]

We were able to get around this by creating a tap handler on the slides component itself:

        this.currentPanel.panel.on('tap', (args: gestures.GestureEventData) => {
            this.triggerTapEvent();
        });

             private triggerTapEvent() {
            this.notify({
            eventName: SlideContainer.tapEvent,
            object: this
        });
    }

And then just listen for this tap event

[JoshDSommer]

@bnussey That is fantastic!