Merge commit '0764c17d43dedad48f74173baec555dd95c44b4c'

components/TrainMenu/MapPin.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { Image, StyleSheet, View } from "react-native";
 import { Marker } from "react-native-maps";
 import { useNavigation } from "@react-navigation/native";
 import { useStationList } from "@/stateBox/useStationList";
@@ -18,6 +19,7 @@ export const MapPin: FC<Props> = (props) => {
   const { index, indexBase, latlng, D, d, navigate, webview } = props;
   const { goBack } = useNavigation();
   const { getInjectJavascriptAddress } = useStationList();
+
   return (
     <Marker
       key={index + indexBase}
@@ -25,13 +27,37 @@ export const MapPin: FC<Props> = (props) => {
         latitude: parseFloat(latlng[0]),
         longitude: parseFloat(latlng[1]),
       }}
+      anchor={{ x: 0.5, y: 1 }}
+      tracksViewChanges={false}
       onPress={() => {
         const address = getInjectJavascriptAddress(D.StationNumber);
         if (!address) return;
         webview.current?.injectJavaScript(address);
         if (navigate) goBack();
       }}
-      image={require("../../assets/reccha-small.png")}
-    ></Marker>
+    >
+      <View style={styles.markerWrap}>
+        <Image
+          source={require("../../assets/reccha-small.png")}
+          style={styles.markerImage}
+          resizeMode="contain"
+        />
+      </View>
+    </Marker>
   );
 };
+
+const MAP_PIN_SIZE = Platform.OS === "android" ? 32 : 36;
+
+const styles = StyleSheet.create({
+  markerWrap: {
+    width: MAP_PIN_SIZE,
+    height: MAP_PIN_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  markerImage: {
+    width: MAP_PIN_SIZE,
+    height: MAP_PIN_SIZE,
+  },
+});

menu.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect, useCallback, useMemo, FC } from "react";
-import { Platform, View, ScrollView, LayoutAnimation, Text, InteractionManager, useWindowDimensions } from "react-native";
+import { Platform, View, ScrollView, LayoutAnimation, Text, InteractionManager, useWindowDimensions, Image } from "react-native";
 import Constants from "expo-constants";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
@@ -43,6 +43,8 @@ type props = {
   setMapMode: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
+const MAP_PIN_SIZE = Platform.OS === "android" ? 32 : 36;
+
 export const Menu: FC<props> = (props) => {
   const { scrollRef, mapHeight, MapFullHeight, mapMode, setMapMode } = props;
   const { navigate } = useNavigation();
@@ -345,7 +347,8 @@ export const Menu: FC<props> = (props) => {
                 latitude: lat,
                 longitude: lng,
               }}
-              image={require("@/assets/reccha-small.png")}
+              anchor={{ x: 0.5, y: 1 }}
+              tracksViewChanges={false}
               onPress={() => {
                 setMapMode(false);
                 setListIndex(index);
@@ -373,7 +376,13 @@ export const Menu: FC<props> = (props) => {
                 });
                 returnToTop();
               }}
-            />
+            >
+              <Image
+                source={require("@/assets/reccha-small.png")}
+                style={{ width: MAP_PIN_SIZE, height: MAP_PIN_SIZE }}
+                resizeMode="contain"
+              />
+            </Marker>
           ))}
         </MapView>
         {!mapMode && (