JAVASCRIPT

dynamically adding marker react native mapbox

You can add markers dynamically by using this code:

Create marker component:
const Marker = ({ coordinate, image, id }) => {
    return (
      <MapboxGL.MarkerView coordinate={coordinate} id={id}>
      // Add any image or icon or view for marker
		<Image
            source={{ uri: image }}
            style={{width: '100%', height: '100%'}}
            resizeMode="contain"
          />
      </MapboxGL.MarkerView>
    );
 };

Consume it inside MapBoxGL:
<MapboxGL.MapView
      style={{
        // it will help you keep markers inside mapview
        overflow: 'hidden'
      }}>
{markers &&
      markers?.length > 0 &&
         markers.map((marker, index) => (
      	    <Marker
              coordinate={[marker.longitude, marker.latitude]}
              // id must be a string
              id={`index + 1`}
              image={getIconUrl(index)}
            />
         ))
}
</MapboxGL.MapView>