jrshikoku/components/ActionSheetComponents/JRSTraInfo.js

import React, { useEffect, useRef } from "react";
import {
  View,
  LayoutAnimation,
  ScrollView,
  Linking,
  Text,
  TouchableOpacity,
  Platform,
  BackHandler,
} from "react-native";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import dayjs from "dayjs";
import ActionSheet, {
  SheetManager,
  useScrollHandlers,
} from "react-native-actions-sheet";
import LottieView from "lottie-react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import ViewShot from "react-native-view-shot";
import * as Sharing from "expo-sharing";
import { useTrainDelayData } from "../../stateBox/useTrainDelayData";
import { BottomButtons } from "./JRSTraInfo/BottomButtons";
export const JRSTraInfo = () => {
  const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
    useTrainDelayData();
  const timeData = dayjs(getTime).format("HH:mm");
  const actionSheetRef = useRef(null);
  const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
  const insets = useSafeAreaInsets();
  const viewShot = useRef(null);

  const onCapture = async () => {
    const url = await viewShot.current.capture();

    const ok = await Sharing.isAvailableAsync();
    if (ok) {
      await Sharing.shareAsync(
        "file://" + url,
        (options = { mimeType: "image/jpeg", dialogTitle: "Share this image" })
      );
    }
  };

  return (
    <ActionSheet
      gestureEnabled
      CustomHeaderComponent={<></>}
      ref={actionSheetRef}
      isModal={Platform.OS == "ios"}
      containerStyle={
        Platform.OS == "android" ? { paddingBottom: insets.bottom } : {}
      }
      useBottomSafeAreaPadding={Platform.OS == "android"}
    >
      <Handler />
      <View
        style={{
          backgroundColor: "#0099CC",
          borderTopRadius: 5,
          borderColor: "dark",
          borderWidth: 1,
        }}
      >
        <ViewShot ref={viewShot} options={{ format: "jpg" }}>
          <View
            style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}
          >
            <View
              style={{
                height: 6,
                width: 45,
                borderRadius: 100,
                backgroundColor: "#f0f0f0",
                marginVertical: 10,
                alignSelf: "center",
              }}
            />
          </View>
          <View
            style={{
              padding: 10,
              flexDirection: "row",
              alignItems: "center",
              backgroundColor: "#0099CC",
            }}
          >
            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
              列車遅延速報EX
            </Text>
            <View style={{ flex: 1 }} />
            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
              {timeData}
            </Text>
            <Ionicons
              name="reload"
              color="white"
              size={30}
              style={{ margin: 5 }}
              onPress={() => {
                LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
              }}
            />
          </View>
          <ScrollView {...scrollHandlers}>
            <View
              style={{
                padding: 10,
                backgroundColor: "white",
              }}
            >
              {loadingDelayData ? (
                <View style={{ alignItems: "center" }}>
                  <LottieView
                    autoPlay
                    loop
                    style={{ width: 150, height: 150, backgroundColor: "#fff" }}
                    source={require("../../assets/51690-loading-diamonds.json")}
                  />
                </View>
              ) : delayData ? (
                delayData.map((d) => {
                  let data = d.split(" ");
                  return (
                    <View style={{ flexDirection: "row" }} key={data[1]}>
                      <Text style={{ flex: 15, fontSize: 18 }}>
                        {data[0].replace("\n", "")}
                      </Text>
                      <Text style={{ flex: 5, fontSize: 18 }}>{data[1]}</Text>
                      <Text style={{ flex: 6, fontSize: 18 }}>{data[3]}</Text>
                    </View>
                  );
                })
              ) : (
                <Text>現在、5分以上の遅れはありません。</Text>
              )}
            </View>

            <View style={{ padding: 10, backgroundColor: "#0099CC" }}>
              <Text
                style={{ fontSize: 20, fontWeight: "bold", color: "white" }}
              >
                列車遅延情報EXについて
              </Text>
              <Text style={{ color: "white" }}>
                列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
              </Text>
            </View>
          </ScrollView>
        </ViewShot>
        <BottomButtons onCapture={onCapture} />
      </View>
    </ActionSheet>
  );
};
const Handler = () => {
  useEffect(() => {
    const backAction = () => {
      SheetManager.hide("JRSTraInfo");
      return true;
    };
    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );
    return () => backHandler.remove();
  }, []);
  return <></>;
};