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?

[kristfal]

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.

[ako977]

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