From 917a221068efb292526fb9a005df376f9eaa2c3f Mon Sep 17 00:00:00 2001
From: Tyler Gaw <me@tylergaw.com>
Date: Mon, 17 Dec 2018 12:27:52 -0500
Subject: [PATCH 1/2] Adds crash example using custom tile source URL

---
 example/src/App.js                            |  2 +
 .../components/ThirdPartyVectorTileSource.js  | 51 +++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 example/src/components/ThirdPartyVectorTileSource.js

diff --git a/example/src/App.js b/example/src/App.js
index 08bdabb3b..da3e12421 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -44,6 +44,7 @@ import QueryAtPoint from './components/QueryAtPoint';
 import QueryWithRect from './components/QueryWithRect';
 import ShapeSourceIcon from './components/ShapeSourceIcon';
 import CustomVectorSource from './components/CustomVectorSource';
+import ThirdPartyVectorTileSource from './components/ThirdPartyVectorTileSource';
 import ShowPointAnnotation from './components/ShowPointAnnotation';
 import CreateOfflineRegion from './components/CreateOfflineRegion';
 import DriveTheLine from './components/DriveTheLine';
@@ -123,6 +124,7 @@ const Examples = [
   new ExampleItem('Query Features Bounding Box', QueryWithRect),
   new ExampleItem('Shape Source From Icon', ShapeSourceIcon),
   new ExampleItem('Custom Vector Source', CustomVectorSource),
+  new ExampleItem('Third Party Vector Tile Source', ThirdPartyVectorTileSource),
   new ExampleItem('Show Point Annotation', ShowPointAnnotation),
   new ExampleItem('Create Offline Region', CreateOfflineRegion),
   new ExampleItem('Animation Along a Line', DriveTheLine),
diff --git a/example/src/components/ThirdPartyVectorTileSource.js b/example/src/components/ThirdPartyVectorTileSource.js
new file mode 100644
index 000000000..af7de93f1
--- /dev/null
+++ b/example/src/components/ThirdPartyVectorTileSource.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import MapboxGL from '@mapbox/react-native-mapbox-gl';
+
+import BaseExamplePropTypes from './common/BaseExamplePropTypes';
+import Page from './common/Page';
+
+import sheet from '../styles/sheet';
+
+const styles = MapboxGL.StyleSheet.create({
+  line: {
+    lineCap: "round",
+    lineJoin: "rouncd",
+    lineOpacity: 0.6,
+    lineColor: "rgb(53, 175, 109)",
+    lineWidth: 2
+  },
+});
+
+const VECTOR_SOURCE_URL =
+  'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt';
+
+// This example ported to React Native:
+// https://www.mapbox.com/mapbox-gl-js/example/third-party/
+class ThirdPartyVectorTileSource extends React.PureComponent {
+  static propTypes = {
+    ...BaseExamplePropTypes,
+  };
+
+  render() {
+    return (
+      <Page {...this.props}>
+        <MapboxGL.MapView
+          zoomLevel={12}
+          centerCoordinate={[-87.622088, 41.878781]}
+          style={sheet.matchParent}>
+          <MapboxGL.VectorSource
+            id="customTileSourceExample"
+            url={VECTOR_SOURCE_URL}>
+            <MapboxGL.LineLayer
+              id="customTileSourceLine"
+              sourceLayerID="mapillary-sequences"
+              style={styles.line}
+            />
+          </MapboxGL.VectorSource>
+        </MapboxGL.MapView>
+      </Page>
+    );
+  }
+}
+
+export default ThirdPartyVectorTileSource;

From 0fd913cbfcdc5a2b5a2d0ebb523c4a2652fd18de Mon Sep 17 00:00:00 2001
From: Tyler Gaw <me@tylergaw.com>
Date: Mon, 17 Dec 2018 15:01:31 -0500
Subject: [PATCH 2/2] Corrects third party vector tile example

---
 example/src/components/ThirdPartyVectorTileSource.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/example/src/components/ThirdPartyVectorTileSource.js b/example/src/components/ThirdPartyVectorTileSource.js
index af7de93f1..f8aa62b7d 100644
--- a/example/src/components/ThirdPartyVectorTileSource.js
+++ b/example/src/components/ThirdPartyVectorTileSource.js
@@ -9,15 +9,14 @@ import sheet from '../styles/sheet';
 const styles = MapboxGL.StyleSheet.create({
   line: {
     lineCap: "round",
-    lineJoin: "rouncd",
+    lineJoin: "round",
     lineOpacity: 0.6,
     lineColor: "rgb(53, 175, 109)",
     lineWidth: 2
   },
 });
 
-const VECTOR_SOURCE_URL =
-  'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt';
+const TILEJSON_URL = "https://s3.amazonaws.com/tgaw/tilejson.json";
 
 // This example ported to React Native:
 // https://www.mapbox.com/mapbox-gl-js/example/third-party/
@@ -32,10 +31,11 @@ class ThirdPartyVectorTileSource extends React.PureComponent {
         <MapboxGL.MapView
           zoomLevel={12}
           centerCoordinate={[-87.622088, 41.878781]}
+          styleURL="mapbox://styles/mapbox/light-v9"
           style={sheet.matchParent}>
           <MapboxGL.VectorSource
             id="customTileSourceExample"
-            url={VECTOR_SOURCE_URL}>
+            url={TILEJSON_URL}>
             <MapboxGL.LineLayer
               id="customTileSourceLine"
               sourceLayerID="mapillary-sequences"