react-native-maps: Custom callouts and markers not working correctly

Hey all,

After upgrading to RN 0.32.0 and react-native-maps 0.8.0 weird things started happening with maps in my app. At first, I have experienced the callout cut-off issue (#427) which is “workaroundable”. What puzzles me now is the issues that came after :

1. In order to trigger the callout I need to click a little bit over the custom marker (which in this case is the red square). Clicking on the red square itself doesn't do anything in this regard apart from triggering onSelect and onPress (callout should show at this point as well!). 2. After clicking a little bit over the marker the callout seems to show but under other markers. How to position it back on the top? It worked correctly in the previous versions.

Supplementary snippet :

 <MapView.Marker
            coordinate={marker.loc}
            onSelect={() => alert("test")}
            onPress={() => alert("test")}
          >
            <View style={{height:20, width:20, backgroundColor:'red'}} />
            <MapView.Callout tooltip={false}>
              <BCClickableCallout title={marker.title} bar={marker.bar} onSelected={() => { alert("go places")  </MapView.Callout>
          </MapView.Marker>

What happened in the new version that broke it all? Is it me doing something wrong or is it a bug?

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 16 (3 by maintainers)

Commits related to this issue

FIx callout not being displayed. https://github.com/airbnb/react-native-maps/issues/553 — committed to techrah/react-native-maps by techrah 8 years ago
Fixed callouts displaying behind markers. Fixes #553, fixes #662, fixes #751 — committed to laeijebor/react-native-maps by laeijebor 8 years ago

Most upvoted comments

Seems like whenever additional markers, besides the initially rendered markers, are added to the mapview. This problem occurs. Which is unfortunate for me because I need to dynamically add markers to my mapview…

i8wu on Feb 16, 2017

After clicking a little bit over the marker the callout seems to show but under other markers. How to position it back on the top? It worked correctly in the previous versions.

I was able to fix this, by editing mapCallout.js within the react-native-maps package

import React, { PropTypes } from 'react';
import {
  View,
  requireNativeComponent,
  StyleSheet,
} from 'react-native';

const propTypes = {
  ...View.propTypes,
  tooltip: PropTypes.bool,
  onPress: PropTypes.func,
};

const defaultProps = {
  tooltip: false,
};

class MapCallout extends React.Component {
  render() {
    console.log(this.props.style)
    return <AIRMapCallout {...this.props} style={[styles.callout, this.props.style]} />;
  }
}

MapCallout.propTypes = propTypes;
MapCallout.defaultProps = defaultProps;

const styles = StyleSheet.create({
  callout: {
    position: 'relative', 
  },
});

const AIRMapCallout = requireNativeComponent('AIRMapCallout', MapCallout);

module.exports = MapCallout;

by changing the callout style from ‘absolute’ to position ‘relative’. u could pass is as a prop.style, but i just changed it directly and the behaviour was normal again. “normal as in , as it worked before”

hope this helps someone

nillo on Sep 22, 2016

@christopherdro @nillo I just try the solution by changing ‘absolute’ position to ‘relative’ and doesn’t seem to work for me, all the pin move in a wrong position on the map

magrinj on Nov 17, 2016