【ReactNative】横画面にはuseWindowDimensionsではなくDimensionsを使おう

はじめに

ReactNative with Expo でアプリを作成しており、横画面の挙動も担保する必要が出てきたのですが、ヘッダーなどが不具合を起こしており、原因調査にかなり時間を使ったので、同じ問題で困っている人の助けになればと思い共有します。

問題の原因

useWindowDimensions を用いて画面のサイズを取得していたのですが、 useWindowDimensions は画面サイズの変化を検知して動的に変更する機能を持っていません。

対処法

useWindowDimensions の代わりに Dimensions を使いましょう。
Dimensions はウィンドウのサイズが更新されると更新される特性を持ちます。

sample.js

// 修正前（画面の向きに応じて動的に変化しない）
const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

// 修正後（画面の向きに応じて動的に変化する）
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

まとめ

useWindowDimensions と Dimensions を上手く使いこなしていきたいですね。