ActionSheetのScrollViewの不具合を修正、同時にデザイン調整

components/ActionSheetComponents/EachTrainInfo.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import {
   View,
   LayoutAnimation,
@@ -11,7 +11,10 @@ import {
   Platform,
 } from "react-native";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import ActionSheet, { SheetManager } from "react-native-actions-sheet";
+import ActionSheet, {
+  SheetManager,
+  useScrollHandlers,
+} from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
 import LottieView from "lottie-react-native";
 import trainList from "../../assets/originData/trainList";
@@ -239,13 +242,18 @@ export const EachTrainInfo = (props) => {
       .replace("マリン", "マリンライナー")
       .replace("ライナーライナー", "ライナー");
   };
-
+  const actionSheetRef = useRef(null);
+  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
   return (
-    <ActionSheet gestureEnabled={isTop} CustomHeaderComponent={<></>}>
+    <ActionSheet
+      gestureEnabled={isTop}
+      CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+    >
       <View
         style={{
           backgroundColor: "#0099CC",
-          borderRadius: 5,
+          borderTopRadius: 5,
           borderColor: "dark",
           borderWidth: 1,
         }}
@@ -504,21 +512,19 @@ export const EachTrainInfo = (props) => {
           </ScrollView>
         )}
         <ScrollView
-          style={{ maxHeight: heightPercentageToDP("55%") }}
+          {...scrollHandlers}
+          style={{
+            maxHeight: heightPercentageToDP(
+              from == "AllTrainDiagramView" ? "70%" : "50%"
+            ),
+          }}
           nestedScrollEnabled
           onScroll={(e) => {
             if (!Platform.OS !== "android") return;
             setIsTop(e.nativeEvent.contentOffset.y < 0);
           }}
         >
-          <View
+          <View style={{ padding: 10, backgroundColor: "white" }}>
-            style={{
-              padding: 10,
-              backgroundColor: "white",
-              borderBottomLeftRadius: 5,
-              borderBottomRightRadius: 5,
-            }}
-          >
             <View style={{ alignItems: "center" }}>
               {/* <LottieView
                 autoPlay

components/ActionSheetComponents/JRSTraInfo.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import {
   View,
   LayoutAnimation,
@@ -8,18 +8,24 @@ import {
   TouchableOpacity,
 } from "react-native";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import ActionSheet from "react-native-actions-sheet";
+import ActionSheet, { useScrollHandlers } from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
 import { useTrainDelayData } from "../../stateBox/useTrainDelayData";
 export const JRSTraInfo = () => {
   const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
     useTrainDelayData();
+  const actionSheetRef = useRef(null);
+  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
   return (
-    <ActionSheet gestureEnabled CustomHeaderComponent={<></>}>
+    <ActionSheet
+      gestureEnabled
+      CustomHeaderComponent={<></>}
+      ref={actionSheetRef}
+    >
       <View
         style={{
           backgroundColor: "#0099CC",
-          borderRadius: 5,
+          borderTopRadius: 5,
           borderColor: "dark",
           borderWidth: 1,
         }}
@@ -63,13 +69,11 @@ export const JRSTraInfo = () => {
             }}
           />
         </View>
-        <ScrollView>
+        <ScrollView {...scrollHandlers}>
           <View
             style={{
               padding: 10,
               backgroundColor: "white",
-              borderBottomLeftRadius: 5,
-              borderBottomRightRadius: 5,
             }}
           >
             {loadingDelayData ? (

components/ActionSheetComponents/StationDeteilView.js

@@ -50,7 +50,7 @@ export const StationDeteilView = (props) => {
         key={currentStation}
         style={{
           backgroundColor: "white",
-          borderRadius: 5,
+          borderTopRadius: 5,
           borderColor: "dark",
           borderWidth: 1,
         }}