Add animation to courier marker updates

frederik-oestergaard · Feb 9, 2021 · 98090cf · 98090cf
1 parent c0e7e2e
commit 98090cf
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 21 deletions.
diff --git a/assets/images/delivery_icon.png b/assets/images/delivery_icon.png
diff --git a/components/TrackingMap.tsx b/components/TrackingMap.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useEffect, useRef } from "react";
 import { Image, Platform, StyleSheet } from "react-native";
-import MapView, { AnimatedRegion, MarkerAnimated } from "react-native-maps";
+import MapView, { AnimatedRegion, MapViewAnimated, MarkerAnimated } from "react-native-maps";
 import { Text } from "../components/Themed";
 
 export interface IMarker {
@@ -19,36 +19,31 @@ export interface TrackingMapProps {
 
 const TrackingMap: React.FC<TrackingMapProps> = ({ courier }) => {
 
+  // Animate the movement of the courier position
   const animatedRegion = useRef<AnimatedRegion>(new AnimatedRegion({
     latitude: courier.latlng.latitude,
     longitude: courier.latlng.longitude,
     latitudeDelta: 0.04,
     longitudeDelta: 0.04,
   }));
   const marker = useRef<MarkerAnimated>(null);
-
   useEffect(() => {
-     const duration = 500
-      const nextCoordinate = new AnimatedRegion({
-        latitude: courier.latlng.latitude,
-        longitude: courier.latlng.longitude,
-        latitudeDelta: 0.04, 
-        longitudeDelta: 0.04,
-      });
+     const DURATION = 800
 
-      if (animatedRegion.current !== nextCoordinate) {
+      if (Number(animatedRegion.current.latitude) !== courier.latlng.latitude) {
         if (Platform.OS === 'android') {
           if (marker.current) {
             marker.current.animateMarkerToCoordinate(
               courier.latlng,
-              duration
-            );
-          }
-        } else {
+              DURATION
+              );
+            }
+          } else {
           animatedRegion.current.timing({
             useNativeDriver: false,
-            ...courier,
-            duration
+            latitude: courier.latlng.latitude,
+            longitude: courier.latlng.longitude,
+            duration: DURATION
           }).start();
         }
       }
@@ -57,7 +52,7 @@ const TrackingMap: React.FC<TrackingMapProps> = ({ courier }) => {
 
   return (
     <>
-      <Text style={styles.title}>Live tracking!</Text>
+      <Text style={styles.title}>Live tracking</Text>
       <MapView
         style={styles.map}
         initialRegion={{
@@ -68,14 +63,14 @@ const TrackingMap: React.FC<TrackingMapProps> = ({ courier }) => {
         }}
       >
         <MarkerAnimated
-          coordinate={courier.latlng}
+          coordinate={animatedRegion.current}
           title={courier.title}
           description={courier.description}
           ref={marker}
         >
           <Image
-            source={require("../assets/images/player.png")}
-            style={{ width: 26, height: 26 }}
+            source={require("../assets/images/delivery_icon.png")}
+            style={{ width: 36, height: 36 }}
             resizeMode="contain"
           />
         </MarkerAnimated>

diff --git a/screens/LiveTrackingScreen.tsx b/screens/LiveTrackingScreen.tsx
@@ -24,7 +24,7 @@ export default function LiveTrackingScreen() {
             const newLongitude = data?.geo?.longitude;
             const newExpectedArrival = new Date(data?.expectedArrival?.seconds* 1000 - new Date().getTimezoneOffset()*60000 ).toISOString()
 
-            console.log("Coords: ",newLatitude, newLongitude);
+            console.log("New coords: ",newLatitude, newLongitude);
             setCourier({
               latlng: {
                 latitude: newLatitude,