react-native-maps: Callout does not stretch based on content with React Native v0.28.0.

Same with RNM 0.6.0 and RN v0.29.0, setting <MapView.Callout style={{ flex: 1, position: 'relative' }}>fixed it for me

This is still a problem…

@gblejman: The flex and relative position didn’t fix it for me. The callouts appeared in weird positions and flickered when panning the map. I had been setting a constant width on the child view inside the MapView.Callout but I think that’s what broke with the new version.

I was able to fix it by setting a width directly on the callout: <MapView.Callout style={{ width: 250 }}>.

Using RN 0.32 and latest 0.8.0 maps

The restricted custom callout width on both Android and iOS seems related to the layout position. When layout position is absolute, something is restricting the custom callout view width.

I am hoping this indicates a possible fix in react-native-maps JS rather than a fix required in each of the Android and iOS native modules.

position: ‘relative’ fixes the restricted width but now both marker and callout are in wrong location.

<MapView.Callout style={{ flex: 1, position: 'relative' }}>

position: ‘absolute’ restricts maximum width of custom callout when showCallout() is called.

<MapView.Callout style={{ flex: 1, position: 'absolute

• Green rectangular marker is pointing to correct location near parking lot left-edge - Good
• Callout is above marker - Good
• Callout width is restricted - *Bad ** **

' }}>

Hey! I’ve been trying to work around this all morning and I ended up creating a Callout that imitates the default one but also allows for a custom view, responsive up to a width of callout_container.width… The component that goes inside the <Marker>:

<Callout tooltip style={markerStyles.callout_container}>
    {customView ? customView :
        <View style={markerStyles.callout_view}>
            <Text style={markerStyles.callout_title} numberOfLines={1}>{title}</Text>
            {description &&
                <Text style={markerStyles.callout_description} numberOfLines={1}>{description}</Text>
            }
            <View style={markerStyles.calloutOuterTriangle} />
            <View style={markerStyles.calloutInnerTriangle} />
        </View>
    }
</Callout>

The styles:

const triangleStyle = StyleSheet.create({
    triangle: {
        position: 'absolute',
        bottom: -10,
        alignSelf: 'center',
        width: 10,
        height: 10,
        backgroundColor: 'transparent',
        borderStyle: 'solid',
        borderTopWidth: 0,
        borderTopColor: 'transparent',
        borderRightColor: 'transparent',
        borderLeftColor: 'transparent',
        transform: [{ rotate: '180deg' }],
    }
});

export const markerStyles = StyleSheet.create({
    marker_container: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    callout_container: {
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        width: Dimensions.get('window').width * 0.75,
    },
    callout_title: {
        fontWeight: 'bold',
        fontSize: 16,
        alignSelf: 'center'
    },
    callout_description: {
        alignSelf: 'center',
        fontSize: 14,
        marginTop: 5,
    },
    callout_view: {
        alignSelf: 'center',
        backgroundColor: 'white',
        padding: 5,
        borderRadius: 5,
        borderWidth: 0.5,
        marginBottom: 10,
        position: 'relative',
    },
    calloutOuterTriangle: {
        ...triangleStyle.triangle,
        borderRightWidth: 10,
        borderBottomWidth: 10,
        borderLeftWidth: 10,
        borderBottomColor: 'black',
    },
    calloutInnerTriangle: {
        ...triangleStyle.triangle,
        borderRightWidth: 9.5,
        borderBottomWidth: 9.5,
        borderLeftWidth: 9.5,
        borderBottomColor: 'white',
    },
});

Example of the normal view and one without a description:

Example with a custom view:

Please note that the callout_container.width (75% of the device width), as discussed by other users, is the limit to the width of the inner view and although it’s background is transparent (you can only see the callout_view), the element still has that width and clicking on it counts as clicking the callout and not the map! Hope this helps you!

Not sure why this was closed it’s still broken.

@jeveloper I tried a couple of props with offset in the name.

I think they were not working because I was using layout position: relative because relative seem to fix the width constraint issue ( but break location position ).

Anyway, with your suggestion on issue https://github.com/lelandrichardson/react-native-maps/issues/427, setting flex -1, and width fixes my issue with the custom callout width, and both marker and callout are now displayed at correct locations on the map.

            <MapView.Callout
            style={{ flex: -1, position: 'absolute', width:300}}

It was exhausting but I am finally using the latest version of both RN 32 and react-native-maps 0.8.0. All is good again!