Using a Vector Tile Source URL with Curly Brackets Causes Crash on iOS

[tylergaw]

The Issue

Custom vector tiles often use URLs with curly brackets {} like https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt

Attempting to use a URL like that as the value of the url property of MapboxGL.VectorSource causes a crash on iOS. The error is EXC_BAD_ACCESS and seems to originate in at https://github.com/mapbox/react-native-mapbox-gl/blob/master/ios/RCTMGL/RCTMGLVectorSource.m#L15. It seems URLWithString cannot handle the curly brackets because:

This method expects URLString to contain only characters that are allowed in a properly formed URL. All other characters must be properly percent escaped. Any percent-escaped characters are interpreted using UTF-8 encoding.

From the docs

screenshot of the error in Xcode

Workarounds I've Tried

I tried encoding the URL with encodeURI before giving it to VectorSource. That prevents the crash, but does not load the custom source.

Example

https://github.com/tylergaw/react-native-mapbox-gl/blob/tg-third-party-vector-tile-example/example/src/components/ThirdPartyVectorTileSource.js

That's set up the same way as the other examples. Follow the steps in the examples readme. To see the error message, you will need to run from Xcode.

I noted in the code there, but that is a port of this example https://www.mapbox.com/mapbox-gl-js/example/third-party/ to React Native mapbox gl.

[tylergaw]

I'm closing this as it is not an issue with the library, but was me not understanding the documentation. I updated the example and opened a PR #1449. If you're running into similar trouble see the PR for an explanation of what's needed.