const handleDialogOK = async () => {
    const key = uuidv4(); // 一意のUUIDを生成
    const timestamp = new Date().toLocaleString("ja-JP");

    // ダイアログ保存
    const newSaveDatas = {
      id: key,
      name: storageMemo,
      pesticideL: result.pesticideL,
      pesticideML: result.pesticideML,
      waterL: result.waterL,
      waterML: result.waterML,
      totalSa: result.totalSa,
      divisionSprayerWater: result.divisionSprayerWater,
      divisionSprayerPesticide: result.divisionSprayerPesticide,
      divisionSprayerTenchaku: result.divisionSprayerTenchaku,
      divisionSprayerCount: result.divisionSprayerCount,
      divisionSprayerWaterRemaining: result.divisionSprayerWaterRemaining,
      divisionSprayerPesticideRemaining:
        result.divisionSprayerPesticideRemaining,
      divisitonSprayerTenchakuRemaining:
        result.divisitonSprayerTenchakuRemaining,
      sprayerTotalCount: result.sprayerTotalCount,
      toggle1: toggle1,
      toggle2: toggle2,
      timestamp: timestamp,
    };
    try {
      const existingResults = await AsyncStorage.getItem("calculationResults");
      let parsedResults = existingResults ? JSON.parse(existingResults) : [];
      const resultCount = Object.keys(parsedResults).length;
      if (resultCount >= 15) {
        Alert.alert("最大保存数は15です。一覧からいずれかを削除して下さい。");
        setDialogVisible(false);
        return;
      }
      parsedResults.push(newSaveDatas);
      await AsyncStorage.setItem(
        "calculationResults",
        JSON.stringify(parsedResults)
      );
      Alert.alert("保存されました");
    } catch (error) {
      Alert.alert("エラー", "管理者に問い合わせて下さい。");
      console.log("データの保存中にエラーが発生しました", error);
    }
    // 最終処理
    setStorageMemo("");
    setDialogVisible(false);
  };

<Dialog.Button label="保存" onPress={handleDialogOK} />

import React, { useState, useRef } from 'react';
import { View, TextInput, InputAccessoryView, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const CustomInput = () => {
  const [focusedInputIndex, setFocusedInputIndex] = useState(0);
  const inputRefs = useRef([]);

  const toggleFocus = (direction) => {
    let nextIndex;

    if (direction === 'up') {
      nextIndex = focusedInputIndex > 0 ? focusedInputIndex - 1 : inputRefs.current.length - 1;
    } else if (direction === 'down') {
      nextIndex = focusedInputIndex < inputRefs.current.length - 1 ? focusedInputIndex + 1 : 0;
    }

    setFocusedInputIndex(nextIndex);
    inputRefs.current[nextIndex].focus();
  };

  const inputAccessoryViewID = 'uniqueID';

  const renderInputAccessoryView = () => (
    <InputAccessoryView nativeID={inputAccessoryViewID} backgroundColor="#f2f2f2">
      <View style={styles.accessoryContainer}>
      <Icon
          name="keyboard-arrow-up"
          size={40}
          onPress={() => toggleFocus('up')}
          color={focusedInputIndex === 0 ? 'gray' : '#156AE5'}
          disabled={focusedInputIndex === 0}
        />
        <Icon
          name="keyboard-arrow-down"
          size={40}
          onPress={() => toggleFocus('down')}
          color={focusedInputIndex === inputRefs.current.length - 1 ? 'gray' : '#156AE5'}
          disabled={focusedInputIndex === inputRefs.current.length - 1}
        />
      </View>
    </InputAccessoryView>
  );

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        keyboardType="numeric"
        onFocus={() => setFocusedInputIndex(0)}
        inputAccessoryViewID={inputAccessoryViewID}
        ref={(ref) => (inputRefs.current[0] = ref)}
      />
      <TextInput
        style={styles.input}
        keyboardType="numeric"
        onFocus={() => setFocusedInputIndex(1)}
        inputAccessoryViewID={inputAccessoryViewID}
        ref={(ref) => (inputRefs.current[1] = ref)}
      />
      <TextInput
        style={styles.input}
        keyboardType="numeric"
        onFocus={() => setFocusedInputIndex(2)}
        inputAccessoryViewID={inputAccessoryViewID}
        ref={(ref) => (inputRefs.current[2] = ref)}
      />
      {renderInputAccessoryView()}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  input: {
    width: '80%',
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    paddingHorizontal: 10,
    marginBottom: 10,
  },
  accessoryContainer: {
    flexDirection: 'row',
    paddingHorizontal: 10,
  },
});

