linter調整

StatusbarDetect.js

@@ -1,16 +1,10 @@
-import React from 'react';
+import React from "react";
-import {Platform, StatusBar, View} from 'react-native';
+import { Platform, StatusBar, View } from "react-native";
 
 export default function StatusbarDetect() {
   if (Platform.OS == "ios") {
-        return (
+    return <StatusBar barStyle="dark-content" />;
-            <StatusBar barStyle="dark-content"/>
+  } else if (Platform.OS == "android") {
-        );
+    return <View />;
   }
-    else if(Platform.OS == "android"){
-        return (
-            <View/>
-        );
-    }
-  
 }

TestArea.js

@@ -1,21 +1,23 @@
-import React, { Component, useEffect, useState } from 'react';
+import React, { Component, useEffect, useState } from "react";
-import {StatusBar,View,ScrollView,Linking,Text } from 'react-native';
+import { StatusBar, View, ScrollView, Linking, Text } from "react-native";
-import Constants from 'expo-constants';
+import Constants from "expo-constants";
-import { ListItem } from 'react-native-elements';
+import { ListItem } from "react-native-elements";
-import Icon from 'react-native-vector-icons/Entypo';
+import Icon from "react-native-vector-icons/Entypo";
-import StatusbarDetect from './StatusbarDetect';
+import StatusbarDetect from "./StatusbarDetect";
 var Status = StatusbarDetect();
 let a = [];
 export default function TestArea(props) {
   const [data, setdata] = useState(null);
   useEffect(() => {
-  data==null ? test().then(res=>{
+    data == null
+      ? test().then((res) => {
           //console.log(res);
           setdata(res);
-  }):null
+        })
-  },[data])
+      : null;
+  }, [data]);
   return (
-    <View style={{height:"100%",paddingTop: Constants.statusBarHeight,}}>
+    <View style={{ height: "100%", paddingTop: Constants.statusBarHeight }}>
       {Status}
       <ScrollView>
         <Text>TEST AREA!!</Text>
@@ -26,22 +28,45 @@ export default function TestArea(props) {
 }
 
 async function test() {
-  return fetch('https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train', {
+  return fetch("https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train", {
     headers: {
-        'authority': 'train.jr-shikoku.co.jp',
+      authority: "train.jr-shikoku.co.jp",
-        'cache-control': 'no-cache',
+      "cache-control": "no-cache",
-        'pragma': 'no-cache',
+      pragma: "no-cache",
-        'if-modified-since': 'Thu, 01 Jun 1970 00:00:00 GMT',
+      "if-modified-since": "Thu, 01 Jun 1970 00:00:00 GMT",
-        'accept': '*/*',
+      accept: "*/*",
-        'sec-fetch-site': 'same-origin',
+      "sec-fetch-site": "same-origin",
-        'sec-fetch-mode': 'cors',
+      "sec-fetch-mode": "cors",
-        'referer': 'https://train.jr-shikoku.co.jp/sp.html'
+      referer: "https://train.jr-shikoku.co.jp/sp.html",
-    }
+    },
-  }).then(res=>res.json()).then(D=>{
+  })
+    .then((res) => res.json())
+    .then((D) => {
       let d = [];
-    D.forEach(element => {
+      D.forEach((element) => {
-      console.log(element)
+        console.log(element);
-      d.push(<ListItem title={"Direction:"+element.Direction+" Index:"+element.Index+" Line:"+element.Line+" Pos:"+element.Pos+" PosNum:"+element.PosNum+" TrainNum:"+element.TrainNum+" Type:"+element.Type+" Delay:"+element.delay}/>);
+        d.push(
+          <ListItem
+            title={
+              "Direction:" +
+              element.Direction +
+              " Index:" +
+              element.Index +
+              " Line:" +
+              element.Line +
+              " Pos:" +
+              element.Pos +
+              " PosNum:" +
+              element.PosNum +
+              " TrainNum:" +
+              element.TrainNum +
+              " Type:" +
+              element.Type +
+              " Delay:" +
+              element.delay
+            }
+          />
+        );
       });
       a = d;
       return d;

UpdateAsync.js

@@ -1,11 +1,27 @@
-import { ToastAndroid, } from 'react-native';
+import { ToastAndroid } from "react-native";
-import * as Updates from 'expo-updates';
+import * as Updates from "expo-updates";
 
 export function UpdateAsync() {
-    Updates.checkForUpdateAsync().then(update=>{
+  Updates.checkForUpdateAsync()
+    .then((update) => {
       if (update.isAvailable) {
-            ToastAndroid.showWithGravityAndOffset('アプリのデータを更新しています。',ToastAndroid.LONG,ToastAndroid.BOTTOM,25,50,);
+        ToastAndroid.showWithGravityAndOffset(
+          "アプリのデータを更新しています。",
+          ToastAndroid.LONG,
+          ToastAndroid.BOTTOM,
+          25,
+          50
+        );
         Updates.fetchUpdateAsync().then(() => Updates.reloadAsync());
       }
-    }).catch(e=>ToastAndroid.showWithGravityAndOffset(e.toString(),ToastAndroid.LONG,ToastAndroid.BOTTOM,25,50,))
+    })
+    .catch((e) =>
+      ToastAndroid.showWithGravityAndOffset(
+        e.toString(),
+        ToastAndroid.LONG,
+        ToastAndroid.BOTTOM,
+        25,
+        50
+      )
+    );
 }

components/custom-train-data.js

@@ -20,13 +20,25 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "25M":
     case "27M":
     case "29M":
-            return {type:"LTDEXP",trainName:"しおかぜ",trainIcon:'http://www.trainfrontview.net/b/s8000nr.png',trainNumDistance:0,info:"いしづちと併結 / 8000系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "しおかぜ",
+        trainIcon: "http://www.trainfrontview.net/b/s8000nr.png",
+        trainNumDistance: 0,
+        info: "いしづちと併結 / 8000系で運転",
+      };
     //8000 アンパン
     case "10M":
     case "22M":
     case "9M":
     case "21M":
-          return {type:"LTDEXP",trainName:"しおかぜ",trainIcon:'http://www.trainfrontview.net/f/s8000ap.png',trainNumDistance:0,info:"いしづちと併結 / アンパンマン列車で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "しおかぜ",
+        trainIcon: "http://www.trainfrontview.net/f/s8000ap.png",
+        trainNumDistance: 0,
+        info: "いしづちと併結 / アンパンマン列車で運転",
+      };
     //8600
     case "8M":
     case "12M":
@@ -36,7 +48,13 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "11M":
     case "19M":
     case "23M":
-          return {type:"LTDEXP",trainName:"しおかぜ",trainIcon:'http://www.trainfrontview.net/b/s8600.png',trainNumDistance:0,info:"いしづちと併結 / 8600系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "しおかぜ",
+        trainIcon: "http://www.trainfrontview.net/b/s8600.png",
+        trainNumDistance: 0,
+        info: "いしづちと併結 / 8600系で運転",
+      };
 
     //いしづちメイン
     //8000 ノーマル
@@ -58,14 +76,26 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "1025M":
     case "1027M":
     case "1029M":
-          return {type:"LTDEXP",trainName:"いしづち",trainIcon:'http://www.trainfrontview.net/b/s8000no.png',trainNumDistance:1000,info:"しおかぜと併結 / 8000系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "いしづち",
+        trainIcon: "http://www.trainfrontview.net/b/s8000no.png",
+        trainNumDistance: 1000,
+        info: "しおかぜと併結 / 8000系で運転",
+      };
 
     //8000 アンパン
     case "1010M":
     case "1022M":
     case "1009M":
     case "1021M":
-          return {type:"LTDEXP",trainName:"いしづち",trainIcon:'http://www.trainfrontview.net/f/s8000ap.png',trainNumDistance:1000,info:"しおかぜと併結 / アンパンマン列車で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "いしづち",
+        trainIcon: "http://www.trainfrontview.net/f/s8000ap.png",
+        trainNumDistance: 1000,
+        info: "しおかぜと併結 / アンパンマン列車で運転",
+      };
 
     //8600
     case "1008M":
@@ -76,25 +106,55 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "1011M":
     case "1019M":
     case "1023M":
-          return {type:"LTDEXP",trainName:"いしづち",trainIcon:'http://www.trainfrontview.net/b/s8600_isz.png',trainNumDistance:1000,info:"しおかぜと併結 / 8600系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "いしづち",
+        trainIcon: "http://www.trainfrontview.net/b/s8600_isz.png",
+        trainNumDistance: 1000,
+        info: "しおかぜと併結 / 8600系で運転",
+      };
 
     //MEXP
     //8000
     case "1092M":
-          return {type:"LTDEXP",trainName:"モーニングEXP高松",trainIcon:'http://www.trainfrontview.net/b/s8000no.png',trainNumDistance:null,info:"8000系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "モーニングEXP高松",
+        trainIcon: "http://www.trainfrontview.net/b/s8000no.png",
+        trainNumDistance: null,
+        info: "8000系で運転",
+      };
     //8600
     case "1091M":
-          return {type:"LTDEXP",trainName:"モーニングEXP松山",trainIcon:'http://www.trainfrontview.net/b/s8600_isz.png',trainNumDistance:null,info:"8600系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "モーニングEXP松山",
+        trainIcon: "http://www.trainfrontview.net/b/s8600_isz.png",
+        trainNumDistance: null,
+        info: "8600系で運転",
+      };
     //三桁いしづち
     //8000 アンパン
     case "1041M":
     case "1044M":
-          return {type:"LTDEXP",trainName:"いしづち",trainIcon:'http://www.trainfrontview.net/f/s8000ap.png',trainNumDistance:940,info:"アンパンマン列車で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "いしづち",
+        trainIcon: "http://www.trainfrontview.net/f/s8000ap.png",
+        trainNumDistance: 940,
+        info: "アンパンマン列車で運転",
+      };
     //8600
     case "1043M":
     case "1042M":
     case "1046M":
-          return {type:"LTDEXP",trainName:"いしづち",trainIcon:'http://www.trainfrontview.net/b/s8600_isz.png',trainNumDistance:940,info:"8600系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "いしづち",
+        trainIcon: "http://www.trainfrontview.net/b/s8600_isz.png",
+        trainNumDistance: 940,
+        info: "8600系で運転",
+      };
 
     //南風 2700ノーマル
     case "34D":
@@ -115,7 +175,13 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "51D":
     case "53D":
     case "55D":
-          return {type:"LTDEXP",trainName:"南風",trainIcon:'http://www.trainfrontview.net/b/s2700.png',trainNumDistance:30,info:"2700系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "南風",
+        trainIcon: "http://www.trainfrontview.net/b/s2700.png",
+        trainNumDistance: 30,
+        info: "2700系で運転",
+      };
     //2700アンパン
     case "32D":
     case "36D":
@@ -127,18 +193,28 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "45D":
     case "49D":
     case "57D":
-            return {type:"LTDEXP",trainName:"南風",trainIcon:'http://www.trainfrontview.net/f/s2700apr.png',trainNumDistance:30,info:"アンパンマン列車で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "南風",
+        trainIcon: "http://www.trainfrontview.net/f/s2700apr.png",
+        trainNumDistance: 30,
+        info: "アンパンマン列車で運転",
+      };
       break;
 
-      
-        
     //うずしお
     //2700
     case "5006D":
     case "5022D":
     case "5013D":
     case "5029D":
-            return {type:"LTDEXP",trainName:"うずしお",trainIcon:'http://www.trainfrontview.net/b/s2700_uzu.png',trainNumDistance:5000,info:"南風と宇多津で併結 / 高松-宇多津間進行方向逆転 / 2700系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "うずしお",
+        trainIcon: "http://www.trainfrontview.net/b/s2700_uzu.png",
+        trainNumDistance: 5000,
+        info: "南風と宇多津で併結 / 高松-宇多津間進行方向逆転 / 2700系で運転",
+      };
     case "3002D":
     case "3004D":
     case "3010D":
@@ -158,7 +234,13 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "3027D":
     case "3031D":
     case "3033D":
-          return {type:"LTDEXP",trainName:"うずしお",trainIcon:'http://www.trainfrontview.net/b/s2700_uzu.png',trainNumDistance:3000,info:"2700系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "うずしお",
+        trainIcon: "http://www.trainfrontview.net/b/s2700_uzu.png",
+        trainNumDistance: 3000,
+        info: "2700系で運転",
+      };
 
     //2600
     case "3008D":
@@ -169,12 +251,24 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "3011D":
     case "3017D":
     case "3023D":
-          return {type:"LTDEXP",trainName:"うずしお",trainIcon:'http://www.trainfrontview.net/b/s2600.png',trainNumDistance:3000,info:"2600系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "うずしお",
+        trainIcon: "http://www.trainfrontview.net/b/s2600.png",
+        trainNumDistance: 3000,
+        info: "2600系で運転",
+      };
 
     //キハ185
     case "3009D":
     case "3032D":
-          return {type:"LTDEXP",trainName:"うずしお",trainIcon:'http://www.trainfrontview.net/b/s185tu_uzu.png',trainNumDistance:3000,info:"キハ185系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "うずしお",
+        trainIcon: "http://www.trainfrontview.net/b/s185tu_uzu.png",
+        trainNumDistance: 3000,
+        info: "キハ185系で運転",
+      };
 
     //マリンライナー
     case "3104M":
@@ -245,21 +339,45 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "3167M":
     case "3169M":
     case "3175M":
-          return {type:"Rapid",trainName:"マリンライナー",trainIcon:'http://www.trainfrontview.net/b/s5001.png',trainNumDistance:3100,info:""};
+      return {
+        type: "Rapid",
+        trainName: "マリンライナー",
+        trainIcon: "http://www.trainfrontview.net/b/s5001.png",
+        trainNumDistance: 3100,
+        info: "",
+      };
     case "3102M":
     case "3101M":
     case "3103M":
     case "3171M":
     case "3173M":
-          return {type:"Rapid",trainName:"マリンライナー",trainIcon:'http://www.trainfrontview.net/b/s5001k.png',trainNumDistance:3100,info:""};
+      return {
+        type: "Rapid",
+        trainName: "マリンライナー",
+        trainIcon: "http://www.trainfrontview.net/b/s5001k.png",
+        trainNumDistance: 3100,
+        info: "",
+      };
 
     //サンライズ瀬戸
     case "5032M":
     case "5031M":
-          return {type:"NightLTDEXP",trainName:"サンライズ瀬戸",trainIcon:'http://www.trainfrontview.net/b/w285.png',trainNumDistance:null,info:""};
+      return {
+        type: "NightLTDEXP",
+        trainName: "サンライズ瀬戸",
+        trainIcon: "http://www.trainfrontview.net/b/w285.png",
+        trainNumDistance: null,
+        info: "",
+      };
     case "8041M": //琴平延長高松迄
     case "8031M": //琴平延長高松以降
-          return {type:"NightLTDEXP",trainName:"サンライズ瀬戸",trainIcon:'http://www.trainfrontview.net/b/w285.png',trainNumDistance:null,info:"琴平延長運転日"};
+      return {
+        type: "NightLTDEXP",
+        trainName: "サンライズ瀬戸",
+        trainIcon: "http://www.trainfrontview.net/b/w285.png",
+        trainNumDistance: null,
+        info: "琴平延長運転日",
+      };
 
     //宇和海
     //2000 ノーマル
@@ -283,7 +401,13 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "1077D":
     case "1079D":
     case "1053D":
-          return {type:"LTDEXP",trainName:"宇和海",trainIcon:'http://www.trainfrontview.net/b/s2000_uwa.png',trainNumDistance:1050,info:"2000系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "宇和海",
+        trainIcon: "http://www.trainfrontview.net/b/s2000_uwa.png",
+        trainNumDistance: 1050,
+        info: "2000系で運転",
+      };
     //2000 アンパン込み
     case "1054D":
     case "1060D":
@@ -297,7 +421,13 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "1063D":
     case "1067D":
     case "1081D":
-          return {type:"LTDEXP",trainName:"宇和海",trainIcon:'http://www.trainfrontview.net/f/s2002a.png',trainNumDistance:1050,info:"アンパン列車で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "宇和海",
+        trainIcon: "http://www.trainfrontview.net/f/s2002a.png",
+        trainNumDistance: 1050,
+        info: "アンパン列車で運転",
+      };
     //しまんと
     case "2002D":
     case "2004D":
@@ -307,7 +437,13 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "2003D":
     case "2005D":
     case "2007D":
-          return {type:"LTDEXP",trainName:"しまんと",trainIcon:'http://www.trainfrontview.net/b/s2700_smn.png',trainNumDistance:2000,info:"2700系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "しまんと",
+        trainIcon: "http://www.trainfrontview.net/b/s2700_smn.png",
+        trainNumDistance: 2000,
+        info: "2700系で運転",
+      };
 
     //あしずり 2000
     case "2074D":
@@ -320,8 +456,13 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "2077D":
     case "2081D":
     case "2083D":
-          return {type:"LTDEXP",trainName:"あしずり",trainIcon:'http://www.trainfrontview.net/b/s2000_asi.png',trainNumDistance:2070,info:"2000系で運転"};
+      return {
-
+        type: "LTDEXP",
+        trainName: "あしずり",
+        trainIcon: "http://www.trainfrontview.net/b/s2000_asi.png",
+        trainNumDistance: 2070,
+        info: "2000系で運転",
+      };
 
     //あしずり 2700
     case "2078D":
@@ -331,7 +472,13 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "2079D":
     case "2085D":
     case "2072D":
-          return {type:"LTDEXP",trainName:"あしずり",trainIcon:'http://www.trainfrontview.net/b/s2700_asi.png',trainNumDistance:2070,info:"2700系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "あしずり",
+        trainIcon: "http://www.trainfrontview.net/b/s2700_asi.png",
+        trainNumDistance: 2070,
+        info: "2700系で運転",
+      };
 
     //剣山
     case "4002D":
@@ -345,20 +492,35 @@ export const customTrainDataDetector = (TrainNumber) =>{
     case "4007D":
     case "4009D":
     case "4011D":
-          return {type:"LTDEXP",trainName:"剣山",trainIcon:'http://www.trainfrontview.net/b/s185tu.png',trainNumDistance:4000,info:"キハ185系で運転"};
+      return {
+        type: "LTDEXP",
+        trainName: "剣山",
+        trainIcon: "http://www.trainfrontview.net/b/s185tu.png",
+        trainNumDistance: 4000,
+        info: "キハ185系で運転",
+      };
 
     //むろと
     case "5051D":
     case "5052D":
-          return {type:"LTDEXP",trainName:"むろと",trainIcon:'http://www.trainfrontview.net/b/s185_mrt.png',trainNumDistance:5050,info:"キハ185系で運転"};
+      return {
-
+        type: "LTDEXP",
-      
+        trainName: "むろと",
+        trainIcon: "http://www.trainfrontview.net/b/s185_mrt.png",
+        trainNumDistance: 5050,
+        info: "キハ185系で運転",
+      };
 
     //よしのがわトロッコ
     case "8452D":
     case "8451D":
-          return {type:"LTDEXP",trainName:"よしのがわトロッコ",trainIcon:'http://www.trainfrontview.net/f/s185to_ai.png',trainNumDistance:null,info:""};
+      return {
-
+        type: "LTDEXP",
+        trainName: "よしのがわトロッコ",
+        trainIcon: "http://www.trainfrontview.net/f/s185to_ai.png",
+        trainNumDistance: null,
+        info: "",
+      };
 
     //岡山高松アントロ
     case "8176D":
@@ -366,33 +528,59 @@ export const customTrainDataDetector = (TrainNumber) =>{
     //岡山琴平アントロ
     case "8277D":
     case "8278D":
-          return {type:"LTDEXP",trainName:"アンパンマントロッコ",trainIcon:'http://www.trainfrontview.net/f/s32to4.png',trainNumDistance:null,info:""};
+      return {
-
+        type: "LTDEXP",
+        trainName: "アンパンマントロッコ",
+        trainIcon: "http://www.trainfrontview.net/f/s32to4.png",
+        trainNumDistance: null,
+        info: "",
+      };
 
     //伊予灘ものがたり
     case "8901D":
     case "8903D":
     case "8902D":
     case "8904D":
-          return {type:"LTDEXP",trainName:"伊予灘ものがたり",trainIcon:'http://www.trainfrontview.net/b/s185iyoy.png',trainNumDistance:null,info:""};
+      return {
-
+        type: "LTDEXP",
-      
+        trainName: "伊予灘ものがたり",
+        trainIcon: "http://www.trainfrontview.net/b/s185iyoy.png",
+        trainNumDistance: null,
+        info: "",
+      };
 
     //千年ものがたり
     case "8011D":
     case "8012D":
-          return {type:"LTDEXP",trainName:"四国まんなか千年ものがたり",trainIcon:'http://www.trainfrontview.net/b/s185mm1.png',trainNumDistance:null,info:""};
+      return {
-
+        type: "LTDEXP",
+        trainName: "四国まんなか千年ものがたり",
+        trainIcon: "http://www.trainfrontview.net/b/s185mm1.png",
+        trainNumDistance: null,
+        info: "",
+      };
 
     //夜明けものがたり
     case "8053D":
     case "8054D":
     case "8062D":
     case "8063D":
-          return {type:"LTDEXP",trainName:"時代の夜明けのものがたり",trainIcon:'http://www.trainfrontview.net/b/s185ym1.png',trainNumDistance:null,info:""};
+      return {
+        type: "LTDEXP",
+        trainName: "時代の夜明けのものがたり",
+        trainIcon: "http://www.trainfrontview.net/b/s185ym1.png",
+        trainNumDistance: null,
+        info: "",
+      };
 
     default:
-            return {type:"Normal",trainName:"",trainIcon:null,trainNumDistance:null,info:null};
+      return {
+        type: "Normal",
+        trainName: "",
+        trainIcon: null,
+        trainNumDistance: null,
+        info: null,
+      };
       break;
   }
-}
+};

components/発車時刻表/LED_vidion.js

@@ -1,8 +1,19 @@
-import React, { Component, useRef, useState, useEffect } from 'react';
+import React, { Component, useRef, useState, useEffect } from "react";
-import {StatusBar,View,LayoutAnimation,ScrollView,Linking,Text,TouchableOpacity } from 'react-native';
+import {
-import { Switch } from 'react-native-elements';
+  StatusBar,
-import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
+  View,
-import { customTrainDataDetector } from '../custom-train-data';
+  LayoutAnimation,
+  ScrollView,
+  Linking,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import { Switch } from "react-native-elements";
+import {
+  widthPercentageToDP as wp,
+  heightPercentageToDP as hp,
+} from "react-native-responsive-screen";
+import { customTrainDataDetector } from "../custom-train-data";
 
 let diagramData = undefined;
 
@@ -38,9 +49,9 @@ let diagramData = undefined;
 export default function LED_vision(props) {
   const HeaderConfig = {
     headers: {
-          'referer': 'https://train.jr-shikoku.co.jp/sp.html'
+      referer: "https://train.jr-shikoku.co.jp/sp.html",
-        }
+    },
-    }
+  };
   const [trainDiagram, setTrainDiagram] = useState(null);
   const [stationDiagram, setStationDiagram] = useState(null);
   const [currentTrain, setCurrentTrain] = useState(null);
@@ -48,22 +59,26 @@ export default function LED_vision(props){
   const [trainIDSwitch, setTrainIDSwitch] = useState(false);
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
   useEffect(() => {
-        fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia', HeaderConfig).then(response => response.text()).then(d=>{
+    fetch(
-            const val = d.replace("[\r\n","").split(',\r\n');
+      "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia",
+      HeaderConfig
+    )
+      .then((response) => response.text())
+      .then((d) => {
+        const val = d.replace("[\r\n", "").split(",\r\n");
         let returnData = {};
-            val.forEach(element =>{
+        val.forEach((element) => {
           try {
             let data = JSON.parse(element);
-                    Object.keys(data).forEach( key => returnData[key] = data[key] );
+            Object.keys(data).forEach((key) => (returnData[key] = data[key]));
-                }catch(e){
+          } catch (e) {}
-                }
+        });
+        return returnData;
       })
-            return(returnData);
+      .then((trainDiagram) => {
-        }).then((trainDiagram)=>{
         let returnData = {};
         if (trainDiagram) {
-                Object.keys(trainDiagram).forEach( key => {
+          Object.keys(trainDiagram).forEach((key) => {
-                
             if (trainDiagram[key].match(props.station.Station_JP)) {
               returnData[key] = trainDiagram[key];
             }
@@ -71,8 +86,7 @@ export default function LED_vision(props){
         }
         setTrainDiagram(trainDiagram);
         setStationDiagram(returnData);
-
+      });
-        })
   }, []);
   const getTime = () => {
     const returnData = [];
@@ -87,100 +101,141 @@ export default function LED_vision(props){
           if (data.match(props.station.Station_JP)) {
             if (data.match(",発,")) {
               returnData.time = data.split(",発,")[1];
-                        }
+            } else {
-                        else{
               returnData.time = data.split(",着,")[1];
-                            returnData.lastStation = "当駅止"
+              returnData.lastStation = "当駅止";
             }
-                        
           }
-                })
+        });
         return returnData;
       })();
       returnData.push({ train: d, time: a.time, lastStation: a.lastStation });
-        })
+    });
 
-        return (returnData.sort((a,b)=> {
+    return returnData.sort((a, b) => {
       if (parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0])) {
         return -1;
-            }
+      } else if (
-            else if(parseInt(a.time.split(":")[0]) > parseInt(b.time.split(":")[0])){
+        parseInt(a.time.split(":")[0]) > parseInt(b.time.split(":")[0])
+      ) {
         return 1;
-            }
+      } else if (
-            else if(parseInt(a.time.split(":")[1]) < parseInt(b.time.split(":")[1])){
+        parseInt(a.time.split(":")[1]) < parseInt(b.time.split(":")[1])
+      ) {
         return -1;
-            }
+      } else if (
-            else if(parseInt(a.time.split(":")[1]) > parseInt(b.time.split(":")[1])){
+        parseInt(a.time.split(":")[1]) > parseInt(b.time.split(":")[1])
+      ) {
         return 1;
       }
-        }))
+    });
-
   };
   const trainTimeAndNumber = stationDiagram != null ? getTime() : null;
   useEffect(() => {
-        const getCurrentTrain = () =>fetch("https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train", HeaderConfig).then(response => response.json()).then(d=>d.map(x=>({num:x.TrainNum,delay:x.delay}))).then(d=>setCurrentTrain(d));
+    const getCurrentTrain = () =>
+      fetch(
+        "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
+        HeaderConfig
+      )
+        .then((response) => response.json())
+        .then((d) => d.map((x) => ({ num: x.TrainNum, delay: x.delay })))
+        .then((d) => setCurrentTrain(d));
     getCurrentTrain();
-        const currentTrainInterval = setInterval(()=>getCurrentTrain(),15000)
+    const currentTrainInterval = setInterval(() => getCurrentTrain(), 15000);
     return () => clearInterval(currentTrainInterval);
+  }, []);
 
