NTP-65681 | Map view crash fix (#1178)

src/components/MapViewWrapper/index.tsx

@@ -112,11 +112,11 @@ const MapViewWrapper = forwardRef<MapViewWrapperRef, MapViewWrapperProps>((props
         {...mapProps}
       >
         {children}
-        {deviceGeolocationCoordinate && (
+        {deviceGeolocationCoordinate?.latitude && deviceGeolocationCoordinate?.longitude && (
           <Marker
             coordinate={{
-              latitude: deviceGeolocationCoordinate.latitude,
+              latitude: Number(deviceGeolocationCoordinate.latitude),
-              longitude: deviceGeolocationCoordinate.longitude,
+              longitude: Number(deviceGeolocationCoordinate.longitude),
             }}
             onPress={() => currentLocationMarkerRef?.current?.showCallout()}
             tracksViewChanges={false}
@@ -138,8 +138,8 @@ const MapViewWrapper = forwardRef<MapViewWrapperRef, MapViewWrapperProps>((props
         {agentBaseLocation?.latitude && agentBaseLocation?.longitude && (
           <Marker
             coordinate={{
-              latitude: agentBaseLocation.latitude,
+              latitude: Number(agentBaseLocation.latitude),
-              longitude: agentBaseLocation.longitude,
+              longitude: Number(agentBaseLocation.longitude),
             }}
             onPress={() => baseLocationMarkerRef?.current?.showCallout()}
             tracksViewChanges={false}

src/screens/MapView/CasesMap/CustomMarker.tsx

@@ -72,8 +72,8 @@ const CustomMarker = (props: CustomMarkerProps) => {
       key={caseReferenceId}
       identifier={caseReferenceId}
       coordinate={{
-        latitude: caseDetails[caseReferenceId]?.addressLocation?.latitude,
+        latitude: Number(caseDetails[caseReferenceId]?.addressLocation?.latitude),
-        longitude: caseDetails[caseReferenceId]?.addressLocation?.longitude,
+        longitude: Number(caseDetails[caseReferenceId]?.addressLocation?.longitude),
       }}
       tracksViewChanges={false}
       onPress={() => handleMarkerPress(caseReferenceId)}

src/screens/MapView/CasesMap/MapButtons.tsx

@@ -14,12 +14,19 @@ import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
 interface MapButtonsProps {
   buttonPosition: SharedValue<number>;
   mapRef: React.RefObject<MapViewWrapperRef>;
+  visibleCard: boolean;
 }
 
-const MapButtons = ({ buttonPosition, mapRef }: MapButtonsProps) => {
+const MapButtons = ({ buttonPosition, mapRef, visibleCard }: MapButtonsProps) => {
   const buttonAnimatedStyle = useAnimatedStyle(() => {
+    let positionValue;
+    if (Number.isNaN(buttonPosition.value)) {
+      positionValue = visibleCard ? 1 : 0;
+    } else {
+      positionValue = buttonPosition.value;
+    }
     return {
-      bottom: buttonPosition.value * 208, // 208 is the height of the card
+      bottom: positionValue * 208, // 208 is the height of the card
     };
   });
 

src/screens/MapView/CasesMap/MapWithCasesPins.tsx

@@ -114,7 +114,7 @@ const MapWithCasesPins = React.memo(({ filteredCasesList }: IMapWithCasesPins) =
       >
         {markers}
       </MapViewWrapper>
-      <MapButtons buttonPosition={buttonPosition} mapRef={mapRef} />
+      <MapButtons buttonPosition={buttonPosition} mapRef={mapRef} visibleCard={!!visibleCard} />
     </>
   );
 });

src/screens/MapView/CasesMap/UserCard.tsx

@@ -27,10 +27,11 @@ const UserCard: React.FC<UserCardProps> = ({ selectedCase, cardPosition }) => {
   const caseDetail = useAppSelector((state) => state.allCases?.caseDetails?.[selectedCase]) || {};
 
   const cardAnimatedStyle = useAnimatedStyle(() => {
+    const positionValue = Number.isNaN(cardPosition.value) ? 1 : cardPosition.value;
     return {
       transform: [
         {
-          translateY: (1 - cardPosition.value) * 220, // 220 is the height of the card here as the profile picture takes the extra space
+          translateY: (1 - positionValue) * 220, // 220 is the height of the card here as the profile picture takes the extra space
         },
       ],
     };

src/screens/MapView/TopAddress/MapWithAddresses.tsx

@@ -85,7 +85,10 @@ const MapWithAddresses = ({ caseId }: IMapWithAddressesProps) => {
                       ? address?.rank
                       : TOP_ADDRESS_PIN_SELECTED_Z_INDEX
                   }
-                  coordinate={{ latitude: address.latitude, longitude: address.longitude }}
+                  coordinate={{
+                    latitude: Number(address.latitude),
+                    longitude: Number(address.longitude),
+                  }}
                 >
                   <Pin address={address} />
                 </Marker>

src/screens/addresses/topAddresses/TopAddressesList.tsx

@@ -6,7 +6,7 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { GenericStyles } from '@rn-ui-lib/styles';
 import { COLORS } from '@rn-ui-lib/colors';
 import Text from '@rn-ui-lib/components/Text';
@@ -33,8 +33,19 @@ const TopAddressesList = ({ caseId, scrollToIndex }: ITopAddressesList) => {
     dispatch(getTopAddresses(caseId, PAGE_START));
   }, []);
 
+  const handleScrollToIndexFailed = useCallback((info: { index: number }) => {
+    const wait = new Promise((resolve) => setTimeout(resolve, 500));
+    wait.then(() => {
+      flatListRef.current?.scrollToIndex({
+        index: info.index,
+        animated: true,
+        viewPosition: 16,
+      });
+    });
+  }, []);
+
   useEffect(() => {
-    if (scrollToIndex != null && !isTopAddressesLoading) {
+    if (scrollToIndex != null && !isTopAddressesLoading && addresses?.length) {
       InteractionManager.runAfterInteractions(() => {
         flatListRef.current?.scrollToIndex({
           index: scrollToIndex - 1,
@@ -62,6 +73,7 @@ const TopAddressesList = ({ caseId, scrollToIndex }: ITopAddressesList) => {
           refreshControl={<RefreshControl refreshing={false} onRefresh={onRefresh} />}
           contentContainerStyle={[GenericStyles.p16, GenericStyles.mb24]}
           renderItem={({ item }) => <OtherAddressItem locationDetails={item} caseId={caseId} />}
+          onScrollToIndexFailed={handleScrollToIndexFailed}
         />
       ) : (
         <View style={[GenericStyles.justifyContentCenter, GenericStyles.alignCenter, styles.h100]}>