maps: UserLocation passed children not rendered

Describe the bug Pass a child into UserLocation isn’t rendered.

To Reproduce I’ve tried several iterations, however I believe this is how the api is supposed to be used? Correct me if I’m wrong:

<MapboxGL.UserLocation
  renderMode="custom"
  visible
  animated
  onUpdate={myUserLocationUpdateCallback}
>
  <View style={{ height: 10, width: 10, backgroundColor: 'red' }} />
</MapboxGL.UserLocation>

Expected behavior Passed child is rendered

Versions:

Platfrom: Android
Device: LG Q7
OS: Android 8
React Native Version [0.61.2]

Additional context Maybe I’m supposed to pass it in another way or set other props correctly?

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (8 by maintainers)

Most upvoted comments

Hey,

native components such as views can’t be passed as children inside the MapView. Only mapbox-gl-native components can.

I’m guessing you want to pass in a symbol layer with an icon or something. If that is the case, you can do something like:

<MapboxGL.UserLocation renderMode={'custom'}>
  <MapboxGL.SymbolLayer
    id={'custom-user-symbol'}
    style={{
      iconImage: 'your-icon',
      iconRotationAlignment: 'map',
      iconAllowOverlap: true,
    }}
  />
</MapboxGL.UserLocation>

your-icon needs to be loaded like any other mapbox icon.

kristfal on Nov 7, 2019

Just to tie this altogether. I now know why I was not getting the custom icon. The culprit was including this prop: renderMode={'custom'}.

Basically I was following the old docs which expected ‘custom’. However in the latest version of the library, this makes the userLocation marker simply disappear.

Changing renderMode to ‘normal’ or removing the prop completely solves the problem.

Thank you

ako977 on Apr 13, 2021

This works for us to display custom location icons as children:

				<Mapbox.UserLocation
					visible={true}
					ref={mainMapUserLocationRef}
					children={[
						<Mapbox.SymbolLayer
							key="symbolLocationSymbol"
							id="symbolLocationSymbol"
							minZoomLevel={1}
							style={
								Platform.OS === 'ios' ? (
									{
										iconImage: locationIconTracking,
										iconAllowOverlap: true,
										iconRotate: userHeading - mapHeading,
										iconSize: 0.08
									}
								) : (
									{
										iconImage: locationIconTrackingAndroid,
										iconAllowOverlap: true,
										iconRotate: 0,
										iconSize: 0.1
									}
								)
							}
						/>
					]}
				/>

systemlevel on Apr 6, 2021

yeah, that and I would love to update the docs for the new apis. Just need to find the time 😦

ferdicus on Nov 8, 2019