-    },[])
+  const filtering = (d) => currentTrain.map((m) => m.num).includes(d.train);
-    
+  console.log(new Date());
-    const filtering = d =>  currentTrain.map(m=>m.num).includes(d.train)
+  const timeFiltering = (d) => {
-        console.log(new Date())
-    const timeFiltering = d => {
     const date = new Date();
     const newDate = new Date();
     let data = d.time.split(":");
-        let delay = isNaN(currentTrain.filter(data =>data.num == d.train)[0].delay) ? 0 : currentTrain.filter(data =>data.num == d.train)[0].delay;
+    let delay = isNaN(
+      currentTrain.filter((data) => data.num == d.train)[0].delay
+    )
+      ? 0
+      : currentTrain.filter((data) => data.num == d.train)[0].delay;
 
     date.setHours(parseInt(data[0]));
     date.setMinutes(parseInt(data[1]) + parseInt(delay));
     console.log(date);
-        console.log(newDate)
+    console.log(newDate);
     if (!(newDate > date)) {
       return true;
     }
 
     return false;
-        
+  };
-    }
+  const finalFiltering = (d) => {
-    const finalFiltering = d =>{
     if (finalSwitch) {
       return true;
-        }
+    } else {
-        else{
       if (d.lastStation == "当駅止") {
         return false;
       }
       return true;
     }
-    }
+  };
   return (
-        <View style={{ width: wp("98%"),/*  height: wp("98%")/10*9, */backgroundColor:"#432",borderWidth:1,margin:10,marginHorizontal:wp("1%")}} >
+    <View
-            <View style={{alignContent:"center",alignItems:"center",width:"100%",marginVertical:10,flexDirection:"row"}}>
+      style={{
-                <View style={{flex:1}}>
+        width: wp("98%"),
-                    
+        /*  height: wp("98%")/10*9, */ backgroundColor: "#432",
-                </View>
+        borderWidth: 1,
+        margin: 10,
+        marginHorizontal: wp("1%"),
+      }}
+    >
+      <View
+        style={{
+          alignContent: "center",
+          alignItems: "center",
+          width: "100%",
+          marginVertical: 10,
+          flexDirection: "row",
+        }}
+      >
+        <View style={{ flex: 1 }}></View>
         <View style={{}}>
-                    <Text style={{fontSize:25,color:"white",fontWeight:"bold"}}>次の列車</Text>
+          <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
+            次の列車
+          </Text>
           <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
         </View>
-                <View style={{flex:1}}>
+        <View style={{ flex: 1 }}></View>
-                    
       </View>
-                
+      {trainTimeAndNumber
-            </View>
+        ? currentTrain &&
-            {trainTimeAndNumber ? currentTrain && trainTimeAndNumber.filter(filtering).filter(timeFiltering).filter(finalFiltering).map((d,index)=>
+          trainTimeAndNumber
-            [<View style={{alignContent:"center",alignItems:"center",width:"94%",marginVertical:5,marginHorizontal:"3%",backgroundColor:"#000",flexDirection:"row"}}>
+            .filter(filtering)
+            .filter(timeFiltering)
+            .filter(finalFiltering)
+            .map((d, index) => [
+              <View
+                style={{
+                  alignContent: "center",
+                  alignItems: "center",
+                  width: "94%",
+                  marginVertical: 5,
+                  marginHorizontal: "3%",
+                  backgroundColor: "#000",
+                  flexDirection: "row",
+                }}
+              >
                 <View style={{ flex: 9 }}>
-                    <Text style={{fontSize:(()=>{
+                  <Text
-                        if(customTrainDataDetector(d.train).trainName.length > 6){
+                    style={{
+                      fontSize: (() => {
+                        if (
+                          customTrainDataDetector(d.train).trainName.length > 6
+                        ) {
                           return 15;
+                        } else {
+                          return 20;
                         }
-                        else{
+                      })(),
-                            return 20
+                      color: (() => {
-                        }
-                    })(),color:(()=>{
                         switch (customTrainDataDetector(d.train).type) {
                           case "Rapid":
                             return "aqua";
@@ -190,9 +245,14 @@ export default function LED_vision(props){
                             return "red";
                           case "Normal":
                             return "white";
-                            
                         }
-                    })(),fontWeight:"bold"}}>{trainIDSwitch ? d.train : (()=>{
+                      })(),
+                      fontWeight: "bold",
+                    }}
+                  >
+                    {trainIDSwitch
+                      ? d.train
+                      : (() => {
                           switch (customTrainDataDetector(d.train).type) {
                             case "Rapid":
                               return "快速";
@@ -203,54 +263,145 @@ export default function LED_vision(props){
                             case "Normal":
                               return "普通列車";
                           }
-                    })()+" "+customTrainDataDetector(d.train).trainName+(()=>{
+                        })() +
-                        if(customTrainDataDetector(d.train).trainNumDistance != null){
+                        " " +
-                            return parseInt(d.train.replace("M","").replace("D","")) - customTrainDataDetector(d.train).trainNumDistance + "号";
+                        customTrainDataDetector(d.train).trainName +
-                        }
+                        (() => {
-                        else{
+                          if (
+                            customTrainDataDetector(d.train).trainNumDistance !=
+                            null
+                          ) {
+                            return (
+                              parseInt(
+                                d.train.replace("M", "").replace("D", "")
+                              ) -
+                              customTrainDataDetector(d.train)
+                                .trainNumDistance +
+                              "号"
+                            );
+                          } else {
                             return "";
                           }
-                    })()}</Text>
+                        })()}
+                  </Text>
                 </View>
                 <View style={{ flex: 4, flexDirection: "row" }}>
-                    <Text style={{fontSize: d.lastStation.length > 4 ? 15 : 20,color:"white",fontWeight:"bold"}}>{d.lastStation}</Text>
+                  <Text
+                    style={{
+                      fontSize: d.lastStation.length > 4 ? 15 : 20,
+                      color: "white",
+                      fontWeight: "bold",
+                    }}
+                  >
+                    {d.lastStation}
+                  </Text>
                 </View>
                 <View style={{ flex: 3 }}>
-                    <Text style={{fontSize:20,color:"white",fontWeight:"bold"}}>{d.time}</Text>
+                  <Text
+                    style={{ fontSize: 20, color: "white", fontWeight: "bold" }}
+                  >
+                    {d.time}
+                  </Text>
                 </View>
                 <View style={{ flex: 4 }}>
-                    <Text style={{fontSize:20,color:"white",fontWeight:"bold"}}>{(()=>{
+                  <Text
-                        let data= currentTrain.filter(data=>data.num==d.train)[0].delay;
+                    style={{ fontSize: 20, color: "white", fontWeight: "bold" }}
+                  >
+                    {(() => {
+                      let data = currentTrain.filter(
+                        (data) => data.num == d.train
+                      )[0].delay;
                       if (isNaN(data)) {
                         return data;
+                      } else if (data == 0) {
+                        return "定刻通り";
+                      } else {
+                        return data + "分遅れ";
                       }
-                        else if(data == 0){
+                    })()}
-                            return "定刻通り"
+                  </Text>
-                        }
-                        else{
-                            return data+"分遅れ"
-                        }
-                        })()}</Text>
                 </View>
-            </View>,Boolean(trainDescriptionSwitch) && Boolean(customTrainDataDetector(d.train).info) &&
+              </View>,
-            <View style={{alignContent:"center",alignItems:"center",width:"94%",marginVertical:5,marginHorizontal:"3%",backgroundColor:"#000",flexDirection:"row"}}>
+              Boolean(trainDescriptionSwitch) &&
+                Boolean(customTrainDataDetector(d.train).info) && (
+                  <View
+                    style={{
+                      alignContent: "center",
+                      alignItems: "center",
+                      width: "94%",
+                      marginVertical: 5,
+                      marginHorizontal: "3%",
+                      backgroundColor: "#000",
+                      flexDirection: "row",
+                    }}
+                  >
                     <View style={{ flex: 4 }}>
-                    <Text style={{fontSize:20,color:"green",fontWeight:"bold"}}>  &gt; {customTrainDataDetector(d.train).info}</Text>
+                      <Text
+                        style={{
+                          fontSize: 20,
+                          color: "green",
+                          fontWeight: "bold",
+                        }}
+                      >
+                        {" "}
+                        &gt; {customTrainDataDetector(d.train).info}
+                      </Text>
                     </View>
                   </View>
-        ]
+                ),
-        )
+            ])
         : null}
       <View style={{ flexDirection: "row", padding: 10 }}>
-                <Text style={{alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center",color:"white"}}>種別名 / 列番</Text>
+        <Text
-                <Switch value={trainIDSwitch} onValueChange={(value)=>setTrainIDSwitch(!trainIDSwitch)}/>
+          style={{
+            alignItems: "center",
+            alignContent: "center",
+            textAlign: "center",
+            textAlignVertical: "center",
+            color: "white",
+          }}
+        >
+          種別名 / 列番
+        </Text>
+        <Switch
+          value={trainIDSwitch}
+          onValueChange={(value) => setTrainIDSwitch(!trainIDSwitch)}
+        />
         <View style={{ flex: 1 }} />
-                <Text style={{alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center",color:"white"}}>列車情報</Text>
+        <Text
-                <Switch value={trainDescriptionSwitch} onValueChange={(value)=>setTrainDescriptionSwitch(!trainDescriptionSwitch)}/>
+          style={{
-                <View style={{flex:1}} />
+            alignItems: "center",
-                <Text style={{alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center",color:"white"}}>当駅止表示</Text>
+            alignContent: "center",
-                <Switch value={finalSwitch} onValueChange={(value)=>setFinalSwitch(!finalSwitch)}/>
+            textAlign: "center",
-            </View>
+            textAlignVertical: "center",
-        </View>
+            color: "white",
-    )
+          }}
+        >
+          列車情報
+        </Text>
+        <Switch
+          value={trainDescriptionSwitch}
+          onValueChange={(value) =>
+            setTrainDescriptionSwitch(!trainDescriptionSwitch)
+          }
+        />
+        <View style={{ flex: 1 }} />
+        <Text
+          style={{
+            alignItems: "center",
+            alignContent: "center",
+            textAlign: "center",
+            textAlignVertical: "center",
+            color: "white",
+          }}
+        >
+          当駅止表示
+        </Text>
+        <Switch
+          value={finalSwitch}
+          onValueChange={(value) => setFinalSwitch(!finalSwitch)}
+        />
+      </View>
+    </View>
+  );
 }

components/駅名表/Sign.js

@@ -1,22 +1,45 @@
-import React, { Component, useRef, useState, useEffect } from 'react';
+import React, { Component, useRef, useState, useEffect } from "react";
-import {StatusBar,View,LayoutAnimation,ScrollView,Linking,Text,TouchableOpacity } from 'react-native';
+import {
-import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
+  StatusBar,
-
+  View,
+  LayoutAnimation,
+  ScrollView,
+  Linking,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import {
+  widthPercentageToDP as wp,
+  heightPercentageToDP as hp,
+} from "react-native-responsive-screen";
 
 export default function Sign(props) {
   const { currentStation, originalStationList, oP } = props;
   const getPreNextStation = (now) => {
-        const lineList = ["予讃線", "松宇線", "伊予灘線", "土讃線", "窪川線", "高徳線", "徳島線", "鳴門線"];
+    const lineList = [
+      "予讃線",
+      "松宇線",
+      "伊予灘線",
+      "土讃線",
+      "窪川線",
+      "高徳線",
+      "徳島線",
+      "鳴門線",
+    ];
     let returnData;
-        lineList.forEach(d=>{
+    lineList.forEach((d) => {
-          let cache = originalStationList[d].findIndex( data => data.StationNumber == now.StationNumber);
+      let cache = originalStationList[d].findIndex(
+        (data) => data.StationNumber == now.StationNumber
+      );
       if (cache != -1) {
-            returnData = [originalStationList[d][cache-1],originalStationList[d][cache+1]]
+        returnData = [
+          originalStationList[d][cache - 1],
+          originalStationList[d][cache + 1],
+        ];
       }
-          
+    });
-        })
     return returnData;
-    } 
+  };
   const [nexPrePosition, setNexPrePosition] = useState(0);
   useEffect(() => {
     if (currentStation) {
@@ -24,83 +47,265 @@ export default function Sign(props){
         let stationCount = setInterval(() => {
           LayoutAnimation.easeInEaseOut();
           if (nexPrePosition + 1 == currentStation.length) {
-                        setNexPrePosition(0)
+            setNexPrePosition(0);
-                    }
+          } else {
-                    else{
             setNexPrePosition(nexPrePosition + 1);
           }
-                    
+        }, 1000);
-                },1000)
         return () => clearInterval(stationCount);
       }
     }
-    },[currentStation])
+  }, [currentStation]);
   return (
-        <TouchableOpacity style={{ width: wp("80%"), height: wp("80%")/20*9,borderColor:"#2E94BB",borderWidth:1,margin:10,marginHorizontal:wp("10%")}} /* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)}  */onPress={oP}>
+    <TouchableOpacity
-            <View style={{position:"absolute",bottom:"0%",left:"0%",width:"100%",height:'30%',backgroundColor:"#2E94BB"}} />
+      style={{
-            <Text style={{position:"absolute",top:"2%",left:"2%",fontWeight:"bold",fontSize:parseInt("30%"),color:"#2E94BB"}}>JR</Text>
+        width: wp("80%"),
-            {currentStation.map((d,index,array)=>
+        height: (wp("80%") / 20) * 9,
-              <View style={{position:"absolute",alignContent:"center",alignItems:"center",top:(()=>{
+        borderColor: "#2E94BB",
+        borderWidth: 1,
+        margin: 10,
+        marginHorizontal: wp("10%"),
+      }}
+      /* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)}  */ onPress={
+        oP
+      }
+    >
+      <View
+        style={{
+          position: "absolute",
+          bottom: "0%",
+          left: "0%",
+          width: "100%",
+          height: "30%",
+          backgroundColor: "#2E94BB",
+        }}
+      />
+      <Text
+        style={{
+          position: "absolute",
+          top: "2%",
+          left: "2%",
+          fontWeight: "bold",
+          fontSize: parseInt("30%"),
+          color: "#2E94BB",
+        }}
+      >
+        JR
+      </Text>
+      {currentStation.map((d, index, array) => (
+        <View
+          style={{
+            position: "absolute",
+            alignContent: "center",
+            alignItems: "center",
+            top:
+              (() => {
                 if (array.length == 1) return 20;
                 else if (index == 0) return 5;
                 else if (index == 1) return 35;
                 else return 20;
-              })()+"%",right:'10%',width:wp("10%"),height:wp("10%"),borderColor:"#2E94BB",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
+              })() + "%",
+            right: "10%",
+            width: wp("10%"),
+            height: wp("10%"),
+            borderColor: "#2E94BB",
+            borderWidth: parseInt("2%"),
+            borderRadius: parseInt("100%"),
+          }}
+        >
           <View style={{ flex: 1 }} />
           <Text style={{ fontSize: parseInt("20%") }}>{d.StationNumber}</Text>
           <View style={{ flex: 1 }} />
         </View>
-            )}
+      ))}
-            <View style={{position:"absolute",top:"10%",alignContent:"center",flexDirection:"row"}}>
+      <View
+        style={{
+          position: "absolute",
+          top: "10%",
+          alignContent: "center",
+          flexDirection: "row",
+        }}
+      >
         <View style={{ flex: 1 }} />
         <View style={{ alignItems: "center" }}>
           {/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text>  */}
-                <Text style={{fontWeight:"bold",fontSize:parseInt("40%"),color:"#005170"}}>{currentStation[0].Station_JP}</Text> 
+          <Text
-                <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{currentStation[0].Station_EN}</Text>   
+            style={{
+              fontWeight: "bold",
+              fontSize: parseInt("40%"),
+              color: "#005170",
+            }}
+          >
+            {currentStation[0].Station_JP}
+          </Text>
+          <Text
+            style={{
+              fontWeight: "bold",
+              fontSize: parseInt("15%"),
+              color: "#005170",
+            }}
+          >
+            {currentStation[0].Station_EN}
+          </Text>
         </View>
         <View style={{ flex: 1 }} />
       </View>
-            <View style={{position:"absolute",bottom:"0%",height:"30%",width:"100%",alignItems:"center",flexDirection:"column"}}>
+      <View
-              
+        style={{
-              {(()=>{return currentStation.map(currentStation =>{
+          position: "absolute",
-                let [preStation, nexStation] = getPreNextStation(currentStation)
+          bottom: "0%",
+          height: "30%",
+          width: "100%",
+          alignItems: "center",
+          flexDirection: "column",
+        }}
+      >
+        {(() => {
+          return currentStation.map((currentStation) => {
+            let [preStation, nexStation] = getPreNextStation(currentStation);
             return (
-                  <View style={{flex:1,flexDirection:"row",alignContent:"center"}}>
+              <View
-                    <View style={{flex:1,flexDirection:"row",alignContent:"center"}}>
+                style={{
-                    {preStation &&
+                  flex: 1,
-                    [<Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10,textAlignVertical:"center"}}>◀</Text>,
+                  flexDirection: "row",
-                    <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
+                  alignContent: "center",
+                }}
+              >
+                <View
+                  style={{
+                    flex: 1,
+                    flexDirection: "row",
+                    alignContent: "center",
+                  }}
+                >
+                  {preStation && [
+                    <Text
+                      style={{
+                        fontWeight: "bold",
+                        fontSize: parseInt("20%"),
+                        color: "white",
+                        paddingHorizontal: 10,
+                        textAlignVertical: "center",
+                      }}
+                    >
+                      ◀
+                    </Text>,
+                    <View
+                      style={{
+                        alignContent: "center",
+                        alignItems: "center",
+                        width: wp("8%"),
+                        height: wp("8%"),
+                        margin: wp("1%"),
+                        borderColor: "white",
+                        borderWidth: parseInt("2%"),
+                        borderRadius: parseInt("100%"),
+                      }}
+                    >
                       <View style={{ flex: 1 }} />
-                      <Text style={{fontSize:parseInt("10%"),color:"white"}}>{preStation.StationNumber}</Text>
+                      <Text
+                        style={{ fontSize: parseInt("10%"), color: "white" }}
+                      >
+                        {preStation.StationNumber}
+                      </Text>
                       <View style={{ flex: 1 }} />
                     </View>,
                     <View style={{ flex: 1, alignItems: "flex-start" }}>
-                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{preStation.Station_JP}</Text> 
+                      <Text
-                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{preStation.Station_EN}</Text>    
+                        style={{
-                    </View>]}
+                          fontWeight: "bold",
-                  </View>
+                          fontSize: parseInt("15%"),
-                  <View style={{flex:1,flexDirection:"row",alignContent:"center"}}>
+                          color: "white",
-                    
+                          flex: 1,
-                    {nexStation &&
+                          textAlignVertical: "center",
-                    [<View style={{flex:1,alignItems:"flex-end"}}>
+                        }}
-                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{nexStation.Station_JP}</Text> 
+                      >
-                      <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{nexStation.Station_EN}</Text>    
+                        {preStation.Station_JP}
+                      </Text>
+                      <Text
+                        style={{
+                          fontWeight: "bold",
+                          fontSize: parseInt("15%"),
+                          color: "white",
+                          flex: 1,
+                          textAlignVertical: "center",
+                        }}
+                      >
+                        {preStation.Station_EN}
+                      </Text>
                     </View>,
-                    <View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
+                  ]}
+                </View>
+                <View
+                  style={{
+                    flex: 1,
+                    flexDirection: "row",
+                    alignContent: "center",
+                  }}
+                >
+                  {nexStation && [
+                    <View style={{ flex: 1, alignItems: "flex-end" }}>
+                      <Text
+                        style={{
+                          fontWeight: "bold",
+                          fontSize: parseInt("15%"),
+                          color: "white",
+                          flex: 1,
+                          textAlignVertical: "center",
+                        }}
+                      >
+                        {nexStation.Station_JP}
+                      </Text>
+                      <Text
+                        style={{
+                          fontWeight: "bold",
+                          fontSize: parseInt("15%"),
+                          color: "white",
+                          flex: 1,
+                          textAlignVertical: "center",
+                        }}
+                      >
+                        {nexStation.Station_EN}
+                      </Text>
+                    </View>,
+                    <View
+                      style={{
+                        alignContent: "center",
+                        alignItems: "center",
+                        width: wp("8%"),
+                        height: wp("8%"),
+                        margin: wp("1%"),
+                        borderColor: "white",
+                        borderWidth: parseInt("2%"),
+                        borderRadius: parseInt("100%"),
+                      }}
+                    >
                       <View style={{ flex: 1 }} />
-                      <Text style={{fontSize:parseInt("10%"),color:"white"}}>{nexStation.StationNumber}</Text>
+                      <Text
+                        style={{ fontSize: parseInt("10%"), color: "white" }}
+                      >
+                        {nexStation.StationNumber}
+                      </Text>
                       <View style={{ flex: 1 }} />
                     </View>,
-                    <Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10,textAlignVertical:"center"}}>▶</Text>]}
+                    <Text
+                      style={{
+                        fontWeight: "bold",
+                        fontSize: parseInt("20%"),
+                        color: "white",
+                        paddingHorizontal: 10,
+                        textAlignVertical: "center",
+                      }}
+                    >
+                      ▶
+                    </Text>,
+                  ]}
                 </View>
               </View>
-                )
+            );
-              })[nexPrePosition]
+          })[nexPrePosition];
-                
         })()}
-              
       </View>
-            
     </TouchableOpacity>
-    )
+  );
 }

howto.js

@@ -1,13 +1,30 @@
 const WEBVIEW = "WEBVIEW";
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import { StatusBar,View, TouchableOpacity, Text} from 'react-native';
+import { StatusBar, View, TouchableOpacity, Text } from "react-native";
-import {WebView} from 'react-native-webview';
+import { WebView } from "react-native-webview";
-export default ({ navigation: { navigate } }) =>
+export default ({ navigation: { navigate } }) => (
   <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <WebView useWebKit={true} source={{uri: 'https://train.jr-shikoku.co.jp/usage.htm'}}/>
+    <WebView
-      <TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>navigate('Apps')}>
+      useWebKit={true}
+      source={{ uri: "https://train.jr-shikoku.co.jp/usage.htm" }}
+    />
+    <TouchableOpacity
+      style={{
+        padding: 10,
+        flexDirection: "row",
+        borderColor: "white",
+        borderWidth: 1,
+        margin: 10,
+        borderRadius: 5,
+        alignItems: "center",
+      }}
+      onPress={() => navigate("Apps")}
+    >
       <View style={{ flex: 1 }} />
-        <Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>閉じる</Text>
+      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+        閉じる
+      </Text>
       <View style={{ flex: 1 }} />
     </TouchableOpacity>
   </View>
+);

ndView.js

@@ -1,18 +1,25 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import { StatusBar,View,Linking,Platform,Text} from 'react-native';
+import { StatusBar, View, Linking, Platform, Text } from "react-native";
-import {WebView} from 'react-native-webview';
+import { WebView } from "react-native-webview";
-import Constants from 'expo-constants';
+import Constants from "expo-constants";
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { TouchableOpacity } from "react-native-gesture-handler";
 export default function tndView() {
   return (
-    <View style={{backgroundColor: '#309AC3', height:"100%",paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight: 0,}}>
+    <View
+      style={{
+        backgroundColor: "#309AC3",
+        height: "100%",
+        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+      }}
+    >
       <WebView
         useWebKit={true}
-      source={{uri: 'https://www.jr-shikoku.co.jp/info/'}} 
+        source={{ uri: "https://www.jr-shikoku.co.jp/info/" }}
-      originWhitelist={['https://www.jr-shikoku.co.jp']} 
+        originWhitelist={["https://www.jr-shikoku.co.jp"]}
-      mixedContentMode={'compatibility'}
+        mixedContentMode={"compatibility"}
         javaScriptEnabled={true}
-      injectedJavaScript={jsa}/>
+        injectedJavaScript={jsa}
+      />
     </View>
   );
 }
@@ -20,4 +27,3 @@ const jsa = `
 document.querySelector('.sitettl').style.display = 'none';	
 document.querySelector('.attention').style.display = 'none';
 `;
-