ordering-ui-react-native 0.21.71-release → 0.21.72-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.71-release",
+  "version": "0.21.72-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/DriverMap/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Dimensions, Platform, SafeAreaView, StyleSheet, View } from 'react-native';
 import MapView, {
   PROVIDER_GOOGLE,
@@ -69,20 +69,26 @@ export const DriverMap = (props: GoogleMapsParams) => {
     stopFollowUserLocation,
   } = useLocation();
 
-  const destination = {
-    latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
-    longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0
-  };
+  const parsedInitialPosition = useCallback(() => {
+    return {
+      latitude: typeof initialPosition.latitude === 'string' ? parseFloat(initialPosition.latitude) || 0 : initialPosition.latitude || 0,
+      longitude: typeof initialPosition.longitude === 'string' ? parseFloat(initialPosition.longitude) || 0 : initialPosition.longitude || 0,
+    }
+  }, [JSON.stringify(initialPosition)])
 
-  const parsedInitialPosition = {
-    latitude: typeof initialPosition.latitude === 'string' ? parseFloat(initialPosition.latitude) || 0 : initialPosition.latitude || 0,
-    longitude: typeof initialPosition.longitude === 'string' ? parseFloat(initialPosition.longitude) || 0 : initialPosition.longitude || 0,
-  }
+  const parsedUserLocation = useCallback(() => {
+    return {
+      latitude: typeof userLocation?.latitude === 'string' ? parseFloat(userLocation?.latitude) || 0 : userLocation?.latitude || 0,
+      longitude: typeof userLocation?.longitude === 'string' ? parseFloat(userLocation?.longitude) || 0 : userLocation?.longitude || 0
+    }
+  }, [JSON.stringify(userLocation)])
 
-  const parsedUserLocation = {
-    latitude: typeof userLocation?.latitude === 'string' ? parseFloat(userLocation?.latitude) || 0 : userLocation?.latitude || 0,
-    longitude: typeof userLocation?.longitude === 'string' ? parseFloat(userLocation?.longitude) || 0 : userLocation?.longitude || 0
-  }
+  const parsedDestination = useCallback(() => {
+    return {
+      latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+      longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0
+    }
+  }, [JSON.stringify(location)])
 
   useEffect(() => {
     if (isToFollow) {
@@ -170,21 +176,21 @@ export const DriverMap = (props: GoogleMapsParams) => {
     if (driverUpdateLocation.error) return;
 
     calculateDistance(
-      { lat: parsedUserLocation.latitude, lng: parsedUserLocation.longitude },
-      destination,
+      { lat: parsedUserLocation()?.latitude, lng: parsedUserLocation()?.longitude },
+      parsedDestination(),
     );
     // geocodePosition(userLocation);
 
     if (!following.current) return;
     fitCoordinates();
 
-    const { latitude, longitude } = parsedUserLocation;
+    const { latitude, longitude } = parsedUserLocation();
 
     mapRef.current?.animateCamera({
       center: { latitude, longitude },
     });
 
-  }, [parsedUserLocation]);
+  }, [JSON.stringify(userLocation)]);
 
   const handleArrowBack: any = () => {
     setDriverUpdateLocation?.({
@@ -250,8 +256,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
         [
           { latitude: location.lat, longitude: location.lng },
           {
-            latitude: parsedInitialPosition.latitude,
-            longitude: parsedInitialPosition.longitude,
+            latitude: parsedInitialPosition()?.latitude,
+            longitude: parsedInitialPosition()?.longitude,
           },
         ],
         {
@@ -264,7 +270,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      if (parsedInitialPosition.latitude !== 0 && autoFit.current) {
+      if (parsedInitialPosition()?.latitude !== 0 && autoFit.current) {
         if (mapRef.current) {
           fitCoordinates();
           autoFit.current = false;
@@ -272,7 +278,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
       }
     }, 1000);
     return () => clearInterval(interval);
-  }, [parsedInitialPosition]);
+  }, [parsedInitialPosition()]);
 
   const fitCoordinatesZoom = () => {
     following.current = false;
@@ -355,8 +361,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ref={mapRef}
             provider={PROVIDER_GOOGLE}
             initialRegion={{
-              latitude: parsedInitialPosition.latitude,
-              longitude: parsedInitialPosition.longitude,
+              latitude: parsedInitialPosition()?.latitude,
+              longitude: parsedInitialPosition()?.longitude,
               latitudeDelta: 0.001,
               longitudeDelta: 0.001 * ASPECT_RATIO,
             }}
@@ -378,8 +384,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
               <>
                 <Marker
                   coordinate={{
-                    latitude: typeof destination?.latitude !== 'object' ? destination?.latitude : 0,
-                    longitude: typeof destination?.longitude !== 'object' ? destination?.latitude : 0
+                    latitude: parsedDestination()?.latitude,
+                    longitude: parsedDestination()?.longitude
                   }}
                   title={location.title}>
                   <Icon
@@ -397,8 +403,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
                   </View>
                 </Marker>
                 <Marker coordinate={{
-                  latitude: typeof parsedUserLocation?.latitude !== 'object' ? parsedUserLocation?.latitude : 0,
-                  longitude: typeof parsedUserLocation?.longitude !== 'object' ? parsedUserLocation?.latitude : 0
+                  latitude: userLocation?.latitude,
+                  longitude: userLocation?.longitude
                 }}>
                   <View style={styles.driverIcon}>
                     <OIcon
@@ -413,8 +419,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ) : (
               <Marker
                 coordinate={{
-                  latitude: typeof parsedUserLocation?.latitude !== 'object' ? parsedUserLocation?.latitude : 0,
-                  longitude: typeof parsedUserLocation?.longitude !== 'object' ? parsedUserLocation?.latitude : 0
+                  latitude: parsedUserLocation()?.latitude,
+                  longitude: parsedUserLocation()?.longitude
                 }}
                 title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
               />
@@ -526,10 +532,10 @@ export const DriverMap = (props: GoogleMapsParams) => {
               animationIn: 'slideInUp'
             }}
             options={{
-              latitude: destination.latitude,
-              longitude: destination.longitude,
-              sourceLatitude: parsedUserLocation.latitude,
-              sourceLongitude: parsedUserLocation.longitude,
+              latitude: parsedDestination()?.latitude,
+              longitude: parsedDestination()?.longitude,
+              sourceLatitude: parsedUserLocation()?.latitude,
+              sourceLongitude: parsedUserLocation()?.longitude,
               naverCallerName: 'com.deliveryapp',
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),