useWindowDimensions() returns swapped height and width in iOS
オープン
まだ誰も着手していません。
API: Dimensions
Never gets stale
Platform: iOS
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
Description
When tested with iPad simulator, the useWindowDimensions(...) hook returns incorrect width and height.
React Native version:
Run react-native info in your terminal and copy the results here.
info Fetching system and libraries information...
System:
OS: macOS 10.15.5
CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
Memory: 24.79 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.0 - /var/folders/k_/twn4fnrn6g56kn0xjlkp3zx00000gn/T/yarn--1594122179123-0.9086048405049534/node
Yarn: 1.22.4 - /var/folders/k_/twn4fnrn6g56kn0xjlkp3zx00000gn/T/yarn--1594122179123-0.9086048405049534/yarn
npm: 6.14.5 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 23, 26, 28, 29
Build Tools: 27.0.3, 28.0.3, 29.0.2, 30.0.0
System Images: android-29 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_242-release - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: ^0.62.2 => 0.62.2
npmGlobalPackages:
*react-native*: Not Found
✨ Done in 11.68s.
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
- Use
react-native initto create a new project. - Edit
App.jswith the following codeimport React from "react"; import { Text, View, useWindowDimensions } from "react-native"; export const App = () => { const { width, height } = useWindowDimensions(); return ( <View style={{ width: "100%", height: "100%", alignItems: "center", justifyContent: "center", }} > <Text>{width > height ? "landscape" : "portrait"}</Text> <Text>{`width: ${width}, height: ${height}`}</Text> </View> ); };
Expected Results
- At the first time I rotate the simulator to landscape, it should display
"landscape"instead of nothing happens. - At the second time the simulator rotates back to portrait position, it should render
"portrait"on the screen. - At the second time I rotate from portrait to landscape, it should display
"landscape"instead of"portrait".
Snack, code example, screenshot, or link to a repository:
It is not easy to show device orientation features in snack, I'll attach screen recordings below.

You may download the original video to pause for the rendered text.
Screen Recording 2020-07-07 at 7.39.07 PM.zip
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
useWindowDimensions() を使用した App.js の再現から始め、iPad シミュレータで縦向きと横向きを切り替えながら動作を確認します。回転するたびに、表示される向きと幅/高さの値が正しく更新されることを確認してください。この issue では、変更対象の React Native 実装ファイルやテストは指定されていません。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react-native
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100