Keep native pin when adding React element to markers

[hegelstad]

Is this a bug report?

No, more like a feature request.

Have you read the Installation Instructions?

Yes.

Environment

"react": "^16.3.0-alpha.1",
"react-native": "0.54.4",
"react-native-maps": "https://github.com/react-community/react-native-maps.git", (fetched yesterday).

Steps to Reproduce

1. Added marker.
2. Want custom marker which looks similar to a marker with the default Callout but "Always-On".
3. Callouts cannot be always on simultaneously.
4. If I add a React child to the marker, it stops rendering the native marker pin. I need the native marker pin.
5. I could add the native pin as a image which is afaik rendered with both image and React children. But I cannot find the native pins as images, if anyone know how to extract or find the pin. Let me know.

Expected Behavior

Markers (optionally) keep the native pin when adding React children to the marker!

Actual Behavior

React children added to the marker removes the native pin.

Reproducible Demo

None.

[hegelstad]

@alvelig I understand that when you add the image prop to the Marker, the marker will display both the image and the react children of Marker?

Is it possible to replace the image with the native pin marker somehow?

[alvelig]

@hegelstad currently it's not possible :( You need to place a marker image.

[hegelstad]

Okay, thanks!

[Udbhav12]

Is this possible to do now ?

[khalidahmedshalabi]

@hegelstad @Udbhav12

[<Marker
	key={`MyLocation_0`}
	coordinate={{
		latitude: UserLat,
		longitude: UserLng,
	}}
	pinColor={"#1296DB"} />,
<Marker
	key={`MyLocation_1`}
	coordinate={{
		latitude: UserLat,
		longitude: UserLng,
	}}>
	<Text style={{ color: 'black', marginBottom: 50, }}>My Location</Text>
</Marker>]

[craig8two]

I am pulling my hair out. When I use the marker as noted above, the Image is not centered in the correct location.

Here is my marker code.

                 <Marker
                        image={markerImage}
                        key={waypoint.stop_id}
                        coordinate={{
                            latitude:waypoint.stop_lat,
                            longitude:waypoint.stop_lon
                        }}
                        tracksViewChanges={true}
                        onPress={() => this.onOperatorStopPress(waypoint,operator)}
                        style={styles.markerStyle}
                        >
                                <Text style={[styles.stopsMarkerLabel]}>
                                    {waypoint.stop_name.substring(0, 22)}
                                </Text>
                    </Marker>

My custom label is in the correct location, the image passed as a prop is always positioned all the way to the left. I have tried EVERYTHING, I can't get the image to be in the correct place.
If I remove my label element, then the image is in the correct place, anyone should be able to reproduce this.

This image shows the Marker centered on the map, you can see the label is perfect, but the image is not:

[rborn]

I believe yo need to use the image inside the marker and not passed as prop.

[craig8two]

I believe yo need to use the image inside the marker and not passed as a prop.

Thanks for the reply, I cant use the image inside the marker because there are significant performance issues. I have about 160 markers right now, I have tried with tracksViewChanges set dynamically based on whether the markers are loading but performance is really bad.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.