7

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 : enter image description here

Vincent Duprez
  • 3,772
  • 8
  • 36
  • 76
  • 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. – Victor Nascimento Apr 14 '17 at 12:59
  • 1
    Can you try putting `ios:isUserInteractionEnabled="false"` on the image component? – Victor Nascimento Apr 14 '17 at 13:34
  • @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 – Vincent Duprez Apr 15 '17 at 12:42

1 Answers1

7

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.

Victor Nascimento
  • 771
  • 7
  • 20