android refactor

app.config.ts

@@ -16,7 +16,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
   name: 'NomadMania',
   slug: 'nomadmania-app',
-  owner: 'nomadmania',
+  owner: 'nomadmaniaou',
   scheme: 'nm',
   // Should be updated after every production release (deploy to AppStore/PlayMarket)
   version: '1.0.0',

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

@@ -0,0 +1,52 @@
+import { View, Image, Text } from 'react-native';
+import { Callout } from 'react-native-maps';
+
+import { styles } from '../MarkerItem/styles';
+import { ItemSeries } from '../../../../types/map';
+import { Colors } from 'src/theme';
+
+import CheckSvg from 'assets/icons/mark.svg';
+
+const CustomCallout = ({
+  marker,
+  toggleSeries,
+  iconUrl,
+  seriesName
+}: {
+  marker: ItemSeries;
+  toggleSeries: (item: any) => void;
+  iconUrl: string;
+  seriesName: string;
+}) => {
+  return (
+    <Callout style={styles.customCallout} onPress={() => toggleSeries(marker)}>
+      <View style={[styles.calloutContainer, { flex: 1 }]}>
+        <View style={[styles.calloutTextContainer, { marginTop: 0 }]}>
+          <Text style={styles.seriesName}>{seriesName}</Text>
+          <Text style={styles.markerName}>{marker.name}</Text>
+        </View>
+        <View
+          style={[
+            styles.calloutButton,
+            marker.visited === 1 && {
+              backgroundColor: Colors.WHITE,
+              borderWidth: 1,
+              borderColor: Colors.BORDER_LIGHT
+            }
+          ]}
+        >
+          {marker.visited === 1 ? (
+            <View style={styles.completedContainer}>
+              <CheckSvg width={14} height={14} fill={Colors.DARK_BLUE} />
+              <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>Completed</Text>
+            </View>
+          ) : (
+            <Text style={styles.calloutButtonText}>Mark Completed</Text>
+          )}
+        </View>
+      </View>
+    </Callout>
+  );
+};
+
+export default CustomCallout;

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

@@ -1,8 +1,12 @@
-import { View, Image, Text } from 'react-native';
-import { Marker, Callout, CalloutSubview } from 'react-native-maps';
+import { useEffect, useRef } from 'react';
+import { View, Image, Text, TouchableOpacity, Platform } from 'react-native';
+import { Marker, Callout, CalloutSubview, MapMarker } from 'react-native-maps';
+import CustomCallout from '../CustomCallout';
+
 import { styles } from './styles';
 import { ItemSeries } from '../../../../types/map';
 import { Colors } from 'src/theme';
