Merge commit '7b7ac73169255ae569ab38756f14a139dd255b9c' into develop

The XHR interceptor baked _MOCK_TRAIN at page load time, so seeking or
advancing a playback frame only changed React state but had no effect
on the already-loaded WebView page.

- webviewXhrInterceptor.ts:
  - Expose window.__jrsMockUpdateTrain(newData) from inside the IIFE so
    the _MOCK_TRAIN variable can be updated after page load
  - Add generateMockUpdateScript(trainPositions) helper: calls
    __jrsMockUpdateTrain with fresh data + GetDateTime, then calls
    window.setReload() to trigger the page's own redraw cycle

- WebView.tsx:
  - Import generateMockUpdateScript
  - Add useEffect watching mockTrainPositions (skips first mount since
    beforeContentLoaded already has correct data)
  - When mockApiFeatureEnabled && mockTrainPositions changes, inject the
    update script via webview.current.injectJavaScript()

Result: seeking, prev/next frame, and auto-advance during playback now
immediately update the train position display in the WebView.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

.gitignore

@@ -4,7 +4,7 @@ node_modules/**/*
 .pnp.js
 
 # Expo
-.expo/*
+.expo/
 .expo-shared
 
 # Build outputs
@@ -54,4 +54,9 @@ Thumbs.db
 .cache/
 
 android/
-ios/
+!modules/**/android/
+ios/
+!modules/**/ios/
+*.ipa
+*.apk
+*.aab

App.tsx

@@ -1,5 +1,10 @@
 import React, { useEffect } from "react";
