AirMapView.map is not valid

[AlejandroRM-DEV]

trafficstars

Summary

We are using Sentry for error reporting, there is an error that is only occurring on one device. According to the error, it occurs when trying to access getMapBoundaries().

I'm not sure what it could be and I can't reproduce it specifically either as it is a specific model that it happens to. I wonder if anyone knows what it could be due to?

Reproducible sample code

const mapBoundaries = await mapRef.current.getMapBoundaries();

Steps to reproduce

Brand HONOR

Model ALI-NX3 (HONORALI-N03)

Android 13

Expected result

Actual result

React Native Maps Version

1.14.0

What platforms are you seeing the problem on?

Android

React Native Version

0.74.1

What version of Expo are you using?

Not using Expo

Device(s)

HONOR ALI-NX3

Additional information

No response

[yleclercq-pass]

Hello ! i've got the same error. we work with sentry and an error is reported on android device. Error: AirMapView.map is not valid we can see on the sentry snapshot a blank screen, the map is not displaying.

[aly-lopes]

I believe this issue could be related to https://github.com/react-native-maps/react-native-maps/pull/5061

[aly-lopes]

I've done some digging and found out that this exception is raised here: https://github.com/react-native-maps/react-native-maps/blob/master/android/src/main/java/com/rnmaps/maps/MapUIBlock.java#L46

Unfortunately I have zero context about whats happening there :/

[aly-lopes]

Something that seems related but I'm not sure: I've created a boolean ref to inform that map is ready.

const mapReady = useRef(false);

function handleMapReady(){
  mapReady.current = true;
}

<MapView onMapReady={handleMapReady}>

And just before trying to access getCamera or call setCamera via ref, I check if map is ready.

if(mapReady.current) {
  const camera  = await mapRef.current?.getCamera();
}

if(mapReady.current) {
  mapRef.current?.setCamera({center, zoom});
}

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If the issue remains relevant, simply comment Still relevant and the issue will remain open. Thank you for your contributions.

[melyux]

Just got it last week on the latest, not stale. Wonder what it is. Android only

[bfricka]

This is an ongoing issue for us, and the most reported Sentry error we are currently seeing.

[johnbindel]

This is also happening in my app on an ongoing basis in 1.18.0 with RN 0.76.5 and Expo 52.

[aly-lopes]

Something that seems related but I'm not sure: I've created a boolean ref to inform that map is ready.

const mapReady = useRef(false);

function handleMapReady(){ mapReady.current = true; }

And just before trying to access `getCamera` or call `setCamera` via ref, I check if map is ready.

if(mapReady.current) { const camera = await mapRef.current?.getCamera(); } if(mapReady.current) { mapRef.current?.setCamera({center, zoom}); }

Just came with an update on my suggestion: it doesn't work ☹

I still receive this error on Sentry even after this check to see if Map is ready.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If the issue remains relevant, simply comment Still relevant and the issue will remain open. Thank you for your contributions.

[JanHeldal]

Still relevant. We occasionally get it when calling mapref.current.getCamera() Android 10 Phone: MI 8 Pro Node 18.20.4 NPM 10.7.0 Android gradle plugin: 8.8.0 Gradle: 8.10.2

[DrStoop]

Same here since I upgraded to Expo 53, React 19, new Architecture with dependencies see below. My development build on Android (emulator) throws the error unrecognized, only caught by Sentry. The dev-build on my iOS device is displayed instead of caught by Sentry:

This is where the error __52-[AIRMapManager getMapBoundaries:resolver:rejecter:]_block_invoke is thrown on iOS. Once you swipe this error message off the screen, everything works fine. It seems to only happen at the initial call of getMapBoundaries(), so it might be some initialization error. Still working on it...

