[Bug]: Mapbox.Location component not woking properly when using React Native 0.76 with new architecture

[EmilJunker]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.76.1

Platform

Android

@rnmapbox/maps version

10.1.33

Standalone component to reproduce

import React, { useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox, { requestAndroidLocationPermissions } from '@rnmapbox/maps';

const MapViewWithLocation = () => {
  const [haveLocationPermission, setHaveLocationPermission] = useState(false);

  useEffect(() => {
    requestAndroidLocationPermissions().then((havePermission) => setHaveLocationPermission(havePermission));
  }, []);

  const onLocationUpdate = (location: Mapbox.Location) => {
    console.log('MAPBOX-LOCATION:', location);
  }

  return (
    <Mapbox.MapView style={styles.map}>
      {haveLocationPermission && <Mapbox.UserLocation visible={true} minDisplacement={0} onUpdate={onLocationUpdate} />}
    </Mapbox.MapView>
  );
}

const styles = StyleSheet.create({
  map: {
    flex: 1
  }
});

export default MapViewWithLocation;

Observed behavior and steps to reproduce

Include the above component in a React Native 0.76 app with the new architecture enabled. Then build and run the app for Android. When prompted, give the app permission to access your location.

Then observe the following problems:

• The onLocationUpdate callback only gets called once and is never updated when the location changes
• The location pin on the map also doesn't update when the location changes
• The following error message appears in the console:

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

Expected behavior

The onLocationUpdate callback should be called every time there is a new location (i.e. about once every second). The location pin displayed on the map should update accordingly.

Notes / preliminary analysis

If you set newArchEnabled=false in android\gradle.properties and rebuild the app, everything will work properly.

Additional links and references

Minimal reproducible example app: https://github.com/EmilJunker/RNMapboxTestApp

[gabri3l0]

I have the same issue @EmilJunker. Were you able to solve it?

[EmilJunker]

@gabri3l0 I disabled the new architecture for now.

[two3d]

Use this : <MapView instead of this: <Mapbox.MapView and import MapView from rnmapbox.
EDIT: Sometimes the error is displayed, sometimes not... re-saving the file I'm working on after encountering an error removes the error message.
EDIT : On reflection, it may be that Mapbox was not yet loaded at the time of the error, so there may be a good way to initialize the map, as here, with the “render()” method.

[benjamin-sweney]

I too am facing this issue. We unfortunately need to retain the new architecture due to some other dependencies. Fingers crossed a fix is found shortly.

[two3d]

The reason for the problem could be an unstable Internet connection, see if that's the case, it's possible for me...