nativescript how to make element transparent to touch events

Question

For one of my projects, I need to develop a vignetting effect over a google map in nativescript (IOS App) so I decided to go with the png24 image solution stretching over the 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 run into a problem when trying to interact with the map, the touch gestures, pan gestures and so are taken over by the overlaying image.

How can I make this image transparent to touch events, in the same way the css pointer-events:none; does in websites for cursor events.

Any typescript.javascript or pure objective-c solution welcome!

Just added an image to illustrate this issue :

Jacques

Are you hooking to any events on the image with: image.on('pan', ()) etc? If not, the events should be passing through. At least on android it's working if I don't listen to image events. – Tabloid

Can you try putting ios:isUserInteractionEnabled="false" on the image component? – Tabloid

@VictorNascimento That works! Tried to add this in code with nativeElement but didn't worked. puttin it in the template works! thanks a lot, please post it as an answer – Jacques

Answer 1

That's related on how iOS and Android treat event bubbling. For iOS you should put ios:isUserInteractionEnabled="false" on the overlay template to let events pass through.

Tabloid

Just in case you know how to do it for android, don't hesitate to add it in the response. Thank you – Jacques

On Android you actually don't need to do anything. – Tabloid