Custom SVG marker with custom callout not behaving correctly.

[LHowlett97]

My custom callout works fine with a normal marker or with a marker image however when I use a custom SVG component the custom callout box starts behaving strangely...

Environment info

  "react-native": "^0.64.3",
  "react": "17.0.1",
   "react-native-maps": "0.28.0"

Custom callout normal marker:

Custom callout custom marker:

Marker used like this:

 <Marker
        key={key}
        // image={require('../assets/map-marker-blue.svg')}
        coordinate={{
        longitude: item.locationInfo.location.coordinates[0],
        latitude: item.locationInfo.location.coordinates[1]
           }}
        tracksViewChanges={true}
        >
        <MapMarkerBlue />
        <Callout tooltip onPress={() => navigation.navigate(routes.LOCATION_SCREEN, { item, userLocation })}>
        <MapIconPreview type={0} location={item} />
        </Callout>
</Marker>

Map marker SVG looks like this:

import * as React from "react"
import Svg, { G, Circle, Ellipse, Path } from "react-native-svg"

const MapMarkerBlue = (props) => (
  <Svg xmlns="http://www.w3.org/2000/svg" width={20} height={32} {...props}>
    <G data-name="Group 154" transform="translate(-142 -689)">
      <Circle
        data-name="Ellipse 17"
        cx={6}
        cy={6}
        r={6}
        transform="translate(146 694)"
        fill="#fff"
      />
      <G data-name="Group 153" transform="translate(20 1)">
        <Ellipse
          data-name="Ellipse 16"
          cy={16}
          ry={16}
          transform="translate(135 688)"
          fill="#fff"
        />
        <G data-name="12851222121582634796 (1)">
          <Path
            data-name="Path 133"
            d="M139.07 691.93a10 10 0 0 0-14.141 0A9.635 9.635 0 0 0 122 699a8.221 8.221 0 0 0 .644 3.5l7.129 15.118a2.25 2.25 0 0 0 .908 1.015 2.526 2.526 0 0 0 2.637 0 2.369 2.369 0 0 0 .928-1.015l7.109-15.118A8.218 8.218 0 0 0 142 699a9.632 9.632 0 0 0-2.93-7.07Zm-3.535 10.605a5 5 0 0 1-7.07 0A4.818 4.818 0 0 1 127 699a4.817 4.817 0 0 1 1.465-3.535 5 5 0 0 1 7.07 0A4.817 4.817 0 0 1 137 699a4.818 4.818 0 0 1-1.465 3.535Z"
            fill="#0b518d"
          />
        </G>
      </G>
    </G>
  </Svg>
)

export default MapMarkerBlue

Custom Callout looks like this:

function MapIconPreview({ type, location }) {

    const formatAddress = () => { return (location.locationInfo.address.slice(0, (location.locationInfo.address.length - 9))) }

    return (
        <View style={styles.container}>
            <Text style={{ fontSize: 14, fontWeight: 'bold' }}>Location Name</Text>
            <Text style={{ fontSize: 10, marginBottom: 5 }}>{formatAddress()}</Text>
            {type === 0 && <Stars starSize={starSize} value={location.userStats != undefined ? Math.round(parseFloat(location.userStats.avg) / 0.5) * 0.5 : 0} />}
            {type === 1 && <Stars starSize={starSize} value={location.globalStats != undefined ? Math.round(parseFloat(location.globalStats.avg) / 0.5) * 0.5 : 0} />}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        paddingVertical: 5,
        flex: 1,
        paddingHorizontal: 20,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 18,
        backgroundColor: colors.white
    }
});

export default MapIconPreview;

I suspect I am missing something simple or doing something simple wrong...

Any help is appreciated.

[LHowlett97]

Anybody? No? Dust..

[monholm]

Hello @LHowlett97. Could you please follow the issue template when posting this. (Eg. test using the latest react-native-maps version). The bug might very well still persist, but please test using the latest version and follow the issue template. I'm going to close this for now, but please feel free to open a new issue following the issue template.

[ravirajw]

The issue is for me to...
I created a custom marker and custom callout...
The callout height is very long and the width is very small...
Using latest 0.30.1 version

[alainib]

any fix ? still have this or cannot just use absolute position to change text position

[stesvis]

Did you find a solution? it looks like the callout View is just inheriting the width from the marker...