CustomModalにonShowコールバックを追加しiOSフォーカス遅延のマジックナンバーを除去 (#5575)

* フォーカス遅延をアニメーション時間(180ms)に合わせる

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* CustomModalにonShowコールバックを追加しフォーカス遅延のマジックナンバーを除去

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* onShow/onCloseAnimationEndをrefパターンに変更し不要なエフェクト再実行を防止

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: TinyKitten

src/components/CustomModal.tsx

@@ -19,6 +19,8 @@ type Props = {
   onClose?: () => void;
   /** 閉じるアニメーションが完了した後に呼ばれるコールバック */
   onCloseAnimationEnd?: () => void;
+  /** 開くアニメーションが完了した後に呼ばれるコールバック */
+  onShow?: () => void;
   dismissOnBackdropPress?: boolean;
   backdropStyle?: StyleProp<ViewStyle>;
   containerStyle?: StyleProp<ViewStyle>;
@@ -39,6 +41,7 @@ export const CustomModal: React.FC<Props> = ({
   children,
   onClose,
   onCloseAnimationEnd,
+  onShow,
   dismissOnBackdropPress = true,
   backdropStyle,
   containerStyle,
@@ -49,6 +52,8 @@ export const CustomModal: React.FC<Props> = ({
 }) => {
   const [isMounted, setIsMounted] = useState(visible);
   const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const onShowRef = useRef(onShow);
+  const onCloseAnimationEndRef = useRef(onCloseAnimationEnd);
   const isLEDTheme = useAtomValue(isLEDThemeAtom);
   const animatedBackdropStyle = {
     opacity,
@@ -65,14 +70,26 @@ export const CustomModal: React.FC<Props> = ({
     ],
   };
 
+  useEffect(() => {
+    onShowRef.current = onShow;
+  }, [onShow]);
+
+  useEffect(() => {
+    onCloseAnimationEndRef.current = onCloseAnimationEnd;
+  }, [onCloseAnimationEnd]);
+
   useEffect(() => {
     if (visible) {
       setIsMounted(true);
       Animated.timing(opacity, {
         toValue: 1,
         duration: animationDuration,
         useNativeDriver: true,
-      }).start();
+      }).start(({ finished }) => {
+        if (finished) {
+          onShowRef.current?.();
+        }
+      });
       return;
     }
 
@@ -83,10 +100,10 @@ export const CustomModal: React.FC<Props> = ({
     }).start(({ finished }) => {
       if (finished && !visible) {
         setIsMounted(false);
-        onCloseAnimationEnd?.();
+        onCloseAnimationEndRef.current?.();
       }
     });
-  }, [animationDuration, opacity, visible, onCloseAnimationEnd]);
+  }, [animationDuration, opacity, visible]);
 
   const handleBackdropPress = () => {
     Keyboard.dismiss();

src/components/SavePresetNameModal.tsx

@@ -109,14 +109,6 @@ export const SavePresetNameModal: React.FC<Props> = ({
       );
       inboundOpacity.setValue(1);
       outboundOpacity.setValue(1);
-
-      // モーダルアニメーション(180ms)とKeyboardAvoidingViewのレイアウト確定を待ってからフォーカスする
-      if (Platform.OS === 'ios') {
-        const timer = setTimeout(() => {
-          textInputRef.current?.focus();
-        }, 300);
-        return () => clearTimeout(timer);
-      }
     }
   }, [visible, defaultName, directionOptions, inboundOpacity, outboundOpacity]);
 
@@ -163,6 +155,12 @@ export const SavePresetNameModal: React.FC<Props> = ({
     onSubmit(name, selectedDirection);
   }, [onSubmit, selectedDirection, hasDirectionOptions]);
 
+  const handleShow = useCallback(() => {
+    if (Platform.OS === 'ios') {
+      textInputRef.current?.focus();
+    }
+  }, []);
+
   const canSubmit =
     !isEmpty && (!hasDirectionOptions || selectedDirection !== null);
   const textColor = isLEDTheme ? '#fff' : '#000';
@@ -171,6 +169,7 @@ export const SavePresetNameModal: React.FC<Props> = ({
     <CustomModal
       visible={visible}
       onClose={onClose}
+      onShow={handleShow}
       backdropStyle={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
       contentContainerStyle={[
         styles.contentView,