Clever Geek Handbook

Nativescript how to make an element transparent to touch events

For one of my projects, I need to develop a google map vignetting effect in nativescript (IOS app), so I decided to go with a png24 image solution stretched over google map view.

<GridLayout id="appContainer">
        <MapView id="mapView"></MapView>
        <Image src="~/images/vignettage.png" style="width:100%; height:100%;"></Image>
</GridLayout>

Now obviously I am running into a problem when trying to interact with the map, touch gestures, gesture gestures and thus being captured by the overlay image.

How do I make this image transparent for touch events, just like css pointer-events:none;

does on sites for cursor events.

Any typescript.javascript or pure objective-c solution is appreciated!

Just added an image to illustrate this problem: enter image description here

+3


source to share


1 answer


This has to do with how iOS and Android handle the bubble event. For iOS, you have to put ios:isUserInteractionEnabled="false"

in the overlay template for events to pass.



+3


source






More articles:


All Articles