本記事では画面サイズの取得方法を紹介します。
画面サイズ取得モジュール：Dimensions
ReactNativeでは、画面サイズを取得するためにDimensionsというモジュールが用意されています。
https://reactnative.dev/docs/dimensions
実際に利用した例がこちらになります。
この例では、画面サイズ（window or screen）をDimensions.get("〇〇")で取得しています。
Dimensions.get("〇〇")で取得できるのは、実際には複数情報（width, height, scale, fontScale）です。
さらに、Dimensions.addEventListener("change", function)で、画面サイズが可変に変わる際に動的に数値を取得できるように対応しています。
subscription?.remove()は登録したイベントリスナーを解除します。
useEffectのreturnとして記述されているので、マウントが外れる時（画面遷移する時）に呼ばれます。
WindowとScreenの違いは何？
Dimensionsでは２つの画面範囲からサイズを取得できます。
公式サイトの説明は次の通り。
| window | Size of the visible Application window. |
| screen | Size of the device's screen. |
日本語で言うと、
windowは、アプリケーションの可視領域（ウィンドウ）サイズ。screenは、デバイスのスクリーンサイズ。
下記の画像が先程のコード例を全画面で見たスクリーンキャプチャになります。
緑色の線で囲まれた部分がScreen領域、赤色の線で囲まれた部分がWindow領域になります。
useWindowDimensionsを使えばもっとシンプルに
useWindowDimensionsを使えばもっとシンプル＆フレキシブルに画面サイズを取得することができます。
次のコードが、useWindowDimensionsを使った例です。
Dimensions.get("〇〇")では、useEffectとDimensions.addEventListener("change", function)を利用して、フレキシブルに画面サイズを取得しました。
useWindowDimensionsを利用すると、useEffect内の処理を実現することができます。
とてもシンプルになりましたね。