-import { Platform, UIManager } from "react-native";
+import {
+  IS_LOW_DENSITY,
+  DEX_SCALE,
+  useRealWindowDimensions,
+} from "./utils/dexDimensionOverride";
+import { Linking, Platform, UIManager, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "./utils/disableFontScaling"; // グローバルなフォントスケーリング無効化
 import { AppContainer } from "./Apps";
@@ -10,7 +15,7 @@ import { CurrentTrainProvider } from "./stateBox/useCurrentTrain";
 import { AreaInfoProvider } from "./stateBox/useAreaInfo";
 import { BusAndTrainDataProvider } from "./stateBox/useBusAndTrainData";
 import { AllTrainDiagramProvider } from "./stateBox/useAllTrainDiagram";
-import { SheetProvider } from "react-native-actions-sheet";
+import { SheetProvider, SheetManager } from "react-native-actions-sheet";
 import "./components/ActionSheetComponents/sheets";
 import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -20,6 +25,9 @@ import { buildProvidersTree } from "./lib/providerTreeProvider";
 import { StationListProvider } from "./stateBox/useStationList";
 import { NotificationProvider } from "./stateBox/useNotifications";
 import { UserPositionProvider } from "./stateBox/useUserPosition";
+import { rootNavigationRef, stackAwareNavigate } from "./lib/rootNavigation";
+import { AppThemeProvider } from "./lib/theme";
+import StatusbarDetect from "./StatusbarDetect";
 
 LogBox.ignoreLogs([
   "ViewPropTypes will be removed",
@@ -37,6 +45,89 @@ export default function App() {
     UpdateAsync();
   }, []);
 
+  useEffect(() => {
+    const openFelicaPage = (retryCount = 0) => {
+      if (!rootNavigationRef.isReady()) {
+        if (retryCount < 8) {
+          setTimeout(() => openFelicaPage(retryCount + 1), 250);
+        }
+        return;
+      }
+
+      stackAwareNavigate("topMenu", {
+        screen: "setting",
+        params: {
+          screen: "FelicaHistoryPage",
+        },
+      });
+    };
+
+    const navigateWhenReady = (
+      callback: () => void,
+      url: string,
+      retryCount = 0
+    ) => {
+      if (!rootNavigationRef.isReady()) {
+        if (retryCount < 8) {
+          setTimeout(() => navigateWhenReady(callback, url, retryCount + 1), 250);
+        }
+        return;
+      }
+      callback();
+    };
+
+    const routeFromUrl = (url: string, retryCount = 0) => {
+      const normalized = (url || "").toLowerCase();
+      if (!normalized) return;
+
+      if (
+        normalized.includes("felicahistorypage") ||
+        normalized.includes("open/felica")
+      ) {
+        navigateWhenReady(() => openFelicaPage(), url, retryCount);
+      } else if (normalized.includes("open/traininfo")) {
+        navigateWhenReady(() => {
+          stackAwareNavigate("topMenu", { screen: "menu" });
+          setTimeout(() => {
+            SheetManager.show("JRSTraInfo");
+          }, 450);
+        }, url, retryCount);
+      } else if (normalized.includes("open/operation")) {
+        navigateWhenReady(() => {
+          stackAwareNavigate("information");
+        }, url, retryCount);
+      } else if (normalized.includes("open/settings")) {
+        navigateWhenReady(() => {
+          stackAwareNavigate("topMenu", {
+            screen: "setting",
+          });
+        }, url, retryCount);
+      } else if (normalized.includes("open/topmenu")) {
+        navigateWhenReady(() => {
+          stackAwareNavigate("topMenu", {
+            screen: "menu",
+          });
+        }, url, retryCount);
+      } else if (normalized.includes("positions/apps")) {
+        navigateWhenReady(() => {
+          stackAwareNavigate("positions");
+        }, url, retryCount);
+      }
+    };
+
+    Linking.getInitialURL().then((url) => {
+      if (url) routeFromUrl(url);
+    });
+
+    const sub = Linking.addEventListener("url", ({ url }) => {
+      routeFromUrl(url);
+    });
+
+    return () => {
+      sub.remove();
+    };
+  }, []);
+
   const ProviderTree = buildProvidersTree([
     AllTrainDiagramProvider,
     NotificationProvider,
@@ -44,21 +135,53 @@ export default function App() {
     StationListProvider,
     FavoriteStationProvider,
     TrainDelayDataProvider,
+    TrainMenuProvider,      // CurrentTrainProvider より先に置くことで useTrainMenu が使える
     CurrentTrainProvider,
     AreaInfoProvider,
     BusAndTrainDataProvider,
-    TrainMenuProvider,
     SheetProvider,
   ]);
   return (
-    <DeviceOrientationChangeProvider>
-      <SafeAreaProvider>
-        <GestureHandlerRootView style={{ flex: 1 }}>
-          <ProviderTree>
-            <AppContainer />
-          </ProviderTree>
-        </GestureHandlerRootView>
-      </SafeAreaProvider>
-    </DeviceOrientationChangeProvider>
+    <AppThemeProvider>
+      <DeviceOrientationChangeProvider>
+        <SafeAreaProvider>
+          <StatusbarDetect />
+          <DensityScaleWrapper>
+            <GestureHandlerRootView style={{ flex: 1 }}>
+              <ProviderTree>
+                <AppContainer />
+              </ProviderTree>
+            </GestureHandlerRootView>
+          </DensityScaleWrapper>
+        </SafeAreaProvider>
+      </DeviceOrientationChangeProvider>
+    </AppThemeProvider>
+  );
+}
+
+/**
+ * 低密度ディスプレイ（DeX等）で全体を transform scale で拡大。
+ * Dimensions.get をパッチ済みなので、コンポーネントは内部サイズに合わせてレイアウトする。
+ */
+function DensityScaleWrapper({ children }: { children: React.ReactNode }) {
+  const { width, height } = useRealWindowDimensions();
+
+  if (!IS_LOW_DENSITY) {
+    return <>{children}</>;
+  }
+
+  return (
+    <View style={{ width, height, overflow: "hidden" }}>
+      <View
+        style={{
+          width: width / DEX_SCALE,
+          height: height / DEX_SCALE,
+          transform: [{ scale: DEX_SCALE }],
+          transformOrigin: "top left",
+        }}
+      >
+        {children}
+      </View>
+    </View>
   );
 }

Apps.tsx

@@ -1,14 +1,22 @@
 import React from "react";
-import { NavigationContainer, NavigationContainerRef } from "@react-navigation/native";
+import { NavigationContainer, DarkTheme, DefaultTheme } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { Platform } from "react-native";
+import { Animated, Platform, ActivityIndicator, View, StyleSheet, StatusBar } from "react-native";
+import { useNavigationState } from "@react-navigation/native";
 import { useFonts } from "expo-font";
+import { LinearGradient } from "expo-linear-gradient";
 import TNDView from "./ndView";
 import { initIcon } from "./lib/initIcon";
 import { Top } from "./Top";
 import { MenuPage } from "./MenuPage";
 import { useAreaInfo } from "./stateBox/useAreaInfo";
+import { useTrainMenu } from "./stateBox/useTrainMenu";
+import lineColorList from "./assets/originData/lineColorList";
+import { stationIDPair } from "./lib/getStationList";
 import "./components/ActionSheetComponents/sheets";
+import { rootNavigationRef } from "./lib/rootNavigation";
+import { fixedColors } from "./lib/theme/colors";
+import { useThemeColors } from "./lib/theme";
 
 type RootTabParamList = {
   positions: undefined;
@@ -25,10 +33,58 @@ type TabProps = {
   isInfo?: boolean;
 };
 
+const Tab = createBottomTabNavigator<RootTabParamList>();
+
 export function AppContainer() {
-  const Tab = createBottomTabNavigator<RootTabParamList>();
   const { areaInfo, areaIconBadgeText, isInfo } = useAreaInfo();
-  const navigationRef = React.useRef<NavigationContainerRef<RootTabParamList>>(null);
+  const { selectedLine } = useTrainMenu();
+  const [isExtraWindowOpen, setIsExtraWindowOpen] = React.useState(false);
+
+  // フェードアニメーション用 (0=通常, 1=追加ウィンドウ青)
+  const fadeAnim = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: isExtraWindowOpen ? 1 : 0,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  }, [isExtraWindowOpen]);
+
+  const lineColor = selectedLine && stationIDPair[selectedLine]
+    ? lineColorList[stationIDPair[selectedLine]]
+    : null;
+
+  const darkenHex = (hex: string, factor: number) => {
+    const h = hex.replace("#", "");
+    const r = Math.round(parseInt(h.slice(0, 2), 16) * factor);
+    const g = Math.round(parseInt(h.slice(2, 4), 16) * factor);
+    const b = Math.round(parseInt(h.slice(4, 6), 16) * factor);
+    return `#${[r, g, b].map((v) => Math.min(255, v).toString(16).padStart(2, "0")).join("")}`;
+  };
+  const { isDark } = useThemeColors();
+  const lineColorDark = lineColor ? darkenHex(lineColor, 0.78) : null;
+  const linking = {
+    prefixes: ["jrshikoku://"],
+    config: {
+      screens: {
+        positions: {
+          screens: {},
+        },
+        topMenu: {
+          screens: {
+            menu: "topMenu/menu",
+            setting: {
+              screens: {
+                settingTopPage: "topMenu/setting",
+                FelicaHistoryPage: "topMenu/setting/FelicaHistoryPage",
+              },
+            },
+          },
+        },
+        information: "information",
+      },
+    },
+  };
   
   const getTabProps = (
     name: keyof RootTabParamList,
@@ -53,19 +109,66 @@ export function AppContainer() {
     "JNR-font": require("./assets/fonts/JNRfont_pict.ttf"),
     "DiaPro": require("./assets/fonts/DiaPro-Regular.otf"),
   });
+  if (!fontLoaded) {
+    return (
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
   return (
-    <NavigationContainer ref={navigationRef}>
-      {/* @ts-expect-error - Tab.Navigator type definition issue */}
+    <NavigationContainer
+      ref={rootNavigationRef}
+      linking={linking}
+      theme={isDark ? DarkTheme : DefaultTheme}
+      onStateChange={(state) => {
+        const activeRoute = state?.routes?.[state?.index ?? 0];
+        const hasExtra = (activeRoute?.state?.index ?? 0) > 0;
+        setIsExtraWindowOpen(hasExtra);
+      }}
+    >
       <Tab.Navigator
         initialRouteName="topMenu"
-        screenOptions={{
-          lazy: false,
-          tabBarHideOnKeyboard: Platform.OS === "android",
-          animation: "shift",
+        screenOptions={({ route }) => {
+          const showGradient = route.name === "positions" && !!lineColor && !!lineColorDark;
+          const defaultBg = isDark ? "#1c1c1e" : "white";
+          const defaultActive = isDark ? "#ffffff" : "#007AFF";
+          const defaultInactive = isDark ? "#8e8e93" : "#8e8e93";
+          return {
+            lazy: false,
+            sceneContainerStyle: { backgroundColor: defaultBg },
+            tabBarActiveTintColor: (showGradient || isExtraWindowOpen) ? "white" : defaultActive,
+            tabBarInactiveTintColor: (showGradient || isExtraWindowOpen) ? "rgba(255,255,255,0.75)" : defaultInactive,
+            tabBarStyle: { backgroundColor: "transparent" },
+            tabBarBackground: () => (
+              <View style={{ flex: 1 }}>
+                {/* 路線カラー or デフォルト背景 */}
+                {showGradient ? (
+                  <LinearGradient
+                    colors={[lineColor!, lineColorDark!]}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 0, y: 1 }}
+                    style={{ ...StyleSheet.absoluteFillObject }}
+                  />
+                ) : (
+                  <View style={{ ...StyleSheet.absoluteFillObject, backgroundColor: defaultBg }} />
+                )}
+                {/* 追加ウィンドウ時の青グラデーション（フェードイン/アウト） */}
+                <Animated.View style={{ ...StyleSheet.absoluteFillObject, opacity: fadeAnim }}>
+                  <LinearGradient
+                    colors={[fixedColors.primary, fixedColors.primaryDark]}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 0, y: 1 }}
+                    style={{ flex: 1 }}
+                  />
+                </Animated.View>
+              </View>
+            ),
+          };
         }}
       >
         <Tab.Screen
-          {...getTabProps("positions", "走行位置", "barchart", "AntDesign")}
+          {...getTabProps("positions", "走行位置", "bar-chart", "AntDesign")}
           component={Top}
         />
         <Tab.Screen

GeneralWebView.tsx

@@ -1,16 +1,109 @@
-import React, { CSSProperties } from "react";
-import { Alert, BackHandler, View, ViewProps } from "react-native";
+import React from "react";
+import { Alert, ActivityIndicator, AppState, AppStateStatus, BackHandler, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { WebView } from "react-native-webview";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { BigButton } from "./components/atom/BigButton";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import { useThemeColors } from "@/lib/theme";
+import { AS } from "./storageControl";
+import { STORAGE_KEYS } from "@/constants";
+import {
+  DEFAULT_JR_DATA_SYSTEM_ENV,
+  normalizeJrDataSystemEnvironment,
+  rewriteJrDataSystemUrl,
+} from "@/lib/jrDataSystemEnvironment";
+
 export default ({ route }) => {
   if (!route.params) {
     return null;
   }
   const { uri, useExitButton = true } = route.params;
   const { goBack } = useNavigation();
+  const { fixed } = useThemeColors();
   const webViewRef = React.useRef<WebView>(null);
   const [canGoBack, setCanGoBack] = React.useState(false);
+  const [selectedEnvironment, setSelectedEnvironment] = React.useState(
+    DEFAULT_JR_DATA_SYSTEM_ENV,
+  );
+  const [resolvedUri, setResolvedUri] = React.useState("");
+  const [isEnvironmentReady, setIsEnvironmentReady] = React.useState(false);
+  const hasAlerted = React.useRef(false);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [hasError, setHasError] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState("");
+  // WebViewをforce remountするためのkey
+  const [webViewKey, setWebViewKey] = React.useState(0);
+  // バックグラウンド移行時刻の記録
+  const backgroundedAt = React.useRef<number | null>(null);
+  // RN-side watchdog: WebViewプロセスの死活確認用
+  const lastPongAt = React.useRef<number>(Date.now());
+  const isLoadingRef = React.useRef(true);
+  const hasErrorRef = React.useRef(false);
+  // コンテンツ消失検知用: bodyLen の最大値と連続白画面カウント
+  const maxBodyLenRef = React.useRef(0);
+  const blankCountRef = React.useRef(0);
+
+  const remount = React.useCallback(() => {
+    lastPongAt.current = Date.now(); // remount直後に誤検知しないようリセット
+    maxBodyLenRef.current = 0;
+    blankCountRef.current = 0;
+    setHasError(false);
+    hasErrorRef.current = false;
+    setIsLoading(true);
+    isLoadingRef.current = true;
+    setWebViewKey((k) => k + 1);
+  }, []);
+
+  React.useEffect(() => {
+    let isMounted = true;
+
+    const applyEnvironment = (value: unknown) => {
+      if (!isMounted) return;
+      const nextEnvironment = normalizeJrDataSystemEnvironment(value);
+      setSelectedEnvironment(nextEnvironment);
+      setResolvedUri(
+        rewriteJrDataSystemUrl(
+          typeof uri === "string" ? uri : "",
+          nextEnvironment,
+        ),
+      );
+      setIsEnvironmentReady(true);
+    };
+
+    AS.getItem(STORAGE_KEYS.JR_DATA_SYSTEM_ENV)
+      .then(applyEnvironment)
+      .catch(() => applyEnvironment(DEFAULT_JR_DATA_SYSTEM_ENV));
+
+    return () => {
+      isMounted = false;
+    };
+  }, [uri]);
+
+  const handleReload = () => {
+    lastPongAt.current = Date.now();
+    setHasError(false);
+    hasErrorRef.current = false;
+    setIsLoading(true);
+    isLoadingRef.current = true;
+    setWebViewKey((k) => k + 1);
+  };
+
+  // AppState監視: バックグラウンド10秒超で復帰したらWebViewを再マウント
+  React.useEffect(() => {
+    const onAppStateChange = (nextState: AppStateStatus) => {
+      if (nextState.match(/inactive|background/)) {
+        backgroundedAt.current = Date.now();
+      } else if (nextState === "active" && backgroundedAt.current !== null) {
+        const elapsed = Date.now() - backgroundedAt.current;
+        backgroundedAt.current = null;
+        if (elapsed > 10_000) {
+          remount();
+        }
+      }
+    };
+    const subscription = AppState.addEventListener("change", onAppStateChange);
+    return () => subscription.remove();
+  }, [remount]);
 
   useFocusEffect(
     React.useCallback(() => {
@@ -23,37 +116,177 @@ export default ({ route }) => {
         return true;
       };
 
-      BackHandler.addEventListener("hardwareBackPress", onHardwareBack);
-      return () => BackHandler.removeEventListener("hardwareBackPress", onHardwareBack);
+      const subscription = BackHandler.addEventListener("hardwareBackPress", onHardwareBack);
+      return () => subscription.remove();
     }, [canGoBack, goBack])
   );
   return (
-    <View style={styles}>
-      <WebView
-        source={{ uri }}
-        allowsBackForwardNavigationGestures
-        ref={webViewRef}
-        onNavigationStateChange={(navState) => {
+    <View style={{ height: "100%", backgroundColor: fixed.primary }}>
+      {isEnvironmentReady && (
+        <WebView
+          key={webViewKey}
+          source={{ uri: resolvedUri }}
+          contentMode="mobile"
+          allowsBackForwardNavigationGestures
+          ref={webViewRef}
+          onLoadStart={() => {
+            isLoadingRef.current = true;
+            setHasError(false);
+            hasErrorRef.current = false;
+            maxBodyLenRef.current = 0;
+            blankCountRef.current = 0;
+          }}
+          onLoadEnd={() => {
+            setIsLoading(false);
+            isLoadingRef.current = false;
+            lastPongAt.current = Date.now();
+          }}
+          onError={(syntheticEvent) => {
+            const { nativeEvent } = syntheticEvent;
+            setIsLoading(false);
+            isLoadingRef.current = false;
+            setHasError(true);
+            hasErrorRef.current = true;
+            setErrorMessage(nativeEvent.description || "ページを読み込めませんでした");
+          }}
+          onHttpError={(syntheticEvent) => {
+            const { nativeEvent } = syntheticEvent;
+            if (nativeEvent.statusCode >= 500) {
+              setIsLoading(false);
+              isLoadingRef.current = false;
+              setHasError(true);
+              hasErrorRef.current = true;
+              setErrorMessage(`サーバーエラー (${nativeEvent.statusCode})`);
+            }
+          }}
+          onRenderProcessGone={() => {
+            // クラッシュ・メモリ回収どちらも自動remount
+            remount();
+          }}
+          // iOS: コンテンツプロセスがメモリ圧迫で終了した場合
+          onContentProcessDidTerminate={() => remount()}
+          onShouldStartLoadWithRequest={(request) => {
+            if (request.isTopFrame === false) {
+              return true;
+            }
+
+            const rewrittenUrl = rewriteJrDataSystemUrl(
+              request.url,
+              selectedEnvironment,
+            );
+            if (rewrittenUrl !== request.url) {
+              setResolvedUri(rewrittenUrl);
+              return false;
+            }
+            return true;
+          }}
+          onNavigationStateChange={(navState) => {
           setCanGoBack(navState.canGoBack);
+          // SPA内遷移中は白画面誤検知を防ぐためblankCountをリセット
+          if (navState.loading) blankCountRef.current = 0;
           if (navState.url === "https://unyohub.2pd.jp/integration/succeeded.php") {
-            goBack();
-            Alert.alert("鉄道運用HUBへの投稿完了", "運用HUBからのこのアプリへのデータ反映には暫く時間がかかりますので、しばらくお待ちください。", [
-              { text: "完了" },
-            ]);
+            webViewRef.current?.goBack();
+            if (!hasAlerted.current) {
+              hasAlerted.current = true;
+              Alert.alert("鉄道運用HUBへの投稿完了", "運用HUBからのこのアプリへのデータ反映には暫く時間がかかりますので、しばらくお待ちください。", [
+                { text: "完了" },
+              ]);
+            }
           }
         }}
-        onMessage={(event) => {
-          const { data } = event.nativeEvent;
-          const { type } = JSON.parse(data);
-          if (type === "back") return webViewRef.current?.goBack();
-          if (type === "windowClose") return goBack();
-        }}
-      />
-      {useExitButton && <BigButton onPress={goBack} string="閉じる" />}
+          onMessage={(event) => {
+            const { data } = event.nativeEvent;
+            const parsed = JSON.parse(data);
+            const { type } = parsed;
+            if (type === "pong") {
+              lastPongAt.current = Date.now();
+              const bodyLen: number = parsed.bodyLen ?? 0;
+              // innerTextベース: 最大値を更新
+              if (bodyLen > maxBodyLenRef.current) maxBodyLenRef.current = bodyLen;
+              // 一度200文字超の表示テキストがあった後に20文字未満になったら白画面と判定
+              // SPA遷移中の一時的な空白を避けるため3回連続(15秒)で発火
+              if (maxBodyLenRef.current > 200 && bodyLen < 20) {
+                blankCountRef.current += 1;
+                if (blankCountRef.current >= 3) {
+                  blankCountRef.current = 0;
+                  maxBodyLenRef.current = 0;
+                  remount();
+                }
+              } else {
+                blankCountRef.current = 0;
+              }
+              return;
+            }
+            if (type === "back") return webViewRef.current?.goBack();
+            if (type === "windowClose") return goBack();
+          }}
+        />
+      )}
+      {isLoading && !hasError && (
+        <View style={wvStyles.loadingOverlay} pointerEvents="none">
+          <ActivityIndicator size="large" color="#fff" />
+        </View>
+      )}
+      {hasError && (
+        <View style={wvStyles.errorOverlay}>
+          <MaterialCommunityIcons name="wifi-off" size={48} color="#ccc" />
+          <Text style={wvStyles.errorText}>{errorMessage}</Text>
+          <TouchableOpacity style={wvStyles.reloadButton} onPress={handleReload}>
+            <MaterialCommunityIcons name="reload" size={18} color="#fff" />
+            <Text style={wvStyles.reloadButtonText}>再読み込み</Text>
+          </TouchableOpacity>
+          {useExitButton && (
+            <TouchableOpacity style={wvStyles.backButton} onPress={goBack}>
+              <Text style={wvStyles.backButtonText}>閉じる</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+      {useExitButton && !hasError && <BigButton onPress={goBack} string="閉じる" />}
     </View>
   );
 };
-const styles: ViewProps["style"] = {
-  height: "100%",
-  backgroundColor: "#0099CC",
-};
+
+const wvStyles = StyleSheet.create({
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0,0,0,0.25)",
+  },
+  errorOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#1a1a2e",
+    gap: 16,
+    paddingHorizontal: 32,
+  },
+  errorText: {
+    color: "#aaa",
+    fontSize: 14,
+    textAlign: "center",
+  },
+  reloadButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: "#0099CC",
+    borderRadius: 10,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+  },
+  reloadButtonText: {
+    color: "#fff",
+    fontSize: 15,
+    fontWeight: "bold",
+  },
+  backButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+  },
+  backButtonText: {
+    color: "#888",
+    fontSize: 14,
+  },
+});

MenuPage.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { useWindowDimensions, Platform } from "react-native";
+import { useWindowDimensions, Platform, useColorScheme } from "react-native";
 import Constants from "expo-constants";
+import { useResponsive } from "@/lib/responsive";
 
 import { Dimensions, StatusBar } from "react-native";
 
@@ -27,9 +28,12 @@ const Stack = createStackNavigator();
 export function MenuPage() {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   const { height, width } = useWindowDimensions();
+  const { verticalScale } = useResponsive();
   const tabBarHeight = useBottomTabBarHeight();
   const navigation = useNavigation<any>();
   const { addListener } = navigation;
+  const isDark = useColorScheme() === "dark";
+  const bgColor = isDark ? "#1c1c1e" : "#ffffff";
   useEffect(() => {
     AS.getItem(STORAGE_KEYS.START_PAGE)
       .then((res) => {
@@ -56,15 +60,21 @@ export function MenuPage() {
   const scrollRef = useRef(null);
   const [mapMode, setMapMode] = useState(false);
   const [mapHeight, setMapHeight] = useState(0);
+  const mapHeightRef = useRef(0);
+  const favoriteStationRef = useRef(favoriteStation);
   useEffect(() => {
     const MapHeight =
       height -
       tabBarHeight +
       (Platform.OS == "android" ? Constants.statusBarHeight : 0) -
-      100 -
-      ((((width / 100) * 80) / 20) * 9 + 10 + 30);
+      verticalScale(100) -
+      ((((width / 100) * 80) / 20) * 9 + verticalScale(10) + verticalScale(30));
     setMapHeight(MapHeight);
+    mapHeightRef.current = MapHeight;
   }, [height, tabBarHeight, width]);
+  useEffect(() => {
+    favoriteStationRef.current = favoriteStation;
+  }, [favoriteStation]);
   const [MapFullHeight, setMapFullHeight] = useState(0);
   useEffect(() => {
     const MapFullHeight =
@@ -74,16 +84,23 @@ export function MenuPage() {
     setMapFullHeight(MapFullHeight);
   }, [height, tabBarHeight, width]);
   useEffect(() => {
-    const unsubscribe = addListener("tabPress", (e) => {
-      scrollRef.current.scrollTo({
-        y: mapHeight - 80,
+    const unsubscribe = addListener("tabPress", (e: any) => {
+      if (navigation.isFocused() && stackNavRef.current) {
+        if (stackNavRef.current.getState()?.index > 0) {
+          e.preventDefault();
+          stackNavRef.current.goBack();
+          return;
+        }
+      }
+      scrollRef.current?.scrollTo({
+        y: mapHeightRef.current - verticalScale(80),
         animated: true,
       });
       setMapMode(false);
       AS.getItem(STORAGE_KEYS.FAVORITE_STATION)
         .then((d) => {
           const returnData = JSON.parse(d);
-          if (favoriteStation.toString() != d) {
+          if (favoriteStationRef.current.toString() != d) {
             setFavoriteStation(returnData);
           }
         })
@@ -95,9 +112,18 @@ export function MenuPage() {
     });
 
     return unsubscribe;
-  }, [navigation, mapHeight, favoriteStation, setFavoriteStation]);
+  }, [navigation]);
+  const stackNavRef = useRef<any>(null);
+
   return (
-    <Stack.Navigator id={null}>
+    <Stack.Navigator
+      id={null}
+      screenOptions={{ cardStyle: { backgroundColor: bgColor } }}
+      screenListeners={({ navigation: stackNav }) => {
+        stackNavRef.current = stackNav;
+        return {};
+      }}
+    >
       <Stack.Screen
         name="menu"
         options={{

README.md

@@ -175,7 +175,63 @@ export const API_ENDPOINTS = {
 };
 ```
 
-## 📱 ビルド
+## <EFBFBD> 外部からのアプリ起動（ディープリンク）
+
+本アプリは複数の方法で外部から起動・画面遷移できます。
+
+### カスタムURLスキーム
+
+スキーム `jrshikoku://` を使って特定の画面を直接開くことができます。
+
+| URL | 遷移先 |
+|---|---|
+| `jrshikoku://open/felica` | FeliCa履歴ページ |
+| `jrshikoku://open/traininfo` | 遅延速報EX |
+| `jrshikoku://open/operation` | 運行情報 |
+| `jrshikoku://open/settings` | 設定 |
+| `jrshikoku://open/topmenu` | トップメニュー |
+| `jrshikoku://positions/apps` | 走行位置 |
+
+URLの処理は `App.tsx` の `routeFromUrl` で実装されています。
+
+### Androidウィジェット
+
+ホーム画面に配置可能なウィジェットからアプリを起動できます。
+
+| ウィジェット名 | 説明 |
+|---|---|
+| `JR_shikoku_train_info` | 遅延速報EX |
+| `JR_shikoku_apps_shortcut` | クイックアクセス（各機能へのショートカットタイル） |
+| `JR_shikoku_felica_balance` | ICカード残高表示 |
+| `JR_shikoku_info` | 運行情報 |
+| `JR_shikoku_train_strange` | 怪レい列車 |
+
+ウィジェットのタップ時は `jrshikoku://` スキームでアプリ内画面へ遷移します。
+実装: `components/AndroidWidget/widget-task-handler.tsx`
+
+### iOSウィジェット（WidgetKit）
+
+WidgetKit拡張としてホーム画面ウィジェットを提供しています。Live Activities にも対応しています。
+設定: `targets/widget/Info.plist`
+
+### プッシュ通知
+
+通知タップ時に対応する画面へ遷移します。
+
+| アクション | 遷移先 |
+|---|---|
+| `delay-ex` | 遅延速報EX |
+| `strange-train` | 走行位置（怪レい列車） |
+| `information` | 運行情報 |
+
+実装: `stateBox/useNotifications.tsx`
+
+### NFC（FeliCa）
+
+NFC-Fを利用した交通系ICカードの読み取りに対応しています（Android）。アプリ内からスキャンを開始する形式です。
+実装: `modules/expo-felica-reader/`
+
+## <20>📱 ビルド
 
 ```bash
 # APKビルド（Android）

StatusbarDetect.tsx

@@ -1,12 +1,8 @@
 import React, { FC } from "react";
-import { Platform, StatusBar, View } from "react-native";
+import { Platform, StatusBar } from "react-native";
 
 const StatusbarDetect: FC = () => {
-  if (Platform.OS == "ios") {
-    return <StatusBar barStyle="dark-content" />;
-  } else if (Platform.OS == "android") {
-    return <View />;
-  }
+  return <StatusBar barStyle="light-content" translucent backgroundColor="transparent" />;
 };
 
 export default StatusbarDetect;

Top.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useNavigation } from "@react-navigation/native";
+import { useColorScheme } from "react-native";
 import Apps from "./components/Apps";
 import TrainBase from "./components/trainbaseview";
 import HowTo from "./howto";
@@ -15,13 +16,20 @@ import { news } from "./config/newsUpdate";
 import { Linking, Platform } from "react-native";
 import GeneralWebView from "./GeneralWebView";
 import { StationDiagramView } from "@/components/StationDiagram/StationDiagramView";
+import { positionsStackNavRef } from "./lib/rootNavigation";
 const Stack = createStackNavigator();
 export const Top = () => {
   const { webview } = useCurrentTrain();
-  const { navigate, addListener, isFocused } = useNavigation();
+  const { navigate, addListener, isFocused } = useNavigation<any>();
+  const isDark = useColorScheme() === "dark";
+  const bgColor = isDark ? "#1c1c1e" : "#ffffff";
 
   //地図用
   const { mapSwitch } = useTrainMenu();
+  const mapSwitchRef = useRef(mapSwitch);
+  useEffect(() => {
+    mapSwitchRef.current = mapSwitch;
+  }, [mapSwitch]);
 
   const goToFavoriteList = () =>
     navigate("positions", { screen: "favoriteList" });
@@ -31,26 +39,41 @@ export const Top = () => {
     return unsubscribe;
   }, []);
 
-  const goToTrainMenu = () => {
+  const stackNavRef = positionsStackNavRef;
+
+  const goToTrainMenu = useCallback((e: any) => {
     if (Platform.OS === "web") {
       Linking.openURL("https://train.jr-shikoku.co.jp/");
       setTimeout(() => navigate("topMenu", { screen: "menu" }), 100);
       return;
     }
-    if (!isFocused()) navigate("positions", { screen: "Apps" });
-    else if (mapSwitch == "true")
+    if (!isFocused()) return;
+    const stackNav = stackNavRef.current;
+    if (stackNav && stackNav.getState()?.index > 0) {
+      e.preventDefault();
+      stackNav.goBack();
+      return;
+    }
+    if (mapSwitchRef.current == "true")
       navigate("positions", { screen: "trainMenu" });
     else webview.current?.injectJavaScript(`AccordionClassEvent()`);
     return;
-  };
+  }, [isFocused, navigate, webview]);
 
   useEffect(() => {
     const unsubscribe = addListener("tabPress", goToTrainMenu);
     return unsubscribe;
-  }, [addListener, mapSwitch]);
+  }, [addListener, goToTrainMenu]);
 
   return (
-    <Stack.Navigator id={null} detachInactiveScreens={false}>
+    <Stack.Navigator
+      id={null}
+      screenOptions={{ cardStyle: { backgroundColor: bgColor } }}
+      screenListeners={({ navigation: stackNav }) => {
+        stackNavRef.current = stackNav;
+        return {};
+      }}
+    >
       <Stack.Screen
         name="Apps"
         options={{

UpdateAsync.ts

@@ -2,6 +2,7 @@ import { Platform, ToastAndroid } from "react-native";
 import * as Updates from "expo-updates";
 
 export const UpdateAsync = () => {
+  if (__DEV__) return; // dev client では expo-updates は無効
   Updates.checkForUpdateAsync()
     .then((update) => {
       if (!update.isAvailable) return;
@@ -16,7 +17,7 @@ export const UpdateAsync = () => {
           50
         );
       }
-      Updates.fetchUpdateAsync().then(Updates.reloadAsync);
+      Updates.fetchUpdateAsync().then(() => Updates.reloadAsync());
       return;
     })
     .catch((e) => {

app.json

@@ -2,12 +2,14 @@
   "expo": {
     "name": "JR四国非公式",
     "slug": "jrshikoku",
+    "scheme": "jrshikoku",
     "platforms": [
       "ios",
       "android",
       "web"
     ],
-    "version": "6.0.4",
+    "version": "7.0.0",
+    "userInterfaceStyle": "automatic",
     "orientation": "default",
     "icon": "./assets/icons/s8600.png",
     "splash": {
@@ -22,9 +24,10 @@
       "**/*"
     ],
     "ios": {
-      "buildNumber": "50",
-      "supportsTablet": false,
+      "buildNumber": "63",
+      "supportsTablet": true,
       "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn",
+      "appleTeamId": "54CRDT797G",
       "config": {
         "googleMapsApiKey": "AIzaSyAVGDTjBkR_0wkQiNkoo5WDLhqXCjrjk8Y"
       },
@@ -34,20 +37,57 @@
           "0003",
           "FE00"
         ],
-        "ITSAppUsesNonExemptEncryption": false
+        "ITSAppUsesNonExemptEncryption": false,
+        "NSSupportsLiveActivities": true,
+        "NSSupportsLiveActivitiesFrequentUpdates": true,
+        "UIBackgroundModes": [
+          "audio"
+        ]
       },
       "entitlements": {
         "com.apple.developer.nfc.readersession.formats": [
           "TAG"
+        ],
+        "com.apple.security.application-groups": [
+          "group.jrshikokuinfo.xprocess.hrkn"
         ]
       }
     },
     "android": {
       "package": "jrshikokuinfo.xprocess.hrkn",
-      "versionCode": 28,
+      "versionCode": 30,
+      "intentFilters": [
+        {
+          "action": "VIEW",
+          "data": [
+            {
+              "scheme": "jrshikoku"
+            }
+          ],
+          "category": [
+            "BROWSABLE",
+            "DEFAULT"
+          ]
+        },
+        {
+          "action": "VIEW",
+          "data": [
+            {
+              "scheme": "jrshikoku",
+              "host": "open",
+              "pathPrefix": "/felica"
+            }
+          ],
+          "category": [
+            "BROWSABLE",
+            "DEFAULT"
+          ]
+        }
+      ],
       "permissions": [
         "ACCESS_FINE_LOCATION",
         "NFC",
+        "POST_NOTIFICATIONS",
         "android.permission.ACCESS_COARSE_LOCATION",
         "android.permission.ACCESS_FINE_LOCATION"
       ],
@@ -67,7 +107,20 @@
       "policy": "sdkVersion"
     },
     "plugins": [
-      "expo-font",
+      "./plugins/with-android-local-properties",
+      "./plugins/with-nfc-widget-guard",
+      "@bacons/apple-targets",
+      [
+        "expo-font",
+        {
+          "fonts": [
+            "./assets/fonts/jr-nishi.otf",
+            "./assets/fonts/DelaGothicOne-Regular.ttf",
+            "./assets/fonts/JNRfont_pict.ttf",
+            "./assets/fonts/DiaPro-Regular.otf"
+          ]
+        }
+      ],
       "expo-localization",
       [
         "expo-screen-orientation",
@@ -91,17 +144,7 @@
               "minWidth": "70dp",
               "minHeight": "50dp",
               "description": "JR四国列車遅延速報EXのウィジェットです。30分ごとに自動更新します。タッチすると強制更新します。",
-              "previewImage": "./assets/icon.png",
-              "updatePeriodMillis": 1800000,
-              "resizeMode": "horizontal|vertical"
-            },
-            {
-              "name": "JR_shikoku_train_strange",
-              "label": "怪レい列車",
-              "minWidth": "70dp",
-              "minHeight": "50dp",
-              "description": "JR四国怪レい列車BOTのウィジェットです。30分ごとに自動更新します。タッチすると強制更新します。",
-              "previewImage": "./assets/icon.png",
+              "previewImage": "./assets/widgetResource/JR_shikoku_train_info.jpg",
               "updatePeriodMillis": 1800000,
               "resizeMode": "horizontal|vertical"
             },
@@ -111,7 +154,7 @@
               "minWidth": "70dp",
               "minHeight": "50dp",
               "description": "JR四国運行情報のウィジェットです。30分ごとに自動更新します。タッチすると強制更新します。",
-              "previewImage": "./assets/icon.png",
+              "previewImage": "./assets/widgetResource/JR_shikoku_info.jpg",
               "updatePeriodMillis": 1800000,
               "resizeMode": "horizontal|vertical"
             },
@@ -121,7 +164,17 @@
               "minWidth": "70dp",
               "minHeight": "50dp",
               "description": "JR四国非公式アプリの各種リンクを表示するウィジェットです。",
-              "previewImage": "./assets/icon.png",
+              "previewImage": "./assets/widgetResource/JR_shikoku_apps_shortcut.jpg",
+              "updatePeriodMillis": 1800000,
+              "resizeMode": "horizontal|vertical"
+            },
+            {
+              "name": "JR_shikoku_felica_balance",
+              "label": "ICカード残高",
+              "minWidth": "70dp",
+              "minHeight": "50dp",
+              "description": "Felica対応ICカードの残高をホーム画面に表示するウィジェットです。タップでスキャン画面を開きます。",
+              "previewImage": "./assets/widgetResource/JR_shikoku_felica_balance.jpg",
               "updatePeriodMillis": 1800000,
               "resizeMode": "horizontal|vertical"
             }
@@ -450,6 +503,454 @@
               "foregroundImage": "./assets/icons/ef210.png",
               "backgroundColor": "#001413"
             }
+          },
+          {
+            "name": "32ns",
+            "ios": "./assets/icons/s32ns.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32ns.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32s",
+            "ios": "./assets/icons/s32s.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32s.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32kpuy1",
+            "ios": "./assets/icons/s32kpuy1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32kpuy1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32kpuy2",
+            "ios": "./assets/icons/s32kpuy2.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32kpuy2.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32thtk",
+            "ios": "./assets/icons/s32thtk.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32thtk.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32oni1",
+            "ios": "./assets/icons/s32oni1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32oni1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32oni1k",
+            "ios": "./assets/icons/s32oni1k.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32oni1k.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32to4",
+            "ios": "./assets/icons/s32to4.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32to4.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "32toai",
+            "ios": "./assets/icons/s32to_ai.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32to_ai.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "54s",
+            "ios": "./assets/icons/s54s.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s54s.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "54to0ys",
+            "ios": "./assets/icons/s54to0ys.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s54to0ys.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "54nany1",
+            "ios": "./assets/icons/s54nany1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s54nany1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "54nany2",
+            "ios": "./assets/icons/s54nany2.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s54nany2.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "54smek1",
+            "ios": "./assets/icons/s32smek1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s32smek1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "40s",
+            "ios": "./assets/icons/s40.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s40.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "40w",
+            "ios": "./assets/icons/w40.png",
+            "android": {
+              "foregroundImage": "./assets/icons/w40.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185cm",
+            "ios": "./assets/icons/s185cm.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185cm.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185g",
+            "ios": "./assets/icons/s185g.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185g.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185tu_uzu",
+            "ios": "./assets/icons/s185tu_uzu.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185tu_uzu.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185ap1",
+            "ios": "./assets/icons/s185ap1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185ap1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185mm2",
+            "ios": "./assets/icons/s185mm2.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185mm2.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "185ym2",
+            "ios": "./assets/icons/s185ym2.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s185ym2.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "1200",
+            "ios": "./assets/icons/s1200.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s1200.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "1201",
+            "ios": "./assets/icons/s1201.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s1201.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "1501",
+            "ios": "./assets/icons/s1501.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s1501.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "1550",
+            "ios": "./assets/icons/s1550.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s1550.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "1551",
+            "ios": "./assets/icons/s1551.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s1551.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2000uwa",
+            "ios": "./assets/icons/s2000_uwa.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2000_uwa.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2000nl",
+            "ios": "./assets/icons/s2000nl.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2000nl.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2000-3",
+            "ios": "./assets/icons/s2000-3.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2000-3.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2000ganp1",
+            "ios": "./assets/icons/s2000ganp1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2000ganp1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2600apr",
+            "ios": "./assets/icons/s2600apr.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2600apr.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2600apb",
+            "ios": "./assets/icons/s2600apb.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2600apb.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2700asi",
+            "ios": "./assets/icons/s2700_asi.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2700_asi.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2700smn",
+            "ios": "./assets/icons/s2700_smn.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2700_smn.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2700uzu",
+            "ios": "./assets/icons/s2700_uzu.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2700_uzu.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2700apy1",
+            "ios": "./assets/icons/s2700apy1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2700apy1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "2700apr1",
+            "ios": "./assets/icons/s2700apr1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s2700apr1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "3600",
+            "ios": "./assets/icons/s3600.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s3600.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "6000f",
+            "ios": "./assets/icons/s6000f.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s6000f.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "7001",
+            "ios": "./assets/icons/s7001.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s7001.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "8001nr",
+            "ios": "./assets/icons/s8001nr.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s8001nr.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9000",
+            "ios": "./assets/icons/s9000.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s9000.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640ht",
+            "ios": "./assets/icons/tosa9640ht.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640ht.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640mo1",
+            "ios": "./assets/icons/tosa9640mo1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640mo1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640mo2",
+            "ios": "./assets/icons/tosa9640mo2.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640mo2.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640tyg",
+            "ios": "./assets/icons/tosa9640tyg.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640tyg.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640tyb",
+            "ios": "./assets/icons/tosa9640tyb.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640tyb.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "9640jbl",
+            "ios": "./assets/icons/tosa9640jbl.png",
+            "android": {
+              "foregroundImage": "./assets/icons/tosa9640jbl.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "W741",
+            "ios": "./assets/icons/w741.png",
+            "android": {
+              "foregroundImage": "./assets/icons/w741.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "EF210a",
+            "ios": "./assets/icons/ef210a.png",
+            "android": {
+              "foregroundImage": "./assets/icons/ef210a.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "EF210n",
+            "ios": "./assets/icons/ef210n.png",
+            "android": {
+              "foregroundImage": "./assets/icons/ef210n.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "EF210n1",
+            "ios": "./assets/icons/ef210n1.png",
+            "android": {
+              "foregroundImage": "./assets/icons/ef210n1.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "EF210l3",
+            "ios": "./assets/icons/ef210l3.png",
+            "android": {
+              "foregroundImage": "./assets/icons/ef210l3.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "T45000",
+            "ios": "./assets/icons/s150001to.png",
+            "android": {
+              "foregroundImage": "./assets/icons/s150001to.png",
+              "backgroundColor": "#001413"
+            }
+          },
+          {
+            "name": "Wk141",
+            "ios": "./assets/icons/w141jg.png",
+            "android": {
+              "foregroundImage": "./assets/icons/w141jg.png",
+              "backgroundColor": "#001413"
+            }
           }
         ]
       ],
@@ -457,10 +958,25 @@
         "expo-build-properties",
         {
           "android": {
-            "kotlinVersion": "1.9.25"
+            "kotlinVersion": "2.1.20"
+          },
+          "ios": {
+            "deploymentTarget": "16.2"
           }
         }
+      ],
+      "expo-audio",
+      "expo-video",
+      "expo-web-browser",
+      "expo-asset",
+      "expo-sharing",
+      [
+        "react-native-maps",
+        {
+          "iosGoogleMapsApiKey": "AIzaSyAVGDTjBkR_0wkQiNkoo5WDLhqXCjrjk8Y",
+          "androidGoogleMapsApiKey": "AIzaSyAmFb-Yj033bXZWlSzNrfq_0jc1PgRrWcE"
+        }
       ]
     ]
   }
-}
+}

assets/icons/icons.ts

@@ -1,45 +1,124 @@
+export const series: { key: string; title: string; ids: string[] }[] = [
+  { key: "32",     title: "キハ32形",          ids: ["32ns", "32s", "32kpuy1", "32kpuy2", "32tht", "32thtk", "32oni1", "32oni1k", "32toai", "32at"] },
+  { key: "54",     title: "キハ54形",          ids: ["54s", "54st", "54nany1", "54nany2", "54smek1"] },
+  { key: "40",     title: "キハ40",            ids: ["40s", "40w"] },
+  { key: "185",    title: "キハ185系",         ids: ["185mrt", "185cm", "185g", "185tu", "185tu_uzu", "185iyor", "185iyoy", "185toai", "185mm1", "185mm2", "185ym1", "185ym2", "185ap1"] },
+  { key: "1000",   title: "1000形",            ids: ["1000"] },
+  { key: "1200",   title: "1200形・1201形",    ids: ["1200", "1201"] },
+  { key: "1500",   title: "1500形",            ids: ["1501", "1550", "1551"] },
+  { key: "2000",   title: "2000系・N2000系",   ids: ["2000asi", "2000uwa", "N2000", "2000nl", "2000-3", "2000ganp1", "2002a"] },
+  { key: "2600",   title: "2600系",            ids: ["2600", "2600apr", "2600apb"] },
+  { key: "2700",   title: "2700系",            ids: ["2700", "2700asi", "2700smn", "2700uzu", "2700apy", "2700apr", "2700apy1", "2700apr1"] },
+  { key: "3600",   title: "3600系",            ids: ["3600"] },
+  { key: "5000",   title: "5000系",            ids: ["5001", "5001k"] },
+  { key: "6000",   title: "6000系",            ids: ["6000f"] },
+  { key: "7000",   title: "7000系",            ids: ["7000"] },
+  { key: "7200",   title: "7200系",            ids: ["7200"] },
+  { key: "8000",   title: "8000系",            ids: ["8000no", "8000nr", "8001nr", "8000ap", "8000nn"] },
+  { key: "8600",   title: "8600系",            ids: ["8600"] },
+  { key: "9000",   title: "9000系",            ids: ["9000"] },
+  { key: "9640",   title: "9640形",            ids: ["9640", "9640ht", "9640mo1", "9640mo2", "9640tyg", "9640tyb", "9640jgr", "9640jbl"] },
+  { key: "other",  title: "JR西日本・他",      ids: ["285", "213w", "W741", "Wk141", "EF65", "EF210a", "EF210n", "EF210n1", "EF210l3", "T45000"] },
+];
+
 export default () =>{
   return [
-    { "id": "32", "name": "キハ32形", "icon": require("./32.png") },
-    { "id": "32kpuuy", "name": "キハ32形かっぱうようよ号", "icon": require("./32kpuuy.png") },
+    //{ "id": "32", "name": "キハ32形", "icon": require("./32.png") },
+    { "id": "32ns", "name": "キハ32形(標準色)", "icon": require("./s32ns.png") },
+    { "id": "32s", "name": "キハ32形(新塗装)", "icon": require("./s32s.png") },
+    //{ "id": "32kpuuy", "name": "キハ32形かっぱうようよ号", "icon": require("./32kpuuy.png") },
+    { "id": "32kpuy1", "name": "キハ32形かっぱうようよ号①", "icon": require("./s32kpuy1.png") },
+    { "id": "32kpuy2", "name": "キハ32形かっぱうようよ号②", "icon": require("./s32kpuy2.png") },
     { "id": "32tht", "name": "キハ32形新幹線ホビートレイン", "icon": require("./32tht.png") },
+    { "id": "32thtk", "name": "キクハ32形新幹線ホビートレイン", "icon": require("./s32thtk.png") },
+    { "id": "32oni1", "name": "キハ32形特別塗装①", "icon": require("./s32oni1.png") },
+    { "id": "32oni1k", "name": "キハ32形特別塗装①(連結)", "icon": require("./s32oni1k.png") },
+    //{ "id": "32to4", "name": "キハ32形(土讃色)", "icon": require("./s32to4.png") },
+    { "id": "32toai", "name": "キクハ32形藍よしのがわトロッコ", "icon": require("./s32to_ai.png") },
     { "id": "32at", "name": "キクハ32形アンパンマントロッコ", "icon": require("./32at.png") },
-    { "id": "54", "name": "キハ54形", "icon": require("./54.png") },
+    //{ "id": "54", "name": "キハ54形", "icon": require("./54.png") },
+    { "id": "54s", "name": "キハ54形(四国色)", "icon": require("./s54s.png") },
     { "id": "54st", "name": "キハ54形しまんトロッコ", "icon": require("./54st.png") },
-    { "id": "40", "name": "キハ40", "icon": require("./40.png") },
+    //{ "id": "54to0ys", "name": "キハ54形(ゆとりすと)", "icon": require("./s54to0ys.png") },
+    { "id": "54nany1", "name": "キハ54形なんよ号①", "icon": require("./s54nany1.png") },
+    { "id": "54nany2", "name": "キハ54形なんよ号②", "icon": require("./s54nany2.png") },
+    { "id": "54smek1", "name": "キハ54形しまんトロッコ(連結)", "icon": require("./s32smek1.png") },
+    //{ "id": "40", "name": "キハ40", "icon": require("./40.png") },
+    { "id": "40s", "name": "キハ40(四国色)", "icon": require("./s40.png") },
+    { "id": "40w", "name": "キハ40(JR西日本色)", "icon": require("./w40.png") },
     { "id": "185mrt", "name": "キハ185系四国色", "icon": require("./s185_mrt.png") },
+    { "id": "185cm", "name": "キハ185系普通列車色", "icon": require("./s185cm.png") },
+    { "id": "185g", "name": "キハ185系(緑帯)", "icon": require("./s185g.png") },
     { "id": "185tu", "name": "キハ185系剣山色", "icon": require("./s185tu.png") },
+    { "id": "185tu_uzu", "name": "キハ185系剣山色(うずしお)", "icon": require("./s185tu_uzu.png") },
     { "id": "185iyor", "name": "キハ185系伊予灘ものがたり(赤)", "icon": require("./s185iyor.png") },
     { "id": "185iyoy", "name": "キハ185系伊予灘ものがたり(黄)", "icon": require("./s185iyoy.png") },
     { "id": "185toai", "name": "キハ185系藍よしのがわトロッコ", "icon": require("./s185to_ai.png") },
     { "id": "185mm1", "name": "キハ185系四国まんなか千年ものがたり(緑)", "icon": require("./s185mm1.png") },
+    { "id": "185mm2", "name": "キハ185系四国まんなか千年ものがたり(赤)", "icon": require("./s185mm2.png") },
     { "id": "185ym1", "name": "キハ185系時代の夜明けのものがたり(茶)", "icon": require("./s185ym1.png") },
+    { "id": "185ym2", "name": "キハ185系時代の夜明けのものがたり(緑)", "icon": require("./s185ym2.png") },
+    { "id": "185ap1", "name": "キハ185系アンパンマン", "icon": require("./s185ap1.png") },
     { "id": "1000", "name": "1000形", "icon": require("./s1000.png") },
-    { "id": "1200n", "name": "1200形", "icon": require("./s1200n.png") },
-    { "id": "1500", "name": "1500形", "icon": require("./s1500.png") },
-    { "id": "5001", "name": "5000系(二階建て)", "icon": require("./s5001.png") },
-    { "id": "5001k", "name": "5000系(平屋側)", "icon": require("./s5001k.png") },
-    { "id": "6000p", "name": "6000系", "icon": require("./s6000p.png") },
-    { "id": "7000", "name": "7000系", "icon": require("./s7000.png") },
-    { "id": "7200", "name": "7200系", "icon": require("./s7200.png") },
+    //{ "id": "1200n", "name": "1200形", "icon": require("./s1200n.png") },
+    { "id": "1200", "name": "1200形(旧塗装)", "icon": require("./s1200.png") },
+    { "id": "1201", "name": "1201形", "icon": require("./s1201.png") },
+    //{ "id": "1500", "name": "1500形", "icon": require("./s1500.png") },
+    { "id": "1501", "name": "1500形 1501", "icon": require("./s1501.png") },
+    { "id": "1550", "name": "1500形 1550", "icon": require("./s1550.png") },
+    { "id": "1551", "name": "1500形 1551", "icon": require("./s1551.png") },
     { "id": "2000asi", "name": "2000系", "icon": require("./s2000_asi.png") },
+    { "id": "2000uwa", "name": "2000系(宇和海色)", "icon": require("./s2000_uwa.png") },
     { "id": "N2000", "name": "N2000系", "icon": require("./s2000n.png") },
+    { "id": "2000nl", "name": "N2000系(南風色)", "icon": require("./s2000nl.png") },
+    { "id": "2000-3", "name": "N2000系(試作)", "icon": require("./s2000-3.png") },
+    { "id": "2000ganp1", "name": "2000系(復活塗装)", "icon": require("./s2000ganp1.png") },
     { "id": "2002a", "name": "2000系アンパンマン", "icon": require("./s2002a.png") },
     { "id": "2600", "name": "2600系" , "icon": require("./s2600.png")},
+    { "id": "2600apr", "name": "2600系アンパンマン(赤)", "icon": require("./s2600apr.png") },
+    { "id": "2600apb", "name": "2600系アンパンマン(青)", "icon": require("./s2600apb.png") },
     { "id": "2700", "name": "2700系", "icon": require("./s2700.png") },
+    { "id": "2700asi", "name": "2700系(あしずり色)", "icon": require("./s2700_asi.png") },
+    { "id": "2700smn", "name": "2700系(しまんと色)", "icon": require("./s2700_smn.png") },
+    { "id": "2700uzu", "name": "2700系(うずしお色)", "icon": require("./s2700_uzu.png") },
     { "id": "2700apy", "name": "2700系アンパンマン(黄)", "icon": require("./s2700apy.png") },
     { "id": "2700apr", "name": "2700系アンパンマン(赤)", "icon": require("./s2700apr.png") },
+    { "id": "2700apy1", "name": "2700系アンパンマン(黄)①", "icon": require("./s2700apy1.png") },
+    { "id": "2700apr1", "name": "2700系アンパンマン(赤)①", "icon": require("./s2700apr1.png") },
+    { "id": "3600", "name": "3600系", "icon": require("./s3600.png") },
+    { "id": "5001", "name": "5000系(二階建て)", "icon": require("./s5001.png") },
+    { "id": "5001k", "name": "5000系(平屋側)", "icon": require("./s5001k.png") },
+    //{ "id": "6000p", "name": "6000系", "icon": require("./s6000p.png") },
+    { "id": "6000f", "name": "6000系(Fライナー)", "icon": require("./s6000f.png") },
+    { "id": "7000", "name": "7000系", "icon": require("./s7000.png") },
+    //{ "id": "7001", "name": "7000系 7001", "icon": require("./s7001.png") },
+    { "id": "7200", "name": "7200系", "icon": require("./s7200.png") },
     { "id": "8000no", "name": "8000系(オレンジ)", "icon": require("./s8000no.png") },
     { "id": "8000nr", "name": "8000系(赤)", "icon": require("./s8000nr.png") },
+    { "id": "8001nr", "name": "8000系(赤) 8001", "icon": require("./s8001nr.png") },
     { "id": "8000ap", "name": "8000系アンパンマン", "icon": require("./s8000ap.png") },
     { "id": "8000nn", "name": "8000系リニューアル改", "icon": require("./s8000nn.png") },
     { "id": "8600", "name": "8600系", "icon": require("./s8600.png") },
+    { "id": "9000", "name": "9000系", "icon": require("./s9000.png") },
     { "id": "9640", "name": "9640形(白)", "icon": require("./tosa9640.png") },
+    { "id": "9640ht", "name": "9640形(赤帯)", "icon": require("./tosa9640ht.png") },
+    { "id": "9640mo1", "name": "9640形もみじ号①", "icon": require("./tosa9640mo1.png") },
+    { "id": "9640mo2", "name": "9640形もみじ号②", "icon": require("./tosa9640mo2.png") },
+    { "id": "9640tyg", "name": "9640形(緑)", "icon": require("./tosa9640tyg.png") },
+    { "id": "9640tyb", "name": "9640形(青)", "icon": require("./tosa9640tyb.png") },
     { "id": "9640jgr", "name": "9640形オープンデッキ(緑)", "icon": require("./tosa9640jgr.png") },
+    { "id": "9640jbl", "name": "9640形オープンデッキ(青)", "icon": require("./tosa9640jbl.png") },
     { "id": "285", "name": "285系サンライズ瀬戸", "icon": require("./w285.png") },
     { "id": "213w", "name": "ラ・マル・ド・ボァ", "icon": require("./w213w.png") },
+    { "id": "W741", "name": "DEC741系", "icon": require("./w741.png") },
+    { "id": "Wk141", "name": "キヤ141系", "icon": require("./w141jg.png") },
     { "id": "EF65", "name": "EF65", "icon": require("./ef65.png") },
-    { "id": "EF210", "name": "EF210", "icon": require("./ef210.png") },
+    //{ "id": "EF210", "name": "EF210", "icon": require("./ef210.png") },
+    { "id": "EF210a", "name": "EF210(300番代)", "icon": require("./ef210a.png") },
+    { "id": "EF210n", "name": "EF210(新塗装)", "icon": require("./ef210n.png") },
+    { "id": "EF210n1", "name": "EF210(新塗装①)", "icon": require("./ef210n1.png") },
+    { "id": "EF210l3", "name": "EF210(L3編成)", "icon": require("./ef210l3.png") },
+    { "id": "T45000", "name": "トラ45000", "icon": require("./s150001to.png") },
   ]
-  
-}
+
+}

assets/originData/spots.ts

@@ -0,0 +1,21 @@
+/**
+ * 観光スポットデータ
+ * StationNumber は "SP" プレフィックスで管理（路線とは別系統）
+ * Station_JP の先頭ドット（.）はダイヤデータのキーと一致させるための命名規則
+ */
+export default [
+  {
+    Station_JP: ".与島",
+    Station_EN: "Yoshima",
+    MyStation: "0",
+    StationNumber: null,
+    DispNum: "3",
+    StationTimeTable: "",
+    StationMap: "https://www.google.co.jp/maps/place/34.389472,133.816444",
+    JrHpUrl: "https://www.jb-honshi.co.jp/yoshimapa/",
+    jslodApi: "spot",
+    lat: 34.389472,
+    lng: 133.816444,
+    isSpot: true,
+  },
+];

babel.config.js

@@ -1,6 +1,15 @@
 module.exports = function(api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: [
+      ['babel-preset-expo', {
+        'react-compiler': { enabled: false },
+        lazyImports: true,
+      }],
+    ],
+    plugins: [
+      './plugins/babel-plugin-disable-font-scaling',
+      'react-native-reanimated/plugin',
+    ],
   };
 };

components/ActionSheetComponents/EachTrainInfo.tsx

@@ -1,21 +1,35 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { Platform } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { EachTrainInfoCore } from "./EachTrainInfoCore";
+import { useSheetMaxHeight } from "./useSheetMaxHeight";
 export const EachTrainInfo = ({ payload }) => {
-  if (!payload) return <></>;
   const actionSheetRef = useRef(null);
+  const maxHeight = useSheetMaxHeight();
+  const [sheetOpened, setSheetOpened] = useState(false);
+
+  const handleOpen = () => {
+    setSheetOpened(true);
+  };
+
+  const handleClose = () => {
+    setSheetOpened(false);
+  };
+
+  if (!payload) return <></>;
   return (
     <ActionSheet
       gestureEnabled={true}
       CustomHeaderComponent={<></>}
       ref={actionSheetRef}
       drawUnderStatusBar={false}
-      isModal={Platform.OS == "ios"}
-
+      isModal={Platform.OS === "ios" && !Platform.isPad}
+      containerStyle={{ maxHeight }}
+      onOpen={handleOpen}
+      onClose={handleClose}
       //useBottomSafeAreaPadding={Platform.OS == "android"}
     >
-      <EachTrainInfoCore {...{ actionSheetRef, ...payload }} />
+      <EachTrainInfoCore {...{ actionSheetRef, sheetOpened, ...payload }} />
     </ActionSheet>
   );
 };

components/ActionSheetComponents/EachTrainInfo/DataConnectedButton.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from "react";
 import { View, Text, TouchableWithoutFeedback, Alert } from "react-native";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
 
 export const DataConnectedButton: FC<{
   i: string;
@@ -8,6 +10,8 @@ export const DataConnectedButton: FC<{
 }> = ({ i, openTrainInfo }) => {
   const [station, se, time] = i.split(",");
   const { keyList } = useAllTrainDiagram();
+  const { colors } = useThemeColors();
+  const { fontScale, moderateScale } = useResponsive();
   // 列番が有効かどうかをチェックする関数
   const isValidTrainNumber = (trainNum: string): boolean => {
     return keyList.includes(trainNum);
@@ -30,31 +34,31 @@ export const DataConnectedButton: FC<{
       }}
       key={station + time}
     >
-      <View style={{ flexDirection: "row", backgroundColor: "#f5f5f5" }}>
+      <View style={{ flexDirection: "row", backgroundColor: colors.backgroundTertiary }}>
         <View
           style={{
             padding: 8,
             flexDirection: "row",
             borderBottomWidth: 1,
-            borderBottomColor: "#f0f0f0",
+            borderBottomColor: colors.borderLight,
             flex: 1,
           }}
         >
           <View
             style={{
-              width: 35,
+              width: moderateScale(35),
               position: "relative",
               marginHorizontal: 15,
               flexDirection: "row",
               height: "10%",
             }}
           />
-          <Text style={{ fontSize:16, fontFamily: "DiaPro" }}>
+          <Text style={{ fontSize: fontScale(16), fontFamily: "DiaPro", color: colors.text }}>
             {se === "増" ? "⬐" : "↳"}
           </Text>
-          <Text style={{ fontSize: 20, color: "#0000EE" }}>{time}</Text>
+          <Text style={{ fontSize: fontScale(20), color: colors.textLink }}>{time}</Text>
           <View style={{ flex: 1 }} />
-          <Text style={{ fontSize: 18, width: 50 }}>
+          <Text style={{ fontSize: fontScale(18), width: moderateScale(50), color: colors.text }}>
             {se === "増" ? "増結" : "解結"}
           </Text>
         </View>

components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx

@@ -11,6 +11,8 @@ import {
   parseSeString,
 } from "@/utils/seUtils";
 import type { SeTypes } from "@/types";
+import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
 
 type seTypes =
   | "発編"
@@ -63,6 +65,8 @@ export const EachStopList: FC<props> = ({
   array,
   isNotService = false,
 }) => {
+  const { colors: themeColors, isDark } = useThemeColors();
+  const { fontScale, moderateScale } = useResponsive();
   const [station, se, time, platformNum] = i.split(",") as [
     string,
     seTypes,
@@ -135,7 +139,8 @@ export const EachStopList: FC<props> = ({
     isCommunity,
     isCanceled,
     isDelayed,
-    isNotService
+    isNotService,
+    isDark
   );
   // 打ち消し線用の通常色（遅延していない時の色）
   const normalColors = getStopListColors(
@@ -143,7 +148,8 @@ export const EachStopList: FC<props> = ({
     isCommunity,
     isCanceled,
     false,
-    isNotService
+    isNotService,
+    isDark
   );
 
   // beforeSameStationData用の色設定
@@ -161,14 +167,16 @@ export const EachStopList: FC<props> = ({
       beforeIsCommunity,
       isCanceled,
       isDelayed,
-      isNotService
+      isNotService,
+      isDark
     );
     const beforeNormalColors = getStopListColors(
       beforeIsThrough,
       beforeIsCommunity,
       isCanceled,
       false,
-      isNotService
+      isNotService,
+      isDark
     );
     beforeTimeTextColor = beforeColors.timeText;
     beforeNormalTimeTextColor = beforeNormalColors.timeText;
@@ -191,7 +199,7 @@ export const EachStopList: FC<props> = ({
       >
         <View
           style={{
-            width: 35,
+            width: moderateScale(35),
             position: "relative",
             marginHorizontal: 15,
             flexDirection: "row",
@@ -216,7 +224,7 @@ export const EachStopList: FC<props> = ({
           <View style={{ position: "relative", height: 25 }}>
             <Text
               style={{
-                fontSize: 20,
+                fontSize: fontScale(20),
                 position: "absolute",
                 textAlignVertical: "center",
                 left: -15,
@@ -233,7 +241,7 @@ export const EachStopList: FC<props> = ({
             padding: 8,
             flexDirection: "row",
             borderBottomWidth: 1,
-            borderBottomColor: "#f0f0f0",
+            borderBottomColor: themeColors.borderLight,
             flex: 1,
           }}
         >
@@ -241,7 +249,7 @@ export const EachStopList: FC<props> = ({
             <View style={{ flex: 1 }} />
             <Text
               style={{
-                fontSize: 20,
+                fontSize: fontScale(20),
                 color: colors.text,
                 fontStyle: isCommunity ? "italic" : "normal",
                 textAlignVertical: "center",
@@ -302,20 +310,21 @@ const TimeText: FC<{
   normalTextColor,
 }) => {
   const [seString, seType] = parseSeString(se);
+  const { fontScale, moderateScale } = useResponsive();
 
   return (
-    <View style={{ flexDirection: "row", alignItems: "center" }}>
+    <View style={{ flexDirection: "row", alignItems: "center", opacity: isBefore ? 0.5 : 1 }}>
       {!!currentTrainData?.delay &&
         currentTrainData?.delay != "入線" &&
         currentTrainData?.delay != 0 && (
           <Text
             style={{
-              fontSize: isBefore ? 14 : 15,
+              fontSize: fontScale(isBefore ? 14 : 15),
               marginVertical: isDouble ? -2 : 0,
               color: normalTextColor,
-              width: 60,
+              width: moderateScale(60),
               position: "absolute",
-              right: isBefore ? 125 : 120,
+              right: isBefore ? moderateScale(125) : moderateScale(120),
               textAlign: "right",
               textDecorationLine: "line-through",
               fontStyle: seType == "community" ? "italic" : "normal",
@@ -335,8 +344,8 @@ const TimeText: FC<{
       />
       <Text
         style={{
-          fontSize: isBefore ? 14 : 18,
-          width: 50,
+          fontSize: fontScale(isBefore ? 14 : 18),
+          width: moderateScale(50),
           color: textColor,
           marginVertical: isDouble ? -2 : 0,
           fontStyle: seType == "community" ? "italic" : "normal",
@@ -349,6 +358,8 @@ const TimeText: FC<{
 };
 const StationNumbersBox: FC<{ stn: string; se: seTypes }> = (props) => {
   const { stn, se } = props;
+  const { fixed } = useThemeColors();
+  const { fontScale } = useResponsive();
   const lineColor = lineColorList[stn.charAt(0)];
   const hasThrew =
     se == "通過" ||
@@ -366,9 +377,9 @@ const StationNumbersBox: FC<{ stn: string; se: seTypes }> = (props) => {
       <View style={{ flex: 1 }} />
       <Text
         style={{
-          color: "white",
+          color: fixed.textOnPrimary,
           textAlign: "center",
-          fontSize: 10,
+          fontSize: fontScale(10),
           fontWeight: "bold",
         }}
       >
@@ -393,6 +404,7 @@ type StationTimeBoxType = {
 
 const StationTimeBox: FC<StationTimeBoxType> = (props) => {
   const { delay, textColor, seType, se, time, isDouble, isBefore } = props;
+  const { fontScale, moderateScale } = useResponsive();
   const dates = dayjs()
     .set("hour", parseInt(time.split(":")[0]))
     .set("minute", parseInt(time.split(":")[1]))
@@ -401,10 +413,10 @@ const StationTimeBox: FC<StationTimeBoxType> = (props) => {
   return (
     <Text
       style={{
-        fontSize: isBefore ? 14 : 20,
+        fontSize: fontScale(isBefore ? 14 : 20),
         marginVertical: isDouble ? -2 : 0,
         color: textColor,
-        width: 60,
+        width: moderateScale(60),
         fontStyle: seType == "community" ? "italic" : "normal",
       }}
     >

components/ActionSheetComponents/EachTrainInfo/LiveActivityButton.tsx

@@ -0,0 +1,144 @@
+import React, { FC, useCallback, useEffect } from "react";
+import { Platform, TouchableOpacity, Text, StyleSheet } from "react-native";
+import { useTrainFollowActivity } from "@/lib/useTrainFollowActivity";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { trainDataType } from "@/lib/trainPositionTextArray";
+
+type Props = {
+  currentTrainData: trainDataType;
+  currentPosition: string[] | undefined;
+};
+
+export const LiveActivityButton: FC<Props> = ({
+  currentTrainData,
+  currentPosition,
+}) => {
+  const liveActivity = useTrainFollowActivity();
+  const { allTrainDiagram } = useAllTrainDiagram();
+
+  const onLine = !!currentPosition?.toString().length;
+
+  const handleLiveActivity = useCallback(async () => {
+    if (liveActivity.status === "active") {
+      await liveActivity.end();
+      return;
+    }
+    if (!onLine) return;
+
+    const diagramStr: string =
+      (allTrainDiagram as Record<string, string>)[currentTrainData?.num] ?? "";
+    const stations = diagramStr
+      .split("#")
+      .filter(Boolean)
+      .map((s) => s.split(",")[0]);
+    const destination =
+      stations.length > 0 ? stations[stations.length - 1] : "";
+
+    const curSt = currentPosition?.[0] ?? currentTrainData?.Pos ?? "";
+    const curIdx = stations.indexOf(curSt);
+    const nextSt =
+      curIdx >= 0 && curIdx + 1 < stations.length
+        ? stations[curIdx + 1]
+        : currentPosition?.[1] ?? "";
+
+    await liveActivity.start({
+      trainNumber: currentTrainData?.num ?? "",
+      lineName: currentTrainData?.Line ?? "",
+      destination,
+      currentStation: curSt,
+      nextStation: nextSt,
+      delayMinutes:
+        typeof currentTrainData?.delay === "number"
+          ? currentTrainData.delay
+          : 0,
+      scheduledArrival: "",
+    });
+  }, [
+    liveActivity,
+    onLine,
+    allTrainDiagram,
+    currentTrainData,
+    currentPosition,
+  ]);
+
+  // 列車位置が変わったら Live Activity を自動更新
+  useEffect(() => {
+    if (liveActivity.status !== "active") return;
+    if (!currentTrainData?.Pos) return;
+
+    const diagramStr: string =
+      (allTrainDiagram as Record<string, string>)[currentTrainData?.num] ?? "";
+    const stations = diagramStr
+      .split("#")
+      .filter(Boolean)
+      .map((s) => s.split(",")[0]);
+
+    const curSt = currentPosition?.[0] ?? currentTrainData.Pos;
+    const curIdx = stations.indexOf(curSt);
+    const nextSt =
+      curIdx >= 0 && curIdx + 1 < stations.length
+        ? stations[curIdx + 1]
+        : currentPosition?.[1] ?? "";
+
+    liveActivity.update({
+      currentStation: curSt,
+      nextStation: nextSt,
+      delayMinutes:
+        typeof currentTrainData.delay === "number"
+          ? currentTrainData.delay
+          : 0,
+      scheduledArrival: "",
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    currentTrainData?.Pos,
+    currentTrainData?.delay,
+    currentPosition?.toString(),
+  ]);
+
+  if (Platform.OS !== "ios" || !liveActivity.available || !onLine) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={handleLiveActivity}
+      disabled={liveActivity.status === "loading"}
+      style={[
+        styles.liveActivityButton,
+        liveActivity.status === "active" && styles.liveActivityButtonActive,
+      ]}
+    >
+      <Text style={styles.liveActivityButtonText}>
+        {liveActivity.status === "active"
+          ? "🔴 列車追従 Live Activity 終了"
+          : liveActivity.status === "loading"
+          ? "⏳ 開始中..."
+          : "🟢 列車追従 Live Activity 開始"}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  liveActivityButton: {
+    marginHorizontal: 10,
+    marginVertical: 6,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 10,
+    backgroundColor: "rgba(0, 153, 204, 0.12)",
+    borderWidth: 1,
+    borderColor: "rgba(0, 153, 204, 0.5)",
+    alignItems: "center",
+  },
+  liveActivityButtonActive: {
+    backgroundColor: "rgba(220, 50, 50, 0.1)",
+    borderColor: "rgba(220, 50, 50, 0.5)",
+  },
+  liveActivityButtonText: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#0099cc",
+  },
+});

components/ActionSheetComponents/EachTrainInfo/LongHeader.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { ScrollView } from "react-native";
+import { View } from "react-native";
 import { TrainDataView } from "./TrainDataView";
 import { trainDataType } from "@/lib/trainPositionTextArray";
 import type { NavigateFunction } from "@/types";
@@ -18,12 +18,13 @@ export const LongHeader:FC<props> = ({
   navigate,
 }) => {
   return (
-    <ScrollView
+    <View
       style={{
         flexDirection: "row",
+        flex: 1,
+        width: "100%",
+        alignSelf: "stretch",
       }}
-      horizontal
-      pagingEnabled
     >
       <TrainDataView
         currentTrainData={currentTrainData}
@@ -33,6 +34,6 @@ export const LongHeader:FC<props> = ({
         navigate={navigate}
         key={"LongHeader"}
       />
-    </ScrollView>
+    </View>
   );
 };

components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx

@@ -1,6 +1,8 @@
 import { trainPosition, trainDataType } from "@/lib/trainPositionTextArray";
 import React, { FC } from "react";
-import { View, Text, TextStyle, ViewStyle } from "react-native";
+import { View, Text, ViewStyle } from "react-native";
+import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
 
 type stateBox = {
   currentTrainData: trainDataType | undefined;
@@ -21,6 +23,8 @@ export const PositionBox: FC<stateBox> = (props) => {
     platformDescription,
     lineNumber,
   } = props;
+  const { colors } = useThemeColors();
+  const { fontScale } = useResponsive();
   let firstText = "";
   let secondText = "";
   let marginText = "";
@@ -46,22 +50,22 @@ export const PositionBox: FC<stateBox> = (props) => {
     }
   }
   return (
-    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
-      <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
+    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), backgroundColor: colors.surface, ...style }}>
+      <Text style={{ fontSize: fontScale(12), color: colors.textAccent }}>{title}</Text>
       <View style={{ flex: 1 }} />
       <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
         {firstText && (
-          <Text style={mode == 2 ? boxTextStyle2 : (isBetween ?  boxTextStyle : boxTextStyleBig)}>
+          <Text style={[mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } : (isBetween ? { fontSize: fontScale(25), textAlign: "right" as const } : { fontSize: fontScale(28), textAlign: "right" as const }), { color: colors.textAccent }]}>
             {firstText}
           </Text>
         )}
         {marginText && (
-          <Text style={{ color: "#0099CC", textAlign: "right" }}>
+          <Text style={{ color: colors.textAccent, textAlign: "right" }}>
             {marginText}
           </Text>
         )}
         {secondText && (
-          <Text style={mode == 2 ? boxTextStyle2 :(isBetween ?  boxTextStyle : boxTextStyleMini)}>
+          <Text style={[mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } :(isBetween ? { fontSize: fontScale(25), textAlign: "right" as const } : { fontSize: fontScale(16), textAlign: "right" as const }), { color: colors.textAccent }]}>
             {secondText}
           </Text>
         )}
@@ -70,8 +74,9 @@ export const PositionBox: FC<stateBox> = (props) => {
         <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
           <Text
             style={{
-              ...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
-              fontSize: 10,
+              ...(mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } : { fontSize: fontScale(25), textAlign: "right" as const }),
+              fontSize: fontScale(10),
+              color: colors.textAccent,
             }}
           >
             {" " + externalText}
@@ -84,39 +89,13 @@ export const PositionBox: FC<stateBox> = (props) => {
 };
 const boxStyle: ViewStyle = {
   flex: 1,
-  backgroundColor: "white",
   borderRadius: 10,
   padding: 10,
   margin: 10,
 };
 const boxStyle2: ViewStyle = {
   flex: 1,
-  backgroundColor: "white",
   borderRadius: 10,
   padding: 5,
   margin: 5,
 };
-const boxTextStyle2: TextStyle = {
-  fontSize: 18,
-  color: "#0099CC",
-  textAlign: "right",
-};
-const boxTextStyleBig: TextStyle = {
-  fontSize: 28,
-  color: "#0099CC",
-  textAlign: "right",
-};
-
-
-const boxTextStyleMini: TextStyle = {
-  fontSize: 16,
-  color: "#0099CC",
-  textAlign: "right",
-};
-
-
-const boxTextStyle: TextStyle = {
-  fontSize: 25,
-  color: "#0099CC",
-  textAlign: "right",
-};

components/ActionSheetComponents/EachTrainInfo/ScrollStickyContent.tsx

@@ -1,13 +1,17 @@
 import React from "react";
-import { View, Text, LayoutAnimation, TouchableOpacity } from "react-native";
+import { View, Text, TouchableOpacity } from "react-native";
+import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
 
 export const ScrollStickyContent = (props) => {
   const { currentTrainData, showThrew, setShowThrew, haveThrough } = props;
+  const { colors } = useThemeColors();
+  const { fontScale } = useResponsive();
   return (
     <View
       style={{
         alignItems: "center",
-        backgroundColor: "#ffffffc2",
+        backgroundColor: colors.surface,
         flexDirection: "row",
       }}
     >
@@ -16,18 +20,18 @@ export const ScrollStickyContent = (props) => {
           padding: 8,
           flexDirection: "row",
           borderBottomWidth: 1,
-          borderBottomColor: "#ffffffc2",
+          borderBottomColor: colors.border,
           flex: 1,
         }}
       >
-        <Text style={{ fontSize: 20 }}>停車駅</Text>
+        <Text style={{ fontSize: fontScale(20), color: colors.text }}>停車駅</Text>
         <View style={{ flex: 1 }} />
         <View style={{ flexDirection: "row" }}>
           {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
             <Text
               style={{
-                fontSize: 15,
-                color: "black",
+                fontSize: fontScale(15),
+                color: colors.text,
                 position: "absolute",
                 right: 110,
                 textAlign: "right",
@@ -39,12 +43,12 @@ export const ScrollStickyContent = (props) => {
           )}
           <Text
             style={{
-              fontSize: 20,
+              fontSize: fontScale(20),
               color: isNaN(currentTrainData?.delay)
-                ? "black"
+                ? colors.text
                 : currentTrainData?.delay == 0
-                ? "black"
-                : "red",
+                ? colors.text
+                : colors.textError,
               width: 60,
             }}
           >
@@ -53,23 +57,20 @@ export const ScrollStickyContent = (props) => {
           <TouchableOpacity
             onPress={() => {
               if (!haveThrough) return;
-              LayoutAnimation.configureNext({
-                duration: 200,
-                update: { type: "easeInEaseOut", springDamping: 0.6 },
-              });
               setShowThrew(!showThrew);
             }}
           >
             <View style={{ flex: 1 }} />
             <Text
               style={{
-                fontSize: 12,
+                fontSize: fontScale(12),
                 width: 50,
                 paddingBottom: 0,
                 margin: "auto",
                 textAlign: "center",
                 textAlignVertical: "center",
                 opacity: haveThrough ? 1 : 0,
+                color: colors.text,
               }}
             >
               (通過{showThrew ? "▼" : "▶"})

components/ActionSheetComponents/EachTrainInfo/ShortHeader.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { ScrollView } from "react-native";
+import { View } from "react-native";
 import { TrainDataView } from "./TrainDataView";
 import { trainDataType } from "@/lib/trainPositionTextArray";
 import type { NavigateFunction } from "@/types";
@@ -18,13 +18,13 @@ export const ShortHeader:FC<props> = ({
   navigate,
 }) => {
   return (
-    <ScrollView
+    <View
       style={{
         flexDirection: "row",
         flex: 1,
+        width: "100%",
+        alignSelf: "stretch",
       }}
-      horizontal
-      pagingEnabled
     >
       <TrainDataView
         mode={2}
@@ -35,6 +35,6 @@ export const ShortHeader:FC<props> = ({
         navigate={navigate}
         key={"ShortHeader"}
       />
-    </ScrollView>
+    </View>
   );
 };

components/ActionSheetComponents/EachTrainInfo/ShowSpecialTrain.tsx

@@ -1,12 +1,14 @@
 import { Text, TouchableOpacity } from "react-native";
 import React, { useState } from "react";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useThemeColors } from "@/lib/theme";
 export const ShowSpecialTrain = ({
   isTrainDataNothing,
   setTrainData,
   trueTrainID,
 }) => {
   const { allTrainDiagram } = useAllTrainDiagram();
+  const { colors } = useThemeColors();
   const replaceSpecialTrainDetail = (trainNum) => {
     let TD = allTrainDiagram[trainNum];
     if (!TD) return;
@@ -22,7 +24,7 @@ export const ShowSpecialTrain = ({
               style={{
                 padding: 10,
                 flexDirection: "row",
-                borderColor: "blue",
+                borderColor: colors.textAccent,
                 borderWidth: 1,
                 margin: 10,
                 borderRadius: 5,
@@ -30,7 +32,7 @@ export const ShowSpecialTrain = ({
               }}
             >
               <Text
-                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                style={{ fontSize: 18, fontWeight: "bold", color: colors.text }}
               >
                 本来の列車情報候補を表示:({ids})
               </Text>

components/ActionSheetComponents/EachTrainInfo/StateBox.tsx

@@ -1,5 +1,7 @@
 import React, { CSSProperties, FC } from "react";
-import { View, Text, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { View, Text, StyleProp, ViewStyle } from "react-native";
+import { useThemeColors } from "@/lib/theme";
+import { useResponsive } from "@/lib/responsive";
 
 type stateBox = {
   text: string;
@@ -10,19 +12,22 @@ type stateBox = {
 };
 export const StateBox: FC<stateBox> = (props) => {
   const { text, title, style, mode, endText } = props;
+  const { colors } = useThemeColors();
+  const { fontScale } = useResponsive();
   return (
-    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
-      <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
+    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), backgroundColor: colors.surface, ...style }}>
+      <Text style={{ fontSize: fontScale(12), color: colors.textAccent }}>{title}</Text>
       <View style={{ flex: 1 }} />
       <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
-        <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
+        <Text style={[mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } : { fontSize: fontScale(25), textAlign: "right" as const }, { color: colors.textAccent }]}>{text}</Text>
       </View>
       {endText && (
         <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
           <Text
             style={{
-              ...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
-              fontSize: 10,
+              ...(mode == 2 ? { fontSize: fontScale(18), textAlign: "right" as const } : { fontSize: fontScale(25), textAlign: "right" as const }),
+              fontSize: fontScale(10),
+              color: colors.textAccent,
             }}
           >
             {endText}
@@ -34,26 +39,13 @@ export const StateBox: FC<stateBox> = (props) => {
 };
 const boxStyle: ViewStyle = {
   flex: 1,
-  backgroundColor: "white",
   borderRadius: 10,
   padding: 10,
   margin: 10,
 };
 const boxStyle2: ViewStyle = {
   flex: 1,
-  backgroundColor: "white",
   borderRadius: 10,
   padding: 5,
   margin: 5,
 };
-const boxTextStyle2: TextStyle = {
-  fontSize: 18,
-  color: "#0099CC",
-  textAlign: "right",
-};
-
-const boxTextStyle: TextStyle = {
-  fontSize: 25,
-  color: "#0099CC",
-  textAlign: "right",
-};

components/ActionSheetComponents/EachTrainInfo/TrainDataView.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, FC } from "react";
-import { View, TouchableOpacity, useWindowDimensions } from "react-native";
+import { View, TouchableOpacity, Text } from "react-native";
 import { StateBox } from "./StateBox";
 import { PositionBox } from "./PositionBox";
 import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange";
@@ -13,6 +13,7 @@ import { useStationList } from "../../../stateBox/useStationList";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { customTrainDataDetector } from "@/components/custom-train-data";
 import type { NavigateFunction } from "@/types";
+import { stackAwareNavigate } from "@/lib/rootNavigation";
 
 
 type props = {
@@ -33,7 +34,6 @@ export const TrainDataView:FC<props> = ({
 }) => {
   const { stationList } = useStationList();
 
-  const { width, height } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
   const { setInjectData } = useCurrentTrain();
 
@@ -129,6 +129,8 @@ export const TrainDataView:FC<props> = ({
     setDialog(true);
   };
 
+
+
   return (
     <>
       <StationPosPushDialog
@@ -153,7 +155,7 @@ export const TrainDataView:FC<props> = ({
           flexDirection: "row",
           //minHeight: 200,
           //height: heightPercentageToDP("20%"),
-          width: isLandscape ? (width / 100) * 40 : width,
+          width: "100%",
           flex: 1,
         }}
       >
@@ -162,16 +164,16 @@ export const TrainDataView:FC<props> = ({
           //disabled={!onLine}
           //onLongPress={openEditWindow}
           onLongPress={()=>{
-            if (!onLine) return;
+            if (!currentTrainData) return;
             setInjectData({ type:"train", value:currentTrainData?.num, fixed:true});
-            navigate("positions", { screen: "Apps" });
+            stackAwareNavigate("positions");
             SheetManager.hide("EachTrainInfo");
           }}
           onPress={() => {
             if (!onLine) return;
             setInjectData({ type: "station", value: currentPosition[0], fixed: false });
             
-            navigate("positions", { screen: "Apps" });
+            stackAwareNavigate("positions");
             SheetManager.hide("EachTrainInfo");
           }}
         >

components/ActionSheetComponents/EachTrainInfo/colorScheme.ts

@@ -18,13 +18,15 @@ type ColorScheme = {
  * @param isCanceled 運休かどうか
  * @param isDelayed 遅延しているかどうか
  * @param isNotService 回送列車かどうか
+ * @param isDark ダークモードかどうか
  */
 export const getStopListColors = (
   isThrough: boolean,
   isCommunity: boolean,
   isCanceled: boolean,
   isDelayed: boolean,
-  isNotService: boolean = false
+  isNotService: boolean = false,
+  isDark: boolean = false
 ): ColorScheme => {
   // 最優先: 回送列車の場合
   if (isNotService) {
@@ -32,45 +34,47 @@ export const getStopListColors = (
       // 回送 + 運休
       if (isThrough) {
         return {
-          background: '#1a1a1a',  // 非常に濃いグレー
-          text: isCommunity ? '#8090c0' : '#909090',  // 暗めの青灰色 or 暗めのグレー
-          timeText: isDelayed 
-            ? (isCommunity ? '#aa7799' : '#aa7777')  // 遅延時: 暗めのピンク系の赤
-            : (isCommunity ? '#8090c0' : '#909090'),
-          seText: isCommunity ? '#8090c0' : '#909090',
+          background: isDark ? '#111111' : '#1a1a1a',
+          text: isCommunity ? '#8090c0' : (isDark ? '#707070' : '#909090'),
+          timeText: isDelayed
+            ? (isCommunity ? '#aa7799' : '#aa7777')
+            : (isCommunity ? '#8090c0' : (isDark ? '#707070' : '#909090')),
+          seText: isCommunity ? '#8090c0' : (isDark ? '#707070' : '#909090'),
           opacity: '0.5',
         };
       } else {
         return {
-          background: '#3a3a3a',  // 濃いグレー
-          text: isCommunity ? '#8090c0' : '#b0b0b0',  // 暗めの青灰色 or 明るめのグレー
+          background: isDark ? '#2a2a2a' : '#3a3a3a',
+          text: isCommunity ? '#8090c0' : (isDark ? '#c0c0c0' : '#b0b0b0'),
           timeText: isDelayed
-            ? (isCommunity ? '#bb8899' : '#bb8888')  // 遅延時: 暗めのピンク系の赤
-            : (isCommunity ? '#8090c0' : '#b0b0b0'),
-          seText: isCommunity ? '#8090c0' : '#b0b0b0',
+            ? (isCommunity ? '#bb8899' : '#bb8888')
+            : (isCommunity ? '#8090c0' : (isDark ? '#c0c0c0' : '#b0b0b0')),
+          seText: isCommunity ? '#8090c0' : (isDark ? '#c0c0c0' : '#b0b0b0'),
           opacity: '0.8',
         };
       }
     } else if (isThrough) {
       // 回送 + 通過
       return {
-        background: '#e8e8e8',  // 薄いグレー
-        text: isCommunity ? '#6677cc' : '#777777',  // 暗めの青 or グレー
-        timeText: isDelayed 
-          ? (isCommunity ? '#cc5577' : '#dd5555')  // 遅延時: 暗めの赤
-          : (isCommunity ? '#6677cc' : '#777777'),
-        seText: isCommunity ? '#6677cc' : '#777777',
+        background: isDark ? '#2a2a2a' : '#e8e8e8',
+        text: isCommunity ? (isDark ? '#8899ee' : '#6677cc') : (isDark ? '#aaaaaa' : '#777777'),
+        timeText: isDelayed
+          ? (isCommunity ? '#cc5577' : '#dd5555')
+          : (isCommunity ? (isDark ? '#8899ee' : '#6677cc') : (isDark ? '#aaaaaa' : '#777777')),
+        seText: isCommunity ? (isDark ? '#8899ee' : '#6677cc') : (isDark ? '#aaaaaa' : '#777777'),
         opacity: '0.6',
       };
     } else {
       // 回送 + 通常停車
       return {
-        background: isDelayed ? '#f5f0f0' : '#f5f5f5',  // 遅延時は少し赤みのあるグレー
-        text: isCommunity ? '#4455aa' : '#555555',  // 暗めの青 or ダークグレー
-        timeText: isDelayed 
-          ? (isCommunity ? '#bb3355' : '#cc0000')  // 遅延時: 暗めの赤
-          : (isCommunity ? '#4455aa' : '#555555'),
-        seText: isCommunity ? '#4455aa' : '#555555',
+        background: isDark
+          ? (isDelayed ? '#2a1a1a' : '#222222')
+          : (isDelayed ? '#f5f0f0' : '#f5f5f5'),
+        text: isCommunity ? (isDark ? '#7788cc' : '#4455aa') : (isDark ? '#aaaaaa' : '#555555'),
+        timeText: isDelayed
+          ? (isCommunity ? '#bb3355' : '#cc0000')
+          : (isCommunity ? (isDark ? '#7788cc' : '#4455aa') : (isDark ? '#aaaaaa' : '#555555')),
+        seText: isCommunity ? (isDark ? '#7788cc' : '#4455aa') : (isDark ? '#aaaaaa' : '#555555'),
         opacity: '0.85',
       };
     }
@@ -81,10 +85,10 @@ export const getStopListColors = (
     if (isThrough) {
       // 通過系 + 運休
       return {
-        background: '#2a2a2a',  // 濃いグレー
-        text: isCommunity ? '#a8b5ff' : '#c0c0c0',  // 薄い青 or 薄いグレー
-        timeText: isDelayed 
-          ? (isCommunity ? '#dd99bb' : '#dd9999')  // 遅延時: 薄いピンク系の赤
+        background: isDark ? '#1e1e2e' : '#2a2a2a',
+        text: isCommunity ? '#a8b5ff' : '#c0c0c0',
+        timeText: isDelayed
+          ? (isCommunity ? '#dd99bb' : '#dd9999')
           : (isCommunity ? '#a8b5ff' : '#c0c0c0'),
         seText: isCommunity ? '#a8b5ff' : '#c0c0c0',
         opacity: '0.6',
@@ -92,10 +96,10 @@ export const getStopListColors = (
     } else {
       // 通常停車 + 運休
       return {
-        background: '#5a5a5a',  // 中程度のグレー
-        text: isCommunity ? '#a8b5ff' : '#ffffff',  // 薄い青 or 白
+        background: isDark ? '#3a3a4a' : '#5a5a5a',
+        text: isCommunity ? '#a8b5ff' : '#ffffff',
         timeText: isDelayed
-          ? (isCommunity ? '#ffaacc' : '#ffaaaa')  // 遅延時: 明るいピンク系の赤
+          ? (isCommunity ? '#ffaacc' : '#ffaaaa')
           : (isCommunity ? '#a8b5ff' : '#ffffff'),
         seText: isCommunity ? '#a8b5ff' : '#ffffff',
         opacity: '0.9',
@@ -106,12 +110,14 @@ export const getStopListColors = (
   // 次: 通過系の場合
   if (isThrough) {
     return {
-      background: isCommunity ? '#f0f4ff' : '#fafafa',  // 薄い青背景 or 薄いグレー
-      text: isCommunity ? '#5577ff' : '#888888',  // 中程度の青 or グレー
-      timeText: isDelayed 
-        ? (isCommunity ? '#dd5588' : '#ff6666')  // 遅延時: コミュニティは紫がかった赤、通常は明るい赤
-        : (isCommunity ? '#5577ff' : '#888888'),
-      seText: isCommunity ? '#5577ff' : '#888888',
+      background: isDark
+        ? (isCommunity ? '#1a1e2e' : '#1e1e1e')
+        : (isCommunity ? '#f0f4ff' : '#fafafa'),
+      text: isCommunity ? (isDark ? '#7799ff' : '#5577ff') : (isDark ? '#666666' : '#888888'),
+      timeText: isDelayed
+        ? (isCommunity ? '#dd5588' : '#ff6666')
+        : (isCommunity ? (isDark ? '#7799ff' : '#5577ff') : (isDark ? '#666666' : '#888888')),
+      seText: isCommunity ? (isDark ? '#7799ff' : '#5577ff') : (isDark ? '#666666' : '#888888'),
       opacity: '0.5',
     };
   }
@@ -120,19 +126,27 @@ export const getStopListColors = (
   if (isCommunity) {
     // コミュニティ投稿
     return {
-      background: isDelayed ? '#fff5f5' : '#ffffff',  // 遅延時は薄い赤背景
-      text: '#3355dd',  // 明確な青
-      timeText: isDelayed ? '#cc2266' : '#3355dd',  // 遅延時: 紫がかった赤
-      seText: '#3355dd',
+      background: isDark
+        ? (isDelayed ? '#2a1a2a' : '#1e1e2e')
+        : (isDelayed ? '#fff5f5' : '#ffffff'),
+      text: isDark ? '#8899ff' : '#3355dd',
+      timeText: isDelayed
+        ? (isDark ? '#ee4488' : '#cc2266')
+        : (isDark ? '#8899ff' : '#3355dd'),
+      seText: isDark ? '#8899ff' : '#3355dd',
       opacity: '0.95',
     };
   } else {
     // 公式データ
     return {
-      background: isDelayed ? '#fff5f5' : '#ffffff',  // 遅延時は薄い赤背景
-      text: '#000000',  // 黒
-      timeText: isDelayed ? '#dd0000' : '#000000',  // 遅延時: 標準的な赤
-      seText: '#000000',
+      background: isDark
+        ? (isDelayed ? '#2a1a1a' : '#1e1e2e')
+        : (isDelayed ? '#fff5f5' : '#ffffff'),
+      text: isDark ? '#e0e0e0' : '#000000',
+      timeText: isDelayed
+        ? (isDark ? '#ff5555' : '#dd0000')
+        : (isDark ? '#e0e0e0' : '#000000'),
+      seText: isDark ? '#e0e0e0' : '#000000',
       opacity: '0.95',
     };
   }

components/ActionSheetComponents/EachTrainInfoCore.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   View,
   Text,
@@ -8,7 +8,7 @@ import {
   BackHandler,
   Linking,
 } from "react-native";
-import { SheetManager, useScrollHandlers } from "react-native-actions-sheet";
+import { SheetManager } from "react-native-actions-sheet";
 import { getTrainType } from "../../lib/getTrainType";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useDeviceOrientationChange } from "../../stateBox/useDeviceOrientationChange";
@@ -22,7 +22,10 @@ import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
 import { HeaderText } from "./EachTrainInfoCore/HeaderText";
 import { useStationList } from "../../stateBox/useStationList";
+import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
+import { useThemeColors } from "@/lib/theme";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useResponsive } from "@/lib/responsive";
 
 // Custom hooks
 import { useTrainDiagramData } from "./EachTrainInfoCore/hooks/useTrainDiagramData";
@@ -39,17 +42,18 @@ export const EachTrainInfoCore = ({
   openStationACFromEachTrainInfo,
   from,
   navigate,
+  sheetOpened = false,
 }) => {
   const { stationList } = useStationList();
   const { allCustomTrainData } = useAllTrainDiagram();
+  const { colors, fixed } = useThemeColors();
+  const { verticalScale, moderateScale } = useResponsive();
   const { setTrainInfo } = useTrainMenu();
   const { height } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
+  const { getCurrentStationData } = useCurrentTrain();
 
-  const scrollHandlers = actionSheetRef
-    ? //@ts-ignore
-      useScrollHandlers("scrollview-1", actionSheetRef)
-    : null;
+  const scrollRef = useRef<any>(null);
   // Custom hooks for data management
   const { trainData, setTrainData, trueTrainID } = useTrainDiagramData(
     data.trainNum
@@ -71,17 +75,19 @@ export const EachTrainInfoCore = ({
   } = useExtendedStations(trainData, setTrainData);
 
   // UI state
-  const [showThrew, setShowThrew] = useState(false);
+  // 走行中の列車は初期状態から通過駅を表示する（後から showThrew を true に変更すると
+  // ActionSheet の onSheetLayout が再発火してスプリングアニメーションが途中でリスタートするため）
+  const [showThrew, setShowThrew] = useState(() => !!getCurrentStationData(data.trainNum));
   const [isJumped, setIsJumped] = useState(false);
 
   // Auto scroll to current position
   useAutoScroll(
     points,
     trainDataWithThrough,
-    scrollHandlers,
+    scrollRef,
     isJumped,
     setIsJumped,
-    setShowThrew
+    sheetOpened
   );
 
   // Back button handler
@@ -125,7 +131,6 @@ export const EachTrainInfoCore = ({
     } else {
       SheetManager.hide("EachTrainInfo").then(() => {
         setTimeout(() => {
-          // @ts-expect-error - SheetManager payload type is too restrictive
           SheetManager.show("EachTrainInfo", { payload });
         }, 200);
       });
@@ -135,20 +140,20 @@ export const EachTrainInfoCore = ({
   return (
     <View
       style={{
-        backgroundColor: "#0099CC",
+        backgroundColor: fixed.primary,
         borderTopLeftRadius: 5,
         borderTopRightRadius: 5,
-        borderColor: "dark",
+        borderColor: colors.border,
         borderWidth: 1,
       }}
     >
-      <View style={{ height: 26, width: "100%" }}>
+      <View style={{ height: verticalScale(26), width: "100%" }}>
         <View
           style={{
-            height: 6,
-            width: 45,
+            height: verticalScale(6),
+            width: moderateScale(45),
             borderRadius: 100,
-            backgroundColor: "#f0f0f0",
+            backgroundColor: colors.borderLight,
             marginVertical: 10,
             alignSelf: "center",
           }}
@@ -164,18 +169,18 @@ export const EachTrainInfoCore = ({
         navigate={navigate}
         from={from}
         fontLoaded={true}
-        scrollHandlers={scrollHandlers}
+        scrollRef={scrollRef}
       />
 
       <DynamicHeaderScrollView
         from={from}
         styles={styles as any}
-        scrollHandlers={scrollHandlers}
+        scrollRef={scrollRef}
         containerProps={{
           style: {
-            maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
+            maxHeight: height * 0.7,
             backgroundColor:
-              customTrainType.data === "notService" ? "#777777ff" : "white",
+              customTrainType.data === "notService" ? "#777777ff" : colors.surface,
           },
         }}
         shortHeader={
@@ -207,7 +212,7 @@ export const EachTrainInfoCore = ({
         }
       >
         {customTrainType.data === "notService" && (
-          <Text style={{ backgroundColor: "#ffffffc2", fontWeight: "bold" }}>
+          <Text style={{ backgroundColor: colors.surface, color: colors.text, fontWeight: "bold" }}>
             この列車には乗車できません。
           </Text>
         )}
@@ -219,10 +224,10 @@ export const EachTrainInfoCore = ({
                   onPress={() =>
                     extendToHeadStation(item.station, item.dia, index)
                   }
-                  style={styles.extendStationButton}
+                  style={[styles.extendStationButton, { borderColor: colors.textAccent }]}
                   key={`${item.station}-head${index}`}
                 >
-                  <Text style={styles.extendStationText}>
+                  <Text style={[styles.extendStationText, { color: colors.text }]}>
                     「本当の始発駅」を表示
                   </Text>
                 </TouchableOpacity>
@@ -238,9 +243,9 @@ export const EachTrainInfoCore = ({
             onPress={() =>
               Linking.openURL(`https://twitter.com/search?q=${data.trainNum}`)
             }
-            style={styles.twitterSearchButton}
+            style={[styles.twitterSearchButton, { borderColor: colors.textAccent, backgroundColor: colors.backgroundOverlay }]}
           >
-            <Text style={styles.extendStationText}>Twitterで検索</Text>
+            <Text style={[styles.extendStationText, { color: colors.text }]}>Twitterで検索</Text>
           </TouchableOpacity>
         )}
         {trainDataWithThrough.map((item, index, array) =>
@@ -251,7 +256,7 @@ export const EachTrainInfoCore = ({
               openTrainInfo={openTrainInfo}
             />
           ) : item.split(",")[1].includes(".") ? (
-            <></>
+            <React.Fragment key={`${item}-skip`} />
           ) : (
             <EachStopList
               i={item}
@@ -267,7 +272,7 @@ export const EachTrainInfoCore = ({
             />
           )
         )}
-        <Text style={styles.customDataNote}>
+        <Text style={[styles.customDataNote, { color: colors.textSecondary }]}>
           時刻が斜体,青色になっている時刻はコミュニティで追加されている独自データです。
         </Text>
         {tailStation.length > 0 &&
@@ -276,17 +281,17 @@ export const EachTrainInfoCore = ({
               !showTailStation.includes(index) && (
                 <TouchableOpacity
                   onPress={() => extendToTailStation(station, dia, index)}
-                  style={styles.extendStationButton}
+                  style={[styles.extendStationButton, { borderColor: colors.textAccent }]}
                   key={`${station}-tail${index}`}
                 >
-                  <Text style={styles.extendStationText}>
+                  <Text style={[styles.extendStationText, { color: colors.text }]}>
                     「本当の終着駅」を表示
                   </Text>
                 </TouchableOpacity>
               )
           )}
 
-        <View style={styles.bottomSpacer} />
+        <View style={[styles.bottomSpacer, { borderBottomColor: colors.borderLight }]} />
       </DynamicHeaderScrollView>
     </View>
   );
@@ -320,7 +325,6 @@ const styles = StyleSheet.create({
   extendStationText: {
     fontSize: 18,
     fontWeight: "bold",
-    color: "black",
   },
   twitterSearchButton: {
     padding: 10,
@@ -333,14 +337,12 @@ const styles = StyleSheet.create({
     backgroundColor: "#ffffffc2",
   },
   customDataNote: {
-    backgroundColor: "#ffffffc2",
   },
   bottomSpacer: {
     flexDirection: "row",
     padding: 8,
     borderBottomWidth: 1,
     borderBottomColor: "#f0f0f0",
-    backgroundColor: "#ffffffc2",
     flex: 1,
   },
 });