diff --git a/assets/configuration/train_original_small.jpg b/assets/configuration/train_original_small.jpg
new file mode 100644
index 0000000..6aacc9e
Binary files /dev/null and b/assets/configuration/train_original_small.jpg differ
diff --git a/components/DynamicHeaderScrollView.js b/components/DynamicHeaderScrollView.js
index e6f652b..9fc6bd1 100644
--- a/components/DynamicHeaderScrollView.js
+++ b/components/DynamicHeaderScrollView.js
@@ -1,6 +1,7 @@
import { ScrollView, View, Animated, LayoutAnimation } from "react-native";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState, useLayoutEffect } from "react";
import { useScrollHandlers } from "react-native-actions-sheet";
+import { AS } from "../storageControl";
export const DynamicHeaderScrollView = (props) => {
const {
@@ -13,7 +14,30 @@ export const DynamicHeaderScrollView = (props) => {
styles,
from,
} = props;
-
+ const [headerSize, setHeaderSize] = useState("default");
+ useLayoutEffect(() => {
+ AS.getItem("headerSize")
+ .then((res) => {
+ if (res) {
+ setHeaderSize(res);
+ }
+ })
+ .catch((e) => {
+ AS.setItem("headerSize", "default");
+ });
+ }, []);
+ useEffect(() => {
+ switch (headerSize) {
+ case "small":
+ setHeaderVisible(true);
+ return;
+ case "big":
+ case "default":
+ default:
+ setHeaderVisible(false);
+ break;
+ }
+ }, [headerSize]);
const viewHeader = useMemo(() => {
switch (from) {
case "AllTrainDiagramView":
@@ -25,7 +49,7 @@ export const DynamicHeaderScrollView = (props) => {
}
}, [from]);
- const Max_Header_Height = viewHeader ? 0 : 200;
+ const Max_Header_Height = headerSize == "small" ? 0 : viewHeader ? 0 : 200;
const Min_Header_Height = viewHeader ? 0 : 80;
const Scroll_Distance = Max_Header_Height - Min_Header_Height;
@@ -87,13 +111,24 @@ export const DynamicHeaderScrollView = (props) => {
const [headerVisible, setHeaderVisible] = useState(false);
const onScroll = (event) => {
- const scrollY = event.nativeEvent.contentOffset.y;
- if (Scroll_Distance < scrollY == headerVisible) return;
- LayoutAnimation.configureNext({
- duration: 100,
- update: { type: "easeOut" },
- });
- setHeaderVisible(Scroll_Distance < scrollY);
+ switch (headerSize) {
+ case "big":
+ setHeaderVisible(false);
+ return;
+ case "small":
+ setHeaderVisible(true);
+ return;
+ case "default":
+ default:
+ const scrollY = event.nativeEvent.contentOffset.y;
+ if (Scroll_Distance < scrollY == headerVisible) return;
+ LayoutAnimation.configureNext({
+ duration: 100,
+ update: { type: "easeOut" },
+ });
+ setHeaderVisible(Scroll_Distance < scrollY);
+ break;
+ }
};
return (
diff --git a/components/Settings/LayoutSettings.js b/components/Settings/LayoutSettings.js
index 1bda4d5..09e0547 100644
--- a/components/Settings/LayoutSettings.js
+++ b/components/Settings/LayoutSettings.js
@@ -2,6 +2,7 @@ import React from "react";
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { SwitchArea } from "../atom/SwitchArea";
import { CheckBox } from "react-native-elements";
+import { TripleSwitchArea } from "../atom/TripleSwitchArea";
export const LayoutSettings = ({
navigate,
@@ -17,6 +18,8 @@ export const LayoutSettings = ({
setTrainMenu,
trainPosition,
setTrainPosition,
+ headerSize,
+ setHeaderSize,
}) => {
return (
@@ -106,12 +109,34 @@ export const LayoutSettings = ({
trueImage={require("../../assets/configuration/train_original.jpg")}
/>
{trainMenu == "true" && (
-
+ <>
+
+
+ >
)}
diff --git a/components/Settings/settings.js b/components/Settings/settings.js
index 7c40ce3..fbeb3ba 100644
--- a/components/Settings/settings.js
+++ b/components/Settings/settings.js
@@ -32,6 +32,7 @@ export default function Setting(props) {
const [usePDFView, setUsePDFView] = useState(false);
const [trainMenu, setTrainMenu] = useState(false);
const [trainPosition, setTrainPosition] = useState(false);
+ const [headerSize, setHeaderSize] = useState("default");
useLayoutEffect(() => {
AS.getItem("iconSwitch").then(setIconSetting);
AS.getItem("mapSwitch").then(setMapSwitch);
@@ -39,6 +40,7 @@ export default function Setting(props) {
AS.getItem("usePDFView").then(setUsePDFView);
AS.getItem("trainSwitch").then(setTrainMenu);
AS.getItem("trainPositionSwitch").then(setTrainPosition);
+ AS.getItem("headerSize").then(setHeaderSize);
}, []);
const testNFC = async () => {
const result = await ExpoFelicaReader.scan();
@@ -52,6 +54,7 @@ export default function Setting(props) {
AS.setItem("usePDFView", usePDFView.toString()),
AS.setItem("trainSwitch", trainMenu.toString()),
AS.setItem("trainPositionSwitch", trainPosition.toString()),
+ AS.setItem("headerSize", headerSize),
]).then(() => Updates.reloadAsync());
};
return (
@@ -115,6 +118,8 @@ export default function Setting(props) {
setTrainPosition={setTrainPosition}
testNFC={testNFC}
updateAndReload={updateAndReload}
+ headerSize={headerSize}
+ setHeaderSize={setHeaderSize}
/>
)}
diff --git a/components/atom/TripleSwitchArea.js b/components/atom/TripleSwitchArea.js
new file mode 100644
index 0000000..026b454
--- /dev/null
+++ b/components/atom/TripleSwitchArea.js
@@ -0,0 +1,52 @@
+import { View, Text, Image, TouchableOpacity } from "react-native";
+import { SimpleSwitch } from "./SimpleSwitch";
+export const TripleSwitchArea = ({
+ str,
+ bool,
+ setBool,
+ firstItem: { firstImage, firstText, firstValue },
+ secondItem: { secondImage, secondText, secondValue },
+ thirdItem: { thirdImage, thirdText, thirdValue },
+}) => {
+ return (
+
+
+ {str}
+
+
+
+
+
+
+
+ );
+};