[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

10.1.39

Standalone component to reproduce

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" // Mapbox Studio Custom style - BLACK MAP
        // styleURL="mapbox://styles" // Mapbox Studio Classic style - WORKS FINE
      >
      </Mapbox.MapView>
    </View>
  );
}

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

[github-actions]

Lint failed 😭

Please fix the errors in your code example - More info.:

error: 'React' must be in scope when using JSX (react/react-in-jsx-scope) at example.tsx:8:5:
   6 | export default function Index() {
   7 |   return (
>  8 |     <View style={styles.container}>
     |     ^
   9 |       <Mapbox.MapView
  10 |         style={styles.map}
  11 |         styleURL="mapbox://styles" // Mapbox Studio Custom style - BLACK MAP


error: 'View' is not defined (react/jsx-no-undef) at example.tsx:8:6:
   6 | export default function Index() {
   7 |   return (
>  8 |     <View style={styles.container}>
     |      ^
   9 |       <Mapbox.MapView
  10 |         style={styles.map}
  11 |         styleURL="mapbox://styles" // Mapbox Studio Custom style - BLACK MAP


error: 'View' is not defined (no-undef) at example.tsx:8:6:
   6 | export default function Index() {
   7 |   return (
>  8 |     <View style={styles.container}>
     |      ^
   9 |       <Mapbox.MapView
  10 |         style={styles.map}
  11 |         styleURL="mapbox://styles" // Mapbox Studio Custom style - BLACK MAP


error: 'styles' is not defined (no-undef) at example.tsx:8:18:
   6 | export default function Index() {
   7 |   return (
>  8 |     <View style={styles.container}>
     |                  ^
   9 |       <Mapbox.MapView
  10 |         style={styles.map}
  11 |         styleURL="mapbox://styles" // Mapbox Studio Custom style - BLACK MAP


error: 'React' must be in scope when using JSX (react/react-in-jsx-scope) at example.tsx:9:7:
   7 |   return (
   8 |     <View style={styles.container}>
>  9 |       <Mapbox.MapView
     |       ^
  10 |         style={styles.map}
  11 |         styleURL="mapbox://styles" // Mapbox Studio Custom style - BLACK MAP
  12 |         // styleURL="mapbox://styles" // Mapbox Studio Classic style - WORKS FINE


error: 'styles' is not defined (no-undef) at example.tsx:10:16:
   8 |     <View style={styles.container}>
   9 |       <Mapbox.MapView
> 10 |         style={styles.map}
     |                ^
  11 |         styleURL="mapbox://styles" // Mapbox Studio Custom style - BLACK MAP
  12 |         // styleURL="mapbox://styles" // Mapbox Studio Classic style - WORKS FINE
  13 |       >


6 errors found.```