Dependencies

  "dependencies": {
    "@expo/config-plugins": "~10.0.0",
    "@expo/vector-icons": "^14.0.3",
    "@react-native-assets/slider": "^9.0.0",
    "@react-native-async-storage/async-storage": "2.1.2",
    "@react-native-community/slider": "4.5.6",
    "@react-native-firebase/app": "^22.2.0",
    "@react-native-firebase/auth": "^22.2.0",
    "@react-native-firebase/database": "^22.2.0",
    "@react-native-firebase/storage": "^22.2.0",
    "@react-native-google-signin/google-signin": "^13.1.0",
    "@react-native-masked-view/masked-view": "0.3.2",
    "@react-navigation/bottom-tabs": "^7.4.2",
    "@react-navigation/material-top-tabs": "^7.3.2",
    "@react-navigation/native": "^7.1.14",
    "@sentry/react-native": "~6.14.0",
    "expo": "^53.0.11",
    "expo-apple-authentication": "~7.2.4",
    "expo-asset": "~11.1.5",
    "expo-blur": "~14.1.5",
    "expo-build-properties": "~0.14.6",
    "expo-constants": "~17.1.6",
    "expo-dev-client": "~5.2.0",
    "expo-device": "~7.1.4",
    "expo-file-system": "~18.1.10",
    "expo-font": "~13.3.1",
    "expo-haptics": "~14.1.4",
    "expo-image": "~2.3.0",
    "expo-image-manipulator": "~13.1.7",
    "expo-image-picker": "~16.1.4",
    "expo-linking": "~7.1.5",
    "expo-localization": "~16.1.5",
    "expo-location": "~18.1.5",
    "expo-network": "~7.1.5",
    "expo-router": "~5.1.0",
    "expo-sharing": "~13.1.5",
    "expo-splash-screen": "~0.30.9",
    "expo-status-bar": "~2.2.3",
    "expo-system-ui": "~5.0.8",
    "expo-updates": "~0.28.14",
    "expo-web-browser": "~14.2.0",
    "geolib": "^3.3.4",
    "i18n-js": "^4.4.3",
    "mathjs": "^13.2.0",
    "mobx": "^6.13.7",
    "mobx-react-lite": "^4.1.0",
    "mobx-state-tree": "^7.0.2",
    "patch-package": "^8.0.0",
    "promise": "^8.3.0",
    "react": "19.0.0",
    "react-content-loader": "^7.0.2",
    "react-dom": "19.0.0",
    "react-native": "0.79.4",
    "react-native-awesome-slider": "^2.9.0",
    "react-native-dialog": "^9.3.0",
    "react-native-gesture-handler": "~2.24.0",
    "react-native-get-random-values": "~1.11.0",
    "react-native-google-places-autocomplete": "^2.5.7",
    "react-native-keyboard-controller": "^1.17.4",
    "react-native-maps": "1.20.1",
    "react-native-modal": "^14.0.0-rc.1",
    "react-native-pager-view": "6.7.1",
    "react-native-reanimated": "~3.17.4",
    "react-native-reanimated-carousel": "^4.0.2",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",
    "react-native-shadow-2": "^7.1.0",
    "react-native-share": "^12.0.9",
    "react-native-svg": "15.11.2",
    "uuid": "^11.0.5"
  },

[DrStoop]

I can avoid the error on iOS (on-screen error modal) and Android (no Sentry error) by preventing getMapBoundaries() being called on first render:

const [isFirstRender, setIsFirstRender] = useState<boolean>(true);

useEffect(() => {
  setIsFirstRender(false);
}, []);

let liveBoundaries: BoundingBox | undefined = undefined;
if (!isFirstRender) {
  liveBoundaries = await mapViewRef.current?.getMapBoundaries();
 }

Without knowing what AIRMap & AIRMapManager.m do, I guess it looks like getMapBoundaries() relies on an instantiated AIRMap which seems to not be available yet on first render. This would explain the error message Invalid view returned from registry, expecting AIRMap, got: (null) where null instead of an AIRMap instance is received when getMapBoundaries() is called to early.

So until the actual bug is solved, this might be a workaround...

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If the issue remains relevant, simply comment Still relevant and the issue will remain open. Thank you for your contributions.