本日、React Native のアプリを開発中に iOS で遭遇した現象とその対処法についてです。
タイトルにある通り、「react-native-dialog」ライブラリで実装していたダイアログが、iOS でのみ表示されないという不具合が発生しました。
なお、Android では問題なく表示されました。
「react-native-dialog」ライブラリの GitHub ページはこちらから。
mmazzarolo/react-native-dialog: Pure JavaScript React-Native dialog
https://github.com/mmazzarolo/react-native-dialog
ダイアログが表示されないということで、ダイアログの表示/非表示を扱う props である visible の値を真っ先に調べてみましたが、こちらは指定した通り true/false が切り替わっていました。
そもそも、Android では動いていたので、ここには問題はありませんね。
で、次にダイアログを表示する処理を遅延させてみました。
修正前のコードでは、ダイアログを表示する条件に一致したらそのタイミングで即表示するようにしていたのですが、こちらを setTimeout() を使って 500ms 遅延させてみました。
サンプルコードは下記のとおりです。
if (this.state.image || this.state.video)
setTimeout(() => {
this.setState({ isDialogOpen: true });
}, 500);
}
上記を追加して、再度アプリを実行したところ、今度は問題なくダイアログが表示されました!
何故これで動作するのかは分かりませんが…何らかのタイミングが悪かったのかも…?
ダメ元で思い付いた処理だったので、正直私が一番驚いています。
が、とりあえず動作したのでヨシ!
以上、React Native で「react-native-dialog」ライブラリで実装したダイアログが表示されない時の対処法でした。
これがそのまま他のコードでも通用するのかは分かりませんが、とりあえず試してみてもいいかもしれません。
動いたらラッキーくらいの気持ちでお試しいただければと思います。