CODEWITHSUNDEEP
androidioslayoutnativescriptangular2-nativescript
Starwave
Starwave

Reputation: 2424

How to make a tap-blocking overlay in nativescript?

I am creating a custom dialog popup, overlay is fine, except that my taps go through it. Is there a way to make a layout tap-blocking? Like a button does. Can't really listen for all gestures and manually control them, that means I would have to block them on all other layouts that are in the taps way. Don't want to use custom dialog function, because TIP: By design on iPhone, a modal page appears only in full screen and I want to minimize the differences between android and ios.

Sample code:

    <AbsoluteLayout>

        <StackLayout class="content-wrapper">
            <router-outlet></router-outlet>
        </StackLayout>

        <StackLayout class="custom-dialog">
            <Label text="Loading..." textWrap="true"></Label>
        </StackLayout>

    </AbsoluteLayout>

Upvotes: 1

Views: 1977

Answers (1)

ych
ych

Reputation: 2075

Just found optimal, from my point of view, solution for this task.

Just need to implement dummy touch handler for overlay layout.

For NativeScript Core implementation will be next (it simple could be ported for NativeScript Angular & Vue):

XML

   <GridLayout>

        <StackLayout class="content">
            <Label text="Some content" textWrap="true"></Label>
        </StackLayout>

        <StackLayout class="overlay" touch="onOverlayDummyTouch">
            <Label text="Loading..." textWrap="true"></Label>
        </StackLayout>

    </GridLayout>

TypeScript

export function onOverlayDummyTouch(args: TouchGestureEventData) {
}

Upvotes: 1

Related Questions