Error while updating property 'line'cap of a view managed by: AIRMapPolyline

[adun]

Hello,

I'm having an issue running the extended example on Android.

Error while updating property 'lineCap' of a view managed by: AIRMapPolyline

null

Attempt to invoke virtual method 'void com.google.android.gms.maps.model.u.g(java.util.List)' on a null object reference

Sample screen embedded in a SafeAreaProvider

import { Dimensions, StyleSheet } from "react-native";
import React, { useEffect, useRef } from "react";
import MapView from "react-native-maps";
import MapViewDirections from "react-native-maps-directions";

const TestScreen = () => {
  const { width, height } = Dimensions.get("window");
  const ASPECT_RATIO = width / height;
  const LATITUDE = 37.771707;
  const LONGITUDE = -122.4053769;
  const LATITUDE_DELTA = 0.0922;
  const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

  const ORIGIN = { latitude: 37.3317876, longitude: -122.0054812 };
  const DESTINATION = { latitude: 37.771707, longitude: -122.4053769 };
  const RESULT = [ORIGIN, DESTINATION];

  const GOOGLE_MAPS_APIKEY = "...";

  const mapRef = useRef(null);
  useEffect(() => {
    mapRef.current.fitToCoordinates(RESULT, {
      edgePadding: {
        right: width / 20,
        bottom: height / 20,
        left: width / 20,
        top: height / 20,
      },
    });
  }, []);

  return (
    <MapView
      ref={mapRef}
      initialRegion={{
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      }}
      style={StyleSheet.absoluteFill}
    >
      <MapViewDirections
        origin={ORIGIN}
        destination={DESTINATION}
        apikey={GOOGLE_MAPS_APIKEY}
        strokeWidth={3}
        strokeColor="hotpink"
        optimizeWaypoints={true}
        onStart={(params) => {
          console.log(
            `Started routing between "${params.origin}" and "${params.destination}"`
          );
        }}
        onReady={(result) => {
          console.log(`Distance: ${result.distance} km`);
          console.log(`Duration: ${result.duration} min.`);
        }}
        onError={(errorMessage) => {
          console.log(`GOT AN ERROR ${errorMessage}`);
        }}
      />
    </MapView>
  );
};

export default TestScreen;

A test ready project is available here: https://github.com/adun/react-native-maps-directions-issue

Thanks for your help! adun

[hiagoLF]

Add lineDashPattern={[0]} property on MapViewDirections like the following example...

<MapViewDirections
        origin={ORIGIN}
        destination={DESTINATION}
        apikey={GOOGLE_MAPS_APIKEY}
        strokeWidth={3}
        strokeColor="hotpink"
        optimizeWaypoints={true}
        onStart={(params) => {
          console.log(
            `Started routing between "${params.origin}" and "${params.destination}"`
          );
        }}
        onReady={(result) => {
          console.log(`Distance: ${result.distance} km`);
          console.log(`Duration: ${result.duration} min.`);
        }}
        onError={(errorMessage) => {
          console.log(`GOT AN ERROR ${errorMessage}`);
        }}
        lineDashPattern={[0]}
      />

I found this solution o stackoverflow Link: https://stackoverflow.com/questions/68320484/error-while-updating-property-linecap-of-a-view-managed-by-airmappolyline-in

[adun]

Hi @hiagoLF,

When I ran my project in the Android Emulator, the Expo Go app updates itself. As a consequence, running my app works now and without adding changes to the codebase. The bug is no longer reproductible and might be related to an underlying bug in Expo itself.

I'm closing this.

[Bigbennny]

This was very helpful. Thanks.