React-native-mapbox-gl: Mapbox Studio Custom Style blank grey/black map

[ashavyrin]

Hello,

I followed this tutorial to make a style with Mapbox Studio (https://www.mapbox.com/help/add-points-pt-1/). The map is showing fine when I load it in an html file. But when loading with React Native, the map markers show up but the map layer itself is just showing black on Android, and grey on iPhone. The map also shows fine if I do not provide the custom styleURL.

render() {
return (
id="map"
style={{ flex: 1 }}
styleURL="mapbox://styles/xx/yy"
zoomLevel={10}
centerCoordinate={[-87.655131, 41.988102]}
/>
);
}
}

[lilykaiser]

Hi @ashavyrin , as a team member noted in https://github.com/mapbox/mapbox-navigation-android/issues/861, this can happen when you don't add an access token. Did you add an access token?

[ashavyrin]

Hi @lilykaiser
I did already set the token using Mapbox.setAccessToken()

[lilykaiser]

Thanks for confirming @ashavyrin . Would you mind making your map style public in Studio and getting in touch with @nitaliano to share the link to your style? Then he can test it for you.

[sandromartis]

I'm having the same issue.

Using one of default styles e.g. styleURL={Mapbox.StyleURL.Dark} works.
Also the other Mapbox styles work: styleURL="mapbox://styles/mapbox/satellite-v8"
But using my own custom style does NOT work: styleURL="mapbox://styles/santsches/cjizzfyo603ko2smz3link1xa"

Is there any additional step required? The map style is public and the access token has been set with Mapbox.setAccessToken()

My map is just a copy of the basic template.

[sandromartis]

I think I figured out what the problem is. It seems that react-native-mapbox-gl only supports Mapbox Maps SDK for iOS version 3.7.0.

When I create a map in Mapbox studio with version 4.0.0 it doesn't load in react-native and shows a blank screen.
When I create the map with version 3.7.0 it works.

Is this a bug in my installation or does react-native-mapbox-gl really only support the iOS SDK version 3.7.0?

[pritomn7]

@sandromartis, I am actually facing a similar problem and I guess it is also because of the the problem you mentioned and I would like to implement this work around. I am very new to this and I have no idea how to check my iOS sdk version or revert back to an older version (preferably, 3.7.0). could you please provide some suggestion/insights. TIA

[yury-stepanov]

If you are using Android emulator, try to switch Emulated Performance Graphics to Software in AVD settings. Cheers

[alburdette619]

@yury-stepanov that doesn't help this issue, only the map not displaying at all on Android. For me the issue you're referencing showed a different color. This only happens when the styleURL is set for me after fixing my Android display issues and on both platforms as noted by @ashavyrin`.

~This seems to be a very pervasive issue. Is there any way around this? Can I just use the file locally in some way?~

Disregard, the client provided the wrong api key.

[sandromartis]

@pritomn7 I don't think there's really a workaround except for waiting until react-native-mapbox-gl supports Mapbox Maps SDK for iOS version 4.0.0
What you can do of course is to only use elements in Mapbox Studio that do not require the Mapbox Maps SDK version 4.
My problem was, that I wanted 3D buildings which are only supported in version 4.
That's why I got the blank screen.
But maybe your facing a different problem, I'm not sure if we are talking about the same thing.

[Lomaas]

Any timeline for when iOS version 4.0.0 + will arrive?

[wywzixin]

Is your solution solved? My mistake is also this

[wywzixin]

Hello,

I followed this tutorial to make a style with Mapbox Studio (https://www.mapbox.com/help/add-points-pt-1/). The map is showing fine when I load it in an html file. But when loading with React Native, the map markers show up but the map layer itself is just showing black on Android, and grey on iPhone. The map also shows fine if I do not provide the custom styleURL.

render() {
return (
id="map"
style={{ flex: 1 }}
styleURL="mapbox://styles/xx/yy"
zoomLevel={10}
centerCoordinate={[-87.655131, 41.988102]}
/>
);
}
}

Is your solution solved? My mistake is also this

[vijay2330]

I am also facing this similar issue.... Using my own custom styleURL is not working... Any updates or solution regarding this?

[wywzixin]

M

I am also facing this similar issue.... Using my own custom styleURL is not working... Any updates or solution regarding this?

Me too , if you solve the issue ,remember tell me ,thanks

[boraoztunc]

Hello,

I followed this tutorial to make a style with Mapbox Studio (https://www.mapbox.com/help/add-points-pt-1/). The map is showing fine when I load it in an html file. But when loading with React Native, the map markers show up but the map layer itself is just showing black on Android, and grey on iPhone. The map also shows fine if I do not provide the custom styleURL.

render() {
return (
id="map"
style={{ flex: 1 }}
styleURL="mapbox://styles/xx/yy"
zoomLevel={10}
centerCoordinate={[-87.655131, 41.988102]}
/>
);
}
}

Same here!

[atomheartother]

Same issue here, iOS + android, using mapbox's styles like styleURL="mapbox://styles/mapbox/satellite-v8" works perfectly, but using a map made in mapbox studio gives me a grey map with some basic outlines... Will update if I find any info

[qlerebours]

Same for me, everything works with standard style urls, but not with custom one (mapbox://.....)

[atomheartother]

Just as an update, downgrading our map did fix this. This bug is due to the sdk version that ships with this react-native module which simply doesn't support newer features of Mapbox Studio. Mapbox Studio has a little menu for picking which min sdk version you want to support, and it then points out which properties should be changed. In our case we had to redo most of the map.

[qlerebours]

Which version of the SDK did you specify on the mapbox studio ?

[ZsKLiQuid]

Hey,
Same issue here.
I try with all sdk version but doesn't work on IOS and ANDROID .

[atomheartother]

@qlerebours whichever version is on your current version of react-native-mapbox-gl should be fine, just check the build files for the correct version.

[kristfal]

Just to reiterate: Custom styles works just fine, but the RN SDKs are using a quite old version of the native SDKs meaning that styles with expressions will not work. This is a know issue and will be resolved in an upcoming version of this repo.

[qlerebours]

Ok, but which version of the SDK should we use ?
I tried to build styles using differents SDK in mapbox studios, and none of them worked when I tried.
If you could specify which SDK is the right one, it would be great

[Friis1978]

After I published the style on Mapbox Studio, the link worked. Make sure you do this.