+
 import CheckSvg from 'assets/icons/mark.svg';
 
 const MarkerItem = ({
@@ -18,48 +22,68 @@ const MarkerItem = ({
   seriesName: string;
   toggleSeries: (item: any) => void;
 }) => {
-  return (
-    <Marker coordinate={coordinate} tracksViewChanges={false}>
-      <View
-        style={[styles.markerContainer, marker.visited === 1 && { backgroundColor: Colors.ORANGE }]}
-      >
-        <Image source={{ uri: iconUrl }} style={styles.icon} resizeMode="contain" />
-      </View>
+  let markerRef = useRef<MapMarker>(null);
+  useEffect(() => {
+    if (markerRef.current && Platform.OS !== 'ios') {
+      markerRef.current?.showCallout();
+    }
+  }, [marker.visited]);
 
-      <Callout tooltip style={styles.customView}>
-        <View style={styles.calloutContainer}>
-          <View style={styles.calloutImageContainer}>
-            <Image source={{ uri: iconUrl }} style={styles.calloutImage} resizeMode="contain" />
-          </View>
-          <View style={styles.calloutTextContainer}>
-            <Text style={styles.seriesName}>{seriesName}</Text>
-            <Text style={styles.markerName}>{marker.name}</Text>
-          </View>
-          <CalloutSubview
-            style={[
-              styles.calloutButton,
-              marker.visited === 1 && {
-                backgroundColor: Colors.WHITE,
-                borderWidth: 1,
-                borderColor: Colors.BORDER_LIGHT
-              }
-            ]}
-            onPress={() => toggleSeries(marker)}
-          >
-            {marker?.visited === 1 ? (
-              <View style={styles.completedContainer}>
-                <CheckSvg width={14} height={14} fill={Colors.DARK_BLUE} />
-                <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>
-                  Completed
-                </Text>
-              </View>
-            ) : (
-              <Text style={styles.calloutButtonText}>Mark Completed</Text>
-            )}
-          </CalloutSubview>
+  return (
+    <>
+      <Marker coordinate={coordinate} tracksViewChanges={false} ref={markerRef}>
+        <View
+          style={[
+            styles.markerContainer,
+            marker.visited === 1 && { backgroundColor: Colors.ORANGE }
+          ]}
+        >
+          <Image source={{ uri: iconUrl }} style={styles.icon} resizeMode="contain" />
         </View>
-      </Callout>
-    </Marker>
+        {Platform.OS === 'ios' ? (
+          <Callout tooltip style={styles.customView}>
+            <View style={styles.calloutContainer}>
+              <View style={styles.calloutImageContainer}>
+                <Image source={{ uri: iconUrl }} style={styles.calloutImage} resizeMode="contain" />
+              </View>
+              <View style={styles.calloutTextContainer}>
+                <Text style={styles.seriesName}>{seriesName}</Text>
+                <Text style={styles.markerName}>{marker.name}</Text>
+              </View>
+              <CalloutSubview
+                style={[
+                  styles.calloutButton,
+                  marker.visited === 1 && {
+                    backgroundColor: Colors.WHITE,
+                    borderWidth: 1,
+                    borderColor: Colors.BORDER_LIGHT
+                  }
+                ]}
+                onPress={() => toggleSeries(marker)}
+              >
+                {marker?.visited === 1 ? (
+                  <View style={styles.completedContainer}>
+                    <CheckSvg width={14} height={14} fill={Colors.DARK_BLUE} />
+                    <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>
+                      Completed
+                    </Text>
+                  </View>
+                ) : (
+                  <Text style={styles.calloutButtonText}>Mark Completed</Text>
+                )}
+              </CalloutSubview>
+            </View>
+          </Callout>
+        ) : (
+          <CustomCallout
+            marker={marker}
+            toggleSeries={toggleSeries}
+            iconUrl={iconUrl}
+            seriesName={seriesName}
+          />
+        )}
+      </Marker>
+    </>
   );
 };
 

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

@@ -10,12 +10,11 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.WHITE,
     borderRadius: 15,
     borderWidth: 2,
-    borderColor: Colors.TEXT_GRAY,
+    borderColor: Colors.TEXT_GRAY
   },
   icon: {
     width: 20,
-    height: 20,
-    zIndex: 5,
+    height: 20
   },
   customView: {
     width: 200,
@@ -25,7 +24,7 @@ export const styles = StyleSheet.create({
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.12,
     shadowRadius: 8,
-    elevation: 5,
+    elevation: 5
   },
   calloutContainer: {
     alignItems: 'center',
@@ -41,11 +40,11 @@ export const styles = StyleSheet.create({
     borderRadius: 19,
     borderWidth: 2,
     borderColor: Colors.TEXT_GRAY,
-    marginTop: -34,
+    marginTop: -34
   },
   calloutImage: {
     width: 28,
-    height: 28,
+    height: 28
   },
   calloutTextContainer: {
     flex: 1,
@@ -71,12 +70,21 @@ export const styles = StyleSheet.create({
     borderRadius: 6,
     height: 30,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
   calloutButtonText: {
     color: 'white',
     fontSize: 12,
-    fontWeight: 'bold',
+    fontWeight: 'bold'
   },
-  completedContainer: { flexDirection: 'row', alignItems: 'center', gap: 6 }
+  completedContainer: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+  customCallout: {
+    width: 200,
+    backgroundColor: Colors.WHITE,
+    shadowColor: '#212529',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+    elevation: 5
+  }
 });

src/screens/InAppScreens/MapScreen/index.tsx

@@ -430,6 +430,11 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
           marker.id === item.id ? { ...marker, visited: Number(!marker.visited) as 0 | 1 } : marker
         )
       );
+      setProcessedMarkers((currentMarkers) =>
+        currentMarkers.map((marker) =>
+          marker.id === item.id ? { ...marker, visited: Number(!marker.visited) as 0 | 1 } : marker
+        )
+      );
 
       const itemData = {
         token: token,