[Bug]: Conflict with React Navigation

[vhsantos]

Mapbox Implementation

Mapbox

Mapbox Version

deafult

React Native Version

0.76.7

Platform

Android

@rnmapbox/maps version

10.1.37

Standalone component to reproduce

// App.tsx
import React from "react";
import { View } from "react-native";
import { MapView } from "@rnmapbox/maps";


export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <MapView style={{ flex: 1 }} />
    </View>
  );
}

Observed behavior and steps to reproduce

Description

When using @rnmapbox/maps together with React Navigation in an Expo app, the application fails to load with native module resolution errors.

Working Example (Vanilla Mapbox)

This basic implementation works correctly:

// App.tsx
import React from "react";
import { View } from "react-native";
import { MapView } from "@rnmapbox/maps";


export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <MapView style={{ flex: 1 }} />
    </View>
  );
}

package.json - working

{
  "dependencies": {
    "@rnmapbox/maps": "^10.1.37",
    "expo": "~52.0.37",
    "react": "18.3.1",
    "react-native": "0.76.7"
  }
}

Non-working Example (With React Navigation)

Adding React Navigation causes the app to fail:

// App.tsx
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { View } from "react-native";
import { MapView } from "@rnmapbox/maps";


const Stack = createNativeStackNavigator();

function MapScreen() {
  return (
    <View style={{ flex: 1 }}>
      <MapView style={{ flex: 1 }} />
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Map" component={MapScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

package.json - non-working

{
  "dependencies": {
    "@react-navigation/native": "^7.0.15",
    "@react-navigation/native-stack": "^7.2.1",
    "@rnmapbox/maps": "^10.1.37",
    "expo": "~52.0.37",
    "react": "18.3.1",
    "react-native": "0.76.7"
  }
}

Error Message

There was a problem loading the project.
This development build encountered the following error:
ViewManagerResolver returned null for either RNSScreenStackHeaderConfig or RCTRNSScreenStackHeaderConfig, missing names are: RCTSafeAreaView, RNMBXVectorSource, AndroidProgressBar, RNMBXAtmosphere, RNMBXStyleImport, RNMBXRasterDemSource, RNCSafeAreaView, AutoLayoutView, RNMBXTerrain, AndroidSwitch, RNMBXPointAnnotation, RNMBXRasterLayer, RNMBXSkyLayer, RNCSafeAreaProvider, RNMBXSymbolLayer, RNMBXMapView, RNMBXShapeSource, RNMBXImage, RNMBXCallout, RNMBXLocationProvider, UnimplementedNativeView, RNMBXLight, AndroidDrawerLayout, RNCAndroidDialogPicker, RNMBXCircleLayer, AndroidTextInput, RNMBXLineLayer, RNMBXHeatmapLayer, RNMBXImageSource, DebuggingOverlay, RNMBXMarkerViewContent, RNMBXBackgroundLayer, AndroidHorizontalScrollView, RNMBXNativeUserLocation, RCTText, RNMBXModelLayer, AndroidHorizontalScrollContentView, RNMBXRasterSource, RNMBXFillLayer, RNMBXFillExtrusionLayer, RCTView, CellContainer, RNMBXImages.

When setting "newArchEnabled": false in app.json, the error changes to:

No ViewManager found for class RNSScreeContentWrapper

Steps to Reproduce

1. Create a new Expo project
2. Install dependencies:

npm install @rnmapbox/maps @react-navigation/native @react-navigation/native-stack

3. Copy either the working or non-working example code
4. Run:

npx expo prebuild --clean
npx expo run:android

Expected behavior

Expected Behavior

The map should render within the React Navigation stack screen.

Actual Behavior

The app fails to load with native module resolution errors.

Notes / preliminary analysis

Environment

• Expo SDK: 52.0.37
• React Native: 0.76.7
• @rnmapbox/maps: 10.1.37
• React Navigation: 7.0.15
• Platform: Android

Additional links and references

Similar problems have been reported recently in this others issues:
#3666 #3681 #3756