[Bug]: Random error: “Mapbox [error] ViewTagResolver | view: null found with tag: xxxx but it's either null or not the correct type”.

[two3d]

Mapbox Implementation

Mapbox

Mapbox Version

10.1.33

React Native Version

0.76.6

Platform

Android

@rnmapbox/maps version

10.1.33

Standalone component to reproduce

Index page (for navigation test : index <-> map):

import React from 'react';
import {View,Text} from 'react-native';
import { Link } from 'expo-router';

export default function EventList() {
  return (
      <View>
        <Link href={{pathname: "/map"}}>
          <Text>TEST MAP</Text>
        </Link>
      </View>
  );
}

Map page

import React from 'react';

// importa Mapbox and set token
import Mapbox from '@rnmapbox/maps';
// (token is defined here, but commented for your rule) Mapbox.setAccessToken('xxxxxxxxxxxxxxx');

import { MapView } from '@rnmapbox/maps';
import { View } from 'react-native';


export default function Map() {

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

};

Observed behavior and steps to reproduce

The error “Mapbox [error] ViewTagResolver | view: null found with tag: xxxx but it's either null or not the correct type” appears randomly as soon as you arrive on the map, sometimes yes, sometimes no.

Note that the “with tag” increases as the error is encountered (may help debugging).

See captures taken one by one. And the console for more details.

After a round-trip index-map After a round-trip index-map After a round-trip index-map After a round-trip index-map After a round-trip index-map

Expected behavior

Do not display this error.

Notes / preliminary analysis

The “with tag: xxx” increases as the error is encountered.

If the error doesn't appear, go to the map, zoom in or out, then back to the index, then back to the map.

It can take 4 or 5 round trips before there's an error, sometimes 0, sometimes more.

My package.json :

