iPhoneX対応方法について調査しましたのでまとめておきます。
SafeAreaView
react-native v0.50.0 - SafeAreaView
v0.50.0のリリースに含まれました。
親に当たるComponentをWrapして使います。
react-navigation v1.0.0-beta.16
react-navigationも既に対応しています。
そうは言ってもバージョン上げるの辛い、、という方には以下。
react-native-device-info
こちらでデバイス名を取得することができます。
ただし、注意点がありましてシミュレーターはデバイス名が Simulator
となってしまう為、開発の際は実機を用意しなければなりません。
論理解像度を取得する
apple developer - Displays
論理解像度とはデバイスのスクリーンに依存しない、基準値となる解像度のことだそうです。デバイスによって異なるスケール倍率がありそれと論理解像度を掛け合わせ、物理解像度を決定しています。(appleはUIKit Sizeとしている)
iPhoneXの論理解像度は 375 x 812
なのでこれを取得して対応します。
※現状、iPhoneXの論理解像度はユニークですが新たなデバイスと被る可能性もありますので一時的な対応になるかと思います。
まとめ
まだ発売され1ヶ月程度ですが、対応されていないアプリも幾つかあるようです。
iPhoneXの為にUI/UXを新たに構築するのはしんどいですが、従来のデバイスに合わせるのは比較的簡単なのでやっておきたいですね。