[Bug]: Conflict with React Navigation

[vhsantos]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.76.7

Platform

Android

@rnmapbox/maps version

10.1.37

Standalone component to reproduce

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

Mapbox.setAccessToken('pk.eyXXXXXXXXXX');

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

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.

Standalone component to reproduce

Working Example (Vanilla Mapbox)

This basic implementation works correctly:

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

Mapbox.setAccessToken('pk.eyXXXXXXXXXX');

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

package.json

{
  "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 { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Mapbox, { MapView } from '@rnmapbox/maps';

Mapbox.setAccessToken('pk.eyXXXXXXXXXX');

const Stack = createNativeStackNavigator();

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

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

package.json

{
  "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

[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:9:10:
   7 | 
   8 | export default function App() {
>  9 |   return <MapView style={{ flex: 1 }} />;
     |          ^
  10 | }
  11 | 


1 error found.```