[Bug]: Custom Mapbox Style Not Loading - Shows Black Screen (Classic Templates Work Fine)

[A-dith-ya]

Mapbox Implementation

Mapbox

Mapbox Version

10.1.39

React Native Version

0.79.3

Platform

iOS, Android

@rnmapbox/maps version

0.79.3

Standalone component to reproduce

import React, { useEffect } from "react";
import { View, StyleSheet } from "react-native";
import Mapbox from "@rnmapbox/maps";

Mapbox.setAccessToken("pk.ey...");

export default function Index() {
  return (
    <View style={styles.container}>
      <Mapbox.MapView
        style={styles.map}
        styleURL="mapbox://styles/your-username/your-style-id"
      />
    </View>
  );
}

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

Observed behavior and steps to reproduce

Custom Mapbox styles created in Mapbox Studio display as a black map in React Native app, while classic/default Mapbox styles load and render correctly.

Expected behavior

Custom Mapbox styles should load and render the same way classic styles do.

Notes / preliminary analysis

No response

Additional links and references

No response

[Willham12]

Try to add $RNMapboxMapsVersion = '11.12.0' to your podfile.
In my case this fixed the blank map with non default style.

[nihiloproxima]

Encountering the same issue currently, adding $RNMapboxMapsVersion = '11.12.0' didn't solved it for me sadly, did you managed to get it fixed somehow?

[JustFly1984]

Having the same issue only in IOS emulator Xcode on Mac. Android Studio emulator works fine.

if styleURL is set to mapbox://styles/mapbox/streets-v12, it works, but in react-native logs I see errors in terminal:

Mapbox [error] MapLoad error Failed to load style: 

while swapping styleURL

I have a list of styles to iterate, and android has no problem to swap, but IOS is not working correctly.

I've tried multiple versions 10.1.39 10.1.38 10.1.33, no changes.

if I comment out styleURL it crashes in runtime. If I set anything except mapbox://styles/mapbox/streets-v12, it crashes in runtime.

I was running Xcode 16.4 and updated to 26. An error still persist on IOS emulator, and android emulator crashes on @rnmapbox/maps in runtime

[JustFly1984]

I have found a magical combination and fixed maps in both - IOS and android.

The secret combination is

• Xcode 16.3,
• iOS emulator 16.0,
• device iPhone 16 Pro IOS 18.5, - you have to enable toggles in emulator's Settings => Developer
• @rnmapbox/maps 10.1.39
• "RNMapboxMapsVersion": "11.8.0" in app.json
• react-native 0.79.4
• expo 53.0.13 and all recommended package versions.

xcode before 16.3 fails with Network Request error after pending request fails on timeout, 16.4 has issues with https3 caching
xcode 26 has issues with building android at this moment so that is not an option yet.

[szymonWCa]

Same issue on RN 0.79.5 and @rnmapbox/maps 10.1.39. Both platforms got black screen.
I guess @JustFly1984 You had another kind of this problem, because I don't have any logs about mapload and no crashes after change in fly.

[RemiHin]

I have the same issue. I created a custom mapstyle which was completely transparent. This so i could render a line layer without the map.

But the mapview renders black, with the linelayer on it. When i use the takeSnap() function the correct styles are applied to the image. The image shows just the line, no tiles, no black background.

But the mapview is always black

[harrysayers]

Hey, what is the status of this issue? I'm facing this issue with a custom style made in Mapbox Studio.

[pronchik]

Yeap, really need tranparent

[princebillygk]

I am facing this issue too any workaround?

[pronchik]

u can patch file for ios, for android dont research yet

import { withDangerousMod } from 'expo/config-plugins';
import fs from 'fs';
import path from 'path';

import type { ConfigPlugin } from 'expo/config-plugins';

const withModifyMapViewSwift: ConfigPlugin = (config) => withDangerousMod(config, [
  'ios',
  (modConfig) => {
    const podfilePath = path.join(
      modConfig.modRequest.platformProjectRoot,
      'Podfile',
    );

    if (fs.existsSync(podfilePath)) {
      let podfile = fs.readFileSync(podfilePath, 'utf-8');

      const patchScript = `
  # >>> PATCH MapView.swift
  mapview_patch = <<-EOS
    file = "Pods/MapboxMaps/Sources/MapboxMaps/Foundation/MapView.swift"
    if File.exist?(file)
      text = File.read(file)
      unless text.include?("self.isOpaque = false")
        new_text = text.sub(/self\\.metalView\\s*=\\s*metalView/, "\\\\n  self.metalView=metalView\\\\n    self.isOpaque = false\\\\n    self.backgroundColor = .clear\\\\n\\\\n    metalView.isOpaque = false\\\\n    metalView.backgroundColor = .clear\\\\n    metalView.layer.isOpaque = false")
        File.open(file, "w") { |f| f.puts new_text }
        puts "✅ Patched MapView.swift"
      else
        puts "ℹ️ MapView.swift already patched"
      end
    else
      puts "⚠️ MapView.swift not found"
    end
  EOS
  system("ruby", "-e", mapview_patch)
  # <<< PATCH MapView.swift
`;

      if (!podfile.includes('PATCH MapView.swift')) {
        podfile = podfile.replace(
          /(post_install do \|installer\|[\s\S]*?)^\s*end/m,
          `$1${patchScript}end`,
        );

        fs.writeFileSync(podfilePath, podfile);
      }
    }

    return modConfig;
  },
]);

export default withModifyMapViewSwift;

`

[ulisesmac]

Same here on Android

[arielscht]

I'm also not able to use custom map styles :/

Is there any update on this issue?

[princebillygk]

I face the same issue, What was the only way to make it work for me is:

updating my expo config:

{
  "expo": {
    "plugins": [
      [
        "@rnmapbox/maps",
        {
          "RNMapboxMapsVersion": "11.0.0"
        }
      ]
    ]
  }
}

and then using or modifying one of the styles from here:
https://www.mapbox.com/gallery
using mapbox studio.

Note: making a style from scratch or a template offered by map box studio will not work, Instead fork one from the gallery I mentioned (it could be even the community one) and edit it with mapbox studio

[hapivity]

this bug gotta be fixed, tried all of the method above, non working, as frustrated as it is, it has not been fixed after so many months, am switching to google maps