{
  "name": "projectname",
  "main": "expo-router/entry",
  "version": "1.0.1",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "@rnmapbox/maps": "^10.1.33",
    "@tanstack/react-query": "^4.36.1",
    "axios": "^1.7.9",
    "expo": "~52.0.27",
    "expo-blur": "~14.0.3",
    "expo-checkbox": "~4.0.1",
    "expo-font": "~13.0.3",
    "expo-image-picker": "~16.0.4",
    "expo-linear-gradient": "~14.0.2",
    "expo-linking": "~7.0.5",
    "expo-router": "~4.0.17",
    "expo-splash-screen": "~0.29.21",
    "expo-status-bar": "~2.0.1",
    "expo-system-ui": "~4.0.7",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "^0.76.6",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.5"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@react-native-community/cli": "^15.1.3",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.3",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

My device :

Android Emulator - OUKITEL_API_31:5554

Additional links and references

No response

[torodebout]

same issue in cli, happening on android only, not ios

[two3d]

I see that the version returned by the command: “npm @rnmapbox/maps -v” is 11.0.0. My package.json shows 10.1.33

Perhaps this has something to do with the error?

[iGrits]

I see that the version returned by the command: “npm @rnmapbox/maps -v” is 11.0.0. My package.json shows 10.1.33

Perhaps this has something to do with the error?

No that shows your npm version, not your rnmapbox. You can use npm list @rnmapbox/maps to see rnmapbox version. Anyway, I am having the same issue. Appeared after enabling new architecture.

[two3d]

No that shows your npm version, not your rnmapbox. You can use npm list @rnmapbox/maps to see rnmapbox version. Anyway, I am having the same issue. Appeared after enabling new architecture.

@rnmapbox/[email protected] Thanks, I've updated my post 👍

[sabuhiteymurov]

Any updates on this issue?

[two3d]

I'm hiding the errors for now:

import {LogBox} from "react-native";

LogBox.ignoreLogs([ //Mapbox errors 'Mapbox [error] ViewTagResolver | view:' ]);

[alternacrow]

Any updates ? I'm also experiencing the same issue.

[hassanad94]

Any updates?

[Sir-ct]

Hello guys.. Has there been any fix for this issue..

[torodebout]

as @two3d mentionned, temporary solution is to suppress the error/warning

import { LogBox } from 'react-native'; LogBox.ignoreLogs(['ViewTagResolver']);

[shahzeb79]

Anyone know how to fix this issue?

import { LogBox } from 'react-native';
LogBox.ignoreLogs(['ViewTagResolver']);

dont help

[two3d]

Anyone know how to fix this issue?

import { LogBox } from 'react-native';
LogBox.ignoreLogs(['ViewTagResolver']);

dont help

Is not this ViewTagResolver but Mapbox [error] ViewTagResolver | view: (what you want to hide has to start with exactly that).

[shahzeb79]

but even ignoreLogs, app crashes in production due to this issue.

any one found solution yet?

[Med-Li-Jr]

Just found the view null that cause the error in this file

node_modules@rnmapbox\maps\src\components\MapView.tsx

in the render() function, just before the return :

if (mapView == null) {
  mapView = (
    <RNMBXMapView {...props} {...callbacks}>
      {this.props.children}
    </RNMBXMapView>
  )
}

return (
  <View
    onLayout={this._onLayout}
    style={this.props.style}
    testID={mapView ? undefined : this.props.testID}
  >
    {mapView}
  </View>
);

[LukasB-DEV]

any fix for this? @Med-Li-Jr how to solve this? I see in .37 it looks like this:

let mapView = null; if (this.state.isReady) { if (props._nativeImpl) { mapView = <props._nativeImpl {...props} {...callbacks} />; } else { mapView = ( <RNMBXMapView {...props} {...callbacks}> {this.props.children} </RNMBXMapView> ); } }

[Med-Li-Jr]

@LukasB-DEV , just add this before the return keyword

      if (mapView == null) {
        mapView = (
          <RNMBXMapView {...props} {...callbacks}>
            {this.props.children}
          </RNMBXMapView>
        )
      }

So your code should be like :

          let mapView = null;
        if (this.state.isReady) {
          if (props._nativeImpl) {
            mapView = <props._nativeImpl {...props} {...callbacks} />;
          } else {
            mapView = (
            <RNMBXMapView {...props} {...callbacks}>
                {this.props.children}
              </RNMBXMapView>
            );
          }
        }
  
      // New Lines start here
      if (mapView == null) {
        mapView = (
          <RNMBXMapView {...props} {...callbacks}>
            {this.props.children}
          </RNMBXMapView>
        )
      }
      // New Lines end here
  
            
      return (
        <View
          onLayout={this._onLayout}
          style={this.props.style}
          testID={mapView ? undefined : this.props.testID}
        >
          {mapView}
        </View>
      );                    

[cixio]

@Med-Li-Jr thanks! Can you please create a PR?

[LukasB-DEV]

// New Lines start here if (mapView == null) { mapView = ( <RNMBXMapView {...props} {...callbacks}> {this.props.children} </RNMBXMapView> ) } // New Lines end here

Works. Thanks!

[Crawford30]

@LukasB-DEV , just add this before the return keyword

      if (mapView == null) {
        mapView = (
          <RNMBXMapView {...props} {...callbacks}>
            {this.props.children}
          </RNMBXMapView>
        )
      }

So your code should be like :

          let mapView = null;
        if (this.state.isReady) {
          if (props._nativeImpl) {
            mapView = <props._nativeImpl {...props} {...callbacks} />;
          } else {
            mapView = (
            <RNMBXMapView {...props} {...callbacks}>
                {this.props.children}
              </RNMBXMapView>
            );
          }
        }
  
      // New Lines start here
      if (mapView == null) {
        mapView = (
          <RNMBXMapView {...props} {...callbacks}>
            {this.props.children}
          </RNMBXMapView>
        )
      }
      // New Lines end here
  
            
      return (
        <View
          onLayout={this._onLayout}
          style={this.props.style}
          testID={mapView ? undefined : this.props.testID}
        >
          {mapView}
        </View>
      );                    

@Med-Li-Jr , thanks for this. A question please;

Does this mean each time I delete a node_modules, I have to add the fix? If so, is there any workaround of a permanent solution?

[LukasB-DEV]

@LukasB-DEV , just add this before the return keyword

      if (mapView == null) {
        mapView = (
          <RNMBXMapView {...props} {...callbacks}>
            {this.props.children}
          </RNMBXMapView>
        )
      }

So your code should be like :

          let mapView = null;
        if (this.state.isReady) {
          if (props._nativeImpl) {
            mapView = <props._nativeImpl {...props} {...callbacks} />;
          } else {
            mapView = (
            <RNMBXMapView {...props} {...callbacks}>
                {this.props.children}
              </RNMBXMapView>
            );
          }
        }
  
      // New Lines start here
      if (mapView == null) {
        mapView = (
          <RNMBXMapView {...props} {...callbacks}>
            {this.props.children}
          </RNMBXMapView>
        )
      }
      // New Lines end here
  
            
      return (
        <View
          onLayout={this._onLayout}
          style={this.props.style}
          testID={mapView ? undefined : this.props.testID}
        >
          {mapView}
        </View>
      );                    

@Med-Li-Jr , thanks for this. A question please;

Does this mean each time I delete a node_modules, I have to add the fix? If so, is there any workaround of a permanent solution?

You can use npm patch-package if you use npm. Yarn also has such a solution

[Med-Li-Jr]

@LukasB-DEV , just add this before the return keyword

      if (mapView == null) {
        mapView = (
          <RNMBXMapView {...props} {...callbacks}>
            {this.props.children}
          </RNMBXMapView>
        )
      }

So your code should be like :

          let mapView = null;
        if (this.state.isReady) {
          if (props._nativeImpl) {
            mapView = <props._nativeImpl {...props} {...callbacks} />;
          } else {
            mapView = (
            <RNMBXMapView {...props} {...callbacks}>
                {this.props.children}
              </RNMBXMapView>
            );
          }
        }
  
      // New Lines start here
      if (mapView == null) {
        mapView = (
          <RNMBXMapView {...props} {...callbacks}>
            {this.props.children}
          </RNMBXMapView>
        )
      }
      // New Lines end here
  
            
      return (
        <View
          onLayout={this._onLayout}
          style={this.props.style}
          testID={mapView ? undefined : this.props.testID}
        >
          {mapView}
        </View>
      );                    

@Med-Li-Jr , thanks for this. A question please;

Does this mean each time I delete a node_modules, I have to add the fix? If so, is there any workaround of a permanent solution?

@Crawford30 yes it seems so, 'cause the error comes from one of the file in the folder node_modules. As @LukasB-DEV said, you can use patch-package to do it auto instead of manual

here is a temp patch file to use, until there is an official one : @rnmapbox+ViewTagResolver+error+null+TEMP.patch

[FernandoAOborges]

Issues with @rnmapbox/maps and React Native 0.79.0

I'm getting multiple warnings and errors when using @rnmapbox/maps@^10.1.39 with React Native 0.79.0:

Errors:

new NativeEventEmitter() was called with a non-null argument without the required addListener method. Error Component Stack:

new NativeEventEmitter() was called with a non-null argument without the required removeListeners method. Error Component Stack:

Warnings:

Mapbox [error] ViewTagResolver | view: null found with tag: 1184 but it's either null or not the correct type

Environment:

"react-native": "0.79.0",
"@rnmapbox/maps": "^10.1.39"

Has anyone else experienced these issues? Is there a known fix or workaround?

[FernandoAOborges]

To stop the error from occurring, you can add the property newArchEnabled=false in the android/gradle.properties file. If you're using Expo, you can do this in the app.json file:

This is not a viable long-term solution. Setting newArchEnabled=false works as a temporary workaround, but it's not a proper fix. The best approach is to wait for an official update from the maintainers, as disabling the new architecture means losing potential performance improvements and future enhancements. I believe it's better to be patient and allow the development team to address this properly.

[MarcAntoineCarrier28]

I have the same exact issue. Waiting for a fix...

[javier-sauma-rocketlab]

Same over here

[DavidAmyot]

+1

[correafederico25]

+1

[rodolforamos]

+1

[MariuzM]

Even with this error are you guys able to use mapbox in production build? I'm having issues in prod, when its dev build its working but when its prod the hole app crashes when it comes into Mapbox view

[drogon98]

Even with this error are you guys able to use mapbox in production build? I'm having issues in prod, when its dev build its working but when its prod the hole app crashes when it comes into Mapbox view

+1