iOSでモーダルが表示されないバグの解決方法【react-native-modal】

2023年12月1日

ReactNativeのモーダルには固有のバグがあります。具体的には、モーダルを閉じて、次のモーダルを表示しようとするときに、2つ目のモーダルが表示されません。

これは、iOSのみに生じるバグです。解決策はsetTimeoutを使うことです。

Javascript

  const [modal1, setModal1] = useState(false);
  const [modal2, setModal2] = useState(false);

  const onPressModal1Open = useCallback(() => {
    setModal1(true);
  }, []);

  const onPressModal2Open = useCallback(() => {
    setModal1(false);
    setTimeout(() => {
      setModal2(true);
    }, 500);
  }, []);

上記のように二つ目のモーダルをtrueにするときにsetTimeoutを使いましょう。時間は500（0.5秒）くらいがスムーズに動きます。私の作っているLangJournalでは0.5秒にしております。