アプリの背景色を変更する Expo SystemUI

現在新しいアプリを開発中なんですが、キーボードが出たり入ったりする時にどうもチカチカするんですよね。特にダークモードの時に気になる。

それでじっくり確認してみると、キーボードが出てくる時にキーボードの背景部分が白いためにそこが一瞬見えてしまい、そのためダークモードだとチカチカした印象になってしまうようです。

でもアプリの大枠の背景はすでに黒っぽく指定してあるのに、なぜここだけ白いんだ。どこか別のところで指定できそうですね。

調べてみたところ、app.jsonで指定できるようです。

app.json / app.config.js
A reference of available properties in Expo app config.

ただしapp.jsonで指定すると、その指定したカラーに固定されてしまいます。このアプリは端末のカラーモードに応じて通常とダークモードが切り替わるので、背景色もそれに合わせて切り替わってほしい。その場合は「Expo SystemUI」を使います。

SystemUI
A library that allows interacting with system UI elements.

背景色を”black”に指定したい場合はこのように書きます。

SystemUI.setBackgroundColorAsync("black");

条件に応じて切り替わるようにuseEffect内で指定してやれば上手く動きそうです。

できました!
キーボードが出てくるときにチカチカしませんね。

こういった細かい部分は機能的には問題ないのですが、使い心地に影響が出るのでできるだけきちんと対応していきたいです。

タイトルとURLをコピーしました