メニューにお気に入りが無い場合の要素を追加

components/Menu/Carousel/CarouselBox.tsx

@@ -1,7 +1,13 @@
 import Sign from "@/components/駅名表/Sign";
 import React, { useEffect, useRef, useState } from "react";
 import { AS } from "@/storageControl";
-import { useWindowDimensions, View, LayoutAnimation } from "react-native";
+import {
+  useWindowDimensions,
+  View,
+  LayoutAnimation,
+  TouchableOpacity,
+  Text,
+} from "react-native";
 import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 import { SheetManager } from "react-native-actions-sheet";
 import { StationNumber } from "../StationPagination";
@@ -13,6 +19,7 @@ export const CarouselBox = ({
   setListIndex,
   listIndex,
   navigate,
+  stationListMode
 }) => {
   const carouselRef = useRef<ICarouselInstance>(null);
   const { height, width } = useWindowDimensions();
@@ -66,12 +73,36 @@ export const CarouselBox = ({
         key={item[0].StationNumber}
       >
         <View style={{ flex: 1 }} />
-        <Sign
+        {item[0].StationNumber != "null" ? (
-          stationID={item[0].StationNumber}
+          <Sign
-          isCurrentStation={item == nearPositionStation}
+            stationID={item[0].StationNumber}
-          oP={oPSign}
+            isCurrentStation={item == nearPositionStation}
-          oLP={oLPSign}
+            oP={oPSign}
-        />
+            oLP={oLPSign}
+          />
+        ) : (
+          <TouchableOpacity
+            style={{
+              width: width * 0.8,
+              height: ((width * 0.8) / 20) * 9,
+              borderColor: "#0099CC",
+              borderWidth: 1,
+              backgroundColor: "white",
+            }}
+          >
+            <View
+              style={{
+                flex: 1,
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Text style={{ color: "#0099CC", fontSize: 20 }}>
+                {stationListMode == "position" ? "現在地の近くに駅がありません。" : "お気に入りリストがありません。お気に入りの駅を追加しよう！"}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        )}
         <View style={{ flex: 1 }} />
       </View>
     );
@@ -80,7 +111,11 @@ export const CarouselBox = ({
     <View style={{ flex: 1, paddingTop: 10 }}>
       <Carousel
         ref={carouselRef}
-        data={listUpStation}
+        data={
+          listUpStation.length > 0
+            ? listUpStation
+            : [[{ StationNumber: "null" }]]
+        }
         height={(((width / 100) * 80) / 20) * 9 + 10}
         pagingEnabled={true}
         snapEnabled={true}

menu.js

@@ -312,7 +312,7 @@ export default function Menu(props) {
           />
         )}
 
-        {listUpStation.length != 0 && originalStationList.length != 0 && (
+        {originalStationList.length != 0 && (
           <>
             <CarouselBox
               {...{
@@ -322,6 +322,7 @@ export default function Menu(props) {
                 setListIndex,
                 listIndex,
                 navigate,
+                stationListMode
               }}
             />
             {listUpStation[listIndex] && (