React Native Maps Marker animation does not fire on release

Question

I'm working on a real-time tracking app using react-native 0.65.1 react-native-maps 0.31.1 react-native-geolocation-service 5.3.0-beta.1

Everything works well on debug mode. When user location changes, the map is animated and follows the user movement, and the custom marker is smoothly moved to the user location.

But on release, the animateMarkerToCoordinate method applied to the tracker marker does not work. The map moves but the marker does not.

        Geolocation.watchPosition(
            (position) => {
                let currentLocation = {
                    longitude: position.coords.longitude,
                    latitude: position.coords.latitude,
                    heading: position.coords.heading,
                };
                if (mapViewRef.current)
                    mapViewRef.current.animateCamera(
                        {
                            center: currentLocation,
                        },
                        {
                            duration: 200,
                        }
                    );

                if (trackerMarkerRef.current) {
            
                  if (Platform.OS == "android") {
                        trackerMarkerRef.current.animateMarkerToCoordinate(position, 200);
                  } else {
                    let newCoordinate = {
                      ...position,
                      useNativeDriver: true,
                      };
                    animtedRegion.timing({ ...newCoordinate, useNativeDriver: true, duration: 200 }).start();
                  }
                }
            },
            (error) => console.log(error),
            {
                showLocationDialog: true,
                enableHighAccuracy: true,
                accuracy: {
                    android: "high",
                    ios: "bestForNavigation",
                },
                fastestInterval: 100,
                distanceFilter: 0.01,
                interval: 100,
            }
        );

<MapView
       style={styles.map}
       provider={PROVIDER_GOOGLE}
       showsUserLocation={true}
       ref={mapViewRef}
       initialRegion={{
         latitude: locationRef.current.latitude,
         longitude: locationRef.current.longitude,
         latitudeDelta: latitudeDelta,
         longitudeDelta: longitudeDelta,
      }}
>
 

         {locationTrackerRef.current && (
           <Marker.Animated
             coordinate={{
              latitude: locationTrackerRef.current.latitude,
              longitude: locationTrackerRef.current.longitude,
             }}
            anchor={{ x: 0.5, y: 0.5 }}
            ref={trackerMarkerRef}
          >
           <Animated.View style={{ transform: [{ rotate: rotation }] }}>
            <Image
             source={require("../images/pins.png")}
              style={{
                height: 30,
                width: undefined,
                resizeMode: "contain",
                aspectRatio: 1,
              }}
           />
     </Animated.View>
</Marker.Animated>
)}

</MapView>

Answer 1

https://github.com/react-native-maps/react-native-maps/issues/4371 this issue might help you

• you can use rule in proguard or use reanimated on marker instead of refMarker because react-native-maps are using Animated of react-native not smooth as react-native-reanimated v2