[Bug]: Custom vector tiles server doesn't work

[amoiseenko-sc]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS

@rnmapbox/maps version

10.0.15

Standalone component to reproduce

import React from 'react';
import {View} from 'react-native';
import Mapbox, {MapView, MarkerView} from '@rnmapbox/maps';

Mapbox.setAccessToken('access_token');

const MapScreen = () => {
  return (
    <View>
      <Mapbox.MapView style={{ flex: 1 }} rotateEnabled={false} pitchEnabled={false}>
        <Mapbox.VectorSource id="custom-tiles" url='link-to url' existing={false} >
          <Mapbox.FillLayer id="customSourceFill"
            style={{
              fillColor: '#FF0000',
            }}
          />
        </Mapbox.VectorSource>
        <Mapbox.Camera
          centerCoordinate={[-74.00597, 40.71427]}
          defaultSettings={{
          zoomLevel: 14,
            centerCoordinate: [-74.00597, 40.71427],
          }}
        />
        <Mapbox.UserLocation showsUserHeadingIndicator />
      </Mapbox.MapView>
    </View>
  );
};

export default MapScreen;

Observed behavior and steps to reproduce

I attempted to connect to a custom vector tiles server using the tileJSON format, but encountered a Mapbox error - Mapbox error MapLoad error Failed to load tile: {"level": "error", "message": "MapLoad error Failed to load tile: "} Despite attempting to modify the tile URLs for various resources, I couldn't resolve the issue.

JSON file (it's available by actual link):

{
   "tilejson": "2.2.0",
   "tiles": [
     "https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=MY_TOKEN"
   ],
   "minzoom": 0,
   "maxzoom": 18,
   "name": "Mapbox Streets v8",
   "attribution": "© Mapbox",
   "format": "pbf"
}

Expected behavior

Custom server tiles connected and working as expected

Notes / preliminary analysis

No response

Additional links and references

No response

[Cdingram]

I've also been unable to get any vector tiles working, I can't find even a single example that works anywhere.

[mfazekas]

Sorry I cannot run this example, please use concrete url.

https://rnmapbox.github.io/docs/examples/FillRasterLayer/CustomVectorSource
https://rnmapbox.github.io/docs/examples/FillRasterLayer/ChoroplethLayerByZoomLevel

[Cdingram]

Is there an example that uses the tileUrlTemplates option like tileUrlTemplates={['https://example.com/vector-tiles/{z}/{x}/{y}.pbf']}

[mfazekas]

See https://rnmapbox.github.io/docs/examples/LineLayer/ThirdPartyVectorSource

[Cdingram]

Awesome thanks. I was able to figure it out using styling as well from this example