タイトル通り、ノッチがある iPhoneX 以降のステータスバーの高さを取得できるライブラリ「react-native-iphone-x-helper」のご紹介です。
アプリを開発している際、要素を全画面で表示したいけど、ステータスバーは隠れないようにしたい！というレイアウトを実装する際に利用しました。
GitHub のページはこちらから。
GitHub – ptelad/react-native-iphone-x-helper: A library to help you design your react-native app for notched iPhones
https://github.com/ptelad/react-native-iphone-x-helper
インストールは下記のコマンドで行います。
npm install react-native-iphone-x-helper --save
上記が完了したら、あとは任意の場所で使用可能です。
まずステータスバーの高さの取得は、下記のように記述します。
import { getStatusBarHeight } from 'react-native-iphone-x-helper'
const statusBarHeight = getStatusBarHeight();
なお、名前に iPhone とありますが、Android のステータスバーの高さも取得できます。
しかし、Android の場合は、アプリの描画範囲にステータスバーが含まれていないため、書き方によってはレイアウトが崩れる場合があります。
そのため、可能であればノッチあり/なしの iPhone と、Android 端末の3パターンでレイアウトを確認した方が良さそうです。
次に、端末下の余白高さを取得する方法についてです。
こちらはノッチありの端末のみに存在する部分です。
import { getBottomSpace } from 'react-native-iphone-x-helper'
const bottomSpace = getBottomSpace();
下に余白がなければ 0 が返却されます。
こちらも Android でも動作しますが、ノッチがないため常に 0 が返却されました。
そのため、ステータスバーと違い、そこまで神経質に各端末でレイアウトを確認しなくても大丈夫そうです。
ですが、念のため、ノッチあり/なしの iPhone で最低限確認した方がいいと思います。
それ以外にも、端末が iPhoneX なのかを bool 値で返却する isIphoneX() というメソッドもありました。
開発中のプロジェクトでは、ステータスバーと下の余白高ささえ分かれば、iPhoneX かどうかを確認する必要はなかったので実際には使っていませんが、ノッチあり/なしの端末で大きくスタイルを変更したい場合などに使えると思います。
以上、React Native でノッチがあるiPhoneのステータスバーの高さを取得できる「react-native-iphone-x-helper」ライブラリのご紹介でした。
ご参考になれば幸いです。
