MapBox GL SymbolLayer for React native

Question

I am trying to mark a particular coordinate with SymbolLayer but I couldn't find any documentation/examples specific to React Native for this.

  return (
    <MapboxGL.MapView
      style={styles.map}
      logoEnabled={false}
      localizeLabels={true}>
      <MapboxGL.Camera
        zoomLevel={15}
        animationMode={'flyTo'}
        animationDuration={2000}
        centerCoordinate={coordinates}
      />
      <AddressTextBox placeName={placeName}/>
      <MapboxGL.SymbolLayer></MapboxGL.SymbolLayer>
    </MapboxGL.MapView>
  );

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol

https://github.com/nitaliano/react-native-mapbox-gl/blob/master/docs/SymbolLayer.md

I only found this. What properties am I supposed to pass into the component in my case since I am not using any other layers? How exactly can I pass the coordinate that I wish to mark?

I tried passing point={}and symbolPlacement into it but it gives an overloading error since point property doesn't exist on it. Tho this is what I understood from the documentation.

Answer 1

If you only have to mark a single coordinate, instead of SymbolLayer, you can use MapboxGL.MarkerView. You can create a View inside the MarkerView and add what ever logo/text you want in there. It should work on both, iOS and android. Here's an example:

https://medium.com/javascript-in-plain-english/mark-a-coordinate-on-mapbox-map-in-react-native-5d21c71ed46e