Android: MapView.Callout - seems to be clickable with touch feedback

[jeveloper]

using 0.6.0

It appears that only in android, custom callout content will be clickable. So its impossible to add things like switch or element.

Anyone know a way to around this?

Thanks

<MapView.Callout tooltip={true} flat={true}>
              <View>
              <Switch onTintColor='#a4cf5f'/>

                <Text style={{ color: '#fff' }}>This is a custom callout bubble view</Text>

              </View>
            </MapView.Callout>

[esutton]

Still a problem on Android with RN 0.32 and maps 0.8.0

On iOS, touchable elements inside a custom callout work fine.

• On Android, any touch anywhere in the callout, highlights the entire callout.
• On Android I cannot activate either the TextInput or the button?
• On Android, the callout layout is not right. I had to remove a flexDirection: 'row' on Android.

  "dependencies": {
    "react": "15.0.2",
    "react-native": "0.26.2",
    "react-native-image-picker": "^0.21.4",
    "react-native-maps": "^0.4.2",
  }

[jeveloper]

Same thing with maps 0.7 as well.
May need someone with android (java) experience to add a property to disable touch behaviour on that View that wraps custom elements

[johnryan]

@jeveloper Did you find any fix for this? If not i'll look into the java end and see if I can figure it out.

[jeveloper]

@johnryan i had asked someone with more android java experience, they seem to think its definitely in that implementation.
It'd be great to remove OnPress and other handlers , perhaps if its not present, the View can be used.
Sorry no work around, its just not implemented.

[johnryan]

Ok, i'll see if I can submit a PR to implement that behavior

[jeveloper]

Thanks , if you're ever in Toronto, coffee and treats on me!
Strangely IOS has full support for custom and controls e.g. switch to be used in a marker callout.

[johnryan]

Ha, i'll take that deal, and yea I noticed. I implemented on iOS first and and now doing a run through of all the things that don't work as expected on android. Stay tuned!

[bleonard]

I noted something interesting when I came across this. using the inspector (on Android) doesn't allow you to select the callout or any views in it. You can only select the entire map. This suggests that somehow touches are handled differently in the implementation.

[johnryan]

Yea, it seems that the android MapView API doesn't support handling touches on subviews of the callouts. It looks like there are some (hacky) ways of adding support for touches inside a callout but it is more complicated that I would have thought.

see: http://stackoverflow.com/questions/14123243/google-maps-android-api-v2-interactive-infowindow-like-in-original-android-go

[zolrath]

From that StackOverflow post I see that a third party Android Library has been created for interactive map callouts https://github.com/Appolica/InteractiveInfoWindowAndroid
It'd be great if react-native-maps had iOS/Android parity in Callout interactivity!

[samer]

Has anyone else run into this? I'm facing the same problem and I am wondering if someone has found a solution. To summarize: custom callouts on Android can't have sub-elements that are tappable, the whole callout acts like one big button.

[stuharvey]

@samer Also still having this issue. Will let you know if I find a workaround.

[Ruzo]

Just ran into this issue. Hope it gets popular enough to encourage a fix.

[jorgutdev]

Same thing, please update this issue if anyone finds someway to do this.