export default CustomInput;

import React, { useState, useRef } from "react";
import {
  View,
  TextInput,
  InputAccessoryView,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Text,
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

const CustomInput = () => {
  const [focusedInputIndex, setFocusedInputIndex] = useState(0);
  const inputRefs = useRef([]);

  const toggleFocus = (direction) => {
    let nextIndex;

    if (direction === "up") {
      nextIndex =
        focusedInputIndex > 0
          ? focusedInputIndex - 1
          : inputRefs.current.length - 1;
    } else if (direction === "down") {
      nextIndex =
        focusedInputIndex < inputRefs.current.length - 1
          ? focusedInputIndex + 1
          : 0;
    }

    setFocusedInputIndex(nextIndex);
    inputRefs.current[nextIndex].focus();
  };

  const inputAccessoryViewID = "uniqueID";

  const renderInputAccessoryView = () => (
    <InputAccessoryView
      nativeID={inputAccessoryViewID}
      backgroundColor="#f2f2f2"
    >
      <View style={styles.accessoryContainer}>
        <TouchableOpacity
          onPress={() => toggleFocus("up")}
          disabled={focusedInputIndex === 0}
          style={styles.touchable}
        >
          <Icon
            name="ios-chevron-up"
            size={40}
            color={focusedInputIndex === 0 ? "gray" : "#156AE5"}
          />
          <Text style={{ color: focusedInputIndex === 0 ? "gray" : "#156AE5" }}>
            上の項目へ
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => toggleFocus("down")}
          disabled={focusedInputIndex === inputRefs.current.length - 1}
          style={styles.touchable}
        >
          <Icon
            name="ios-chevron-down"
            size={40}
            color={
              focusedInputIndex === inputRefs.current.length - 1
                ? "gray"
                : "#156AE5"
            }
          />
          <Text
            style={{
              color:
                focusedInputIndex === inputRefs.current.length - 1
                  ? "gray"
                  : "#156AE5",
            }}
          >
            下の項目へ
          </Text>
        </TouchableOpacity>
      </View>
    </InputAccessoryView>
  );

  return (
    <ScrollView keyboardShouldPersistTaps="handled">
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          onFocus={() => setFocusedInputIndex(0)}
          inputAccessoryViewID={inputAccessoryViewID}
          ref={(ref) => (inputRefs.current[0] = ref)}
        />
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          onFocus={() => setFocusedInputIndex(1)}
          inputAccessoryViewID={inputAccessoryViewID}
          ref={(ref) => (inputRefs.current[1] = ref)}
        />
        <TextInput
          style={styles.input}
          keyboardType="numeric"
          onFocus={() => setFocusedInputIndex(2)}
          inputAccessoryViewID={inputAccessoryViewID}
          ref={(ref) => (inputRefs.current[2] = ref)}
        />
        {renderInputAccessoryView()}
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffffff",
  },
  input: {
    width: "80%",
    height: 40,
    borderWidth: 1,
    borderColor: "#ccc",
    paddingHorizontal: 10,
    marginBottom: 10,
  },
  accessoryContainer: {
    flexDirection: "row",
    paddingHorizontal: 10,
    justifyContent: "space-around",
    backgroundColor: "white",
  },
  touchable: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },
});

export default CustomInput;