rnmapbox / maps

A Mapbox react native module for creating custom maps
MIT License
2.28k stars 848 forks source link

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

Open EmilJunker opened 3 weeks ago

EmilJunker commented 3 weeks ago

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:

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