sentry fix

src/screens/InAppScreens/MapScreen/MarkerItem/index.tsx

@@ -77,16 +77,19 @@ const MarkerItem = ({
                 ]}
                 onPress={() => toggleSeries(marker)}
               >
-                {marker?.visited === 1 && token ? (
-                  <View style={styles.completedContainer}>
+                <View style={styles.completedContainer}>
+                  <View style={{ display: marker?.visited === 1 && token ? 'flex' : 'none' }}>
                     <CheckSvg width={14} height={14} fill={Colors.DARK_BLUE} />
-                    <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>
-                      Completed
-                    </Text>
                   </View>
-                ) : (
-                  <Text style={styles.calloutButtonText}>To Complete</Text>
-                )}
+                  <Text
+                    style={[
+                      styles.calloutButtonText,
+                      marker?.visited === 1 && token ? { color: Colors.DARK_BLUE } : {}
+                    ]}
+                  >
+                    {marker?.visited === 1 && token ? 'Completed' : 'To Complete'}
+                  </Text>
+                </View>
               </TouchableOpacity>
 
               {parsedAvatars && (
@@ -111,7 +114,7 @@ const MarkerItem = ({
                 >
                   {parsedAvatars?.map((avatar: number, index: number) => (
                     <Image
-                      key={index}
+                      key={avatar}
                       source={{ uri: API_HOST + '/img/avatars/' + avatar + '.webp' }}
                       style={styles.userImageSmall}
                     />
@@ -160,16 +163,19 @@ const MarkerItem = ({
                 ]}
                 onPressIn={() => toggleSeries(marker)}
               >
-                {marker?.visited === 1 && token ? (
-                  <View style={styles.completedContainer}>
+                <View style={styles.completedContainer}>
+                  <View style={{ display: marker?.visited === 1 && token ? 'flex' : 'none' }}>
                     <CheckSvg width={14} height={14} fill={Colors.DARK_BLUE} />
-                    <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>
-                      Completed
-                    </Text>
                   </View>
-                ) : (
-                  <Text style={styles.calloutButtonText}>To Complete</Text>
-                )}
+                  <Text
+                    style={[
+                      styles.calloutButtonText,
+                      marker?.visited === 1 && token ? { color: Colors.DARK_BLUE } : {}
+                    ]}
+                  >
+                    {marker?.visited === 1 && token ? 'Completed' : 'To Complete'}
+                  </Text>
+                </View>
               </TouchableOpacity>
 
               {parsedAvatars && (
@@ -194,7 +200,7 @@ const MarkerItem = ({
                 >
                   {parsedAvatars?.map((avatar: number, index: number) => (
                     <Image
-                      key={index}
+                      key={avatar}
                       source={{ uri: API_HOST + '/img/avatars/' + avatar + '.webp' }}
                       style={styles.userImageSmall}
                     />

src/screens/InAppScreens/MapScreen/MultipleSeriesModal/index.tsx

@@ -146,7 +146,7 @@ const MultipleSeriesModal = () => {
                         >
                           {parsedAvatars?.map((avatar: number, index: number) => (
                             <Image
-                              key={index}
+                              key={avatar}
                               source={{ uri: API_HOST + '/img/avatars/' + avatar + '.webp' }}
                               style={styles.userImageSmall}
                             />