てすと

たかろぐ

自分のログを刻みます。

react-native-modal

今日は、React Nativeのモーダル関連の話。

先日、react-native-modalというライブラリでモーダルを実装したんですが、 「iPhoneでは大丈夫なのに、 Androidでカクついてしまう」という状況が起きてしまいました。

その他の背景を簡単に状況を整理すると、

  • モーダルを出したい
  • モーダルを出すアニメーションは特に要らない
  • バックグラウンドで、いくつか非同期処理が動いている
  • Androidでカクつく

という感じ。(なぜAndroidだけなんや...)

react-native-modalとは

そもそも、react-native-modalとは何なのか。 GitHubはこれですね。

github.com

ReactNative標準のModalをラップして、主にそののアニメーション周りを簡単に扱えるようにしたものらしい。

アニメーションの指定はreact-native-animatableで定義されたものに加えて、自分で定義したアニメーションも指定することができます。

github.com

結局、どう解決に持っていったのか

結論を言うと、標準のModalでanimationType="none"を指定してアニメーションを切りました

アニメーションを扱う必要が無いのであれば、標準のものを使っても何も支障は無いと判断しました。

他の案としては、

  • react-native-modalのuseNativeDriverをONにする方法
  • 一瞬で出現する/消えるアニメーションを自分で定義して、それを使う

辺りが挙げられましたが、結局アニメーションしないなら要らないだろうと思いました。 (本当はreact-native-modalを使いつつ、アニメーションOFF設定ができれば良かったんですけど、その術は見当たらなかったです。)