MapBoxGL.VectorSource does not load pbf

[mlfarrelly]

This is how we add our pbf on our desktop version (with Vue):

let url = `${process.env.API_URL}/features/${this.project.dataset}/{z}/{x}/{y}?namespace=${process.env.API_NAMESPACE}`
      this.map.addSource('viewer-vector-data', {
        type: 'vector',
        tiles: [url]
      })

Using the same URL in react native (the below code is a bit jumbled, just trying to get this to work as a proof of concept, but no matter what changes I make, no features appear on the map):

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox from '@mapbox/react-native-mapbox-gl';
import map from './map1';


    Mapbox.setAccessToken('my_key_here');


    export default class App extends Component<{}> {
      render() {
        return (
          <View style={styles.container}>
            <Mapbox.MapView
                styleURL={Mapbox.StyleURL.Street}
                zoomLevel={13}
                centerCoordinate={[-121.83571815490724, 52.047581604695345]}
                style={styles.container}>
                <Mapbox.VectorSource
                  id="customSourceExample"
                  url={JSON.stringify(map)}
                    style={styles.container}
                  >
                  <Mapbox.FillLayer
                 id="customTileSourceLine"
                 sourceLayerID="mapillary-sequences"
                 style={stylesM.boxFill}
               />
                </Mapbox.VectorSource>
            </Mapbox.MapView>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
    });

    const stylesM = Mapbox.StyleSheet.create({
      boxFill: {
        fillColor: "black"
      },
      line: {
        lineCap: "round",
        lineJoin: "round",
        lineOpacity: 0.6,
        lineColor: "rgb(53, 175, 109)",
        lineWidth: 2
      }
});

And the tileJSON:

{
  "tilejson": "2.2.0",
  "name": "knifecreek",
  "description": null,
  "version": "1.0.0",
  "attribution": null,
  "template": null,
  "legend": null,
  "scheme": "tms",
  "tiles": ["http://localhost:3000/features/knifecreek/{z}/{x}/{y}?namespace=js4xi2"],
  "grids": null,
  "data": null,
  "minzoom": 0,
  "maxzoom": 30,
  "bounds": [-49.2827, -123.1207, 49.2827, 123.1207],
  "center": null
}

All we're getting is a blank map. I've tried keeping the tileJSON locally (as above) and also taking it from an S3 bucket, but neither is working. Looking at my server logs, no request is being sent to the endpoint of the url specified above.

Any ideas? I've looked at all of the issues related to VectorSource, but no suggestions have worked for me. I've also tried taking the pbf from production (instead of running the server locally and using localhost), but that doesn't work either.

[kristfal]

See this PR as an example for custom 3rd party sources: #1449