useWindowDimensions hook doesn't work

[PrimeTimeTran]

Description

The values returned from useWindowDimensions() hook doesn't update correctly on iOS simulator or device.

React Native Version

0.71.8

Output of npx react-native info

$ npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 92.48 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.volta/tools/image/node/18.15.0/bin/node
    Yarn: 3.5.0 - ~/.volta/tools/image/yarn/3.5.0/bin/yarn
    npm: 9.5.0 - ~/.volta/tools/image/node/18.15.0/bin/npm
    Watchman: 2023.05.15.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.1 - /Users/loi/.rvm/gems/ruby-3.0.0/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.2 AI-222.4459.24.2221.9862592
    Xcode: 14.3/14E222b - /usr/bin/xcodebuild
  Languages:
    Java: javac 20 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.8 => 0.71.8 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Initialize a new Expo project & start it.

npx create-expo-app RNUseWindowsDimensions
cd RNUseWindowsDimensions
npm run ios

2. Replace code in ./App.js with example code for documentation of useWindowDimensions here.

import React from 'react';
import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';

const App = () => {
  const {height, width, scale, fontScale} = useWindowDimensions();
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Window Dimension Data</Text>
      <Text>Height: {height}</Text>
      <Text>Width: {width}</Text>
      <Text>Font scale: {fontScale}</Text>
      <Text>Pixel ratio: {scale}</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    fontSize: 20,
    marginBottom: 12,
  },
});

export default App;

3. Observe that the values returned from the hook don't update when the orientation of the device/simulator change.

In this demo we see that the height value is always greater than the width value, even when the simulator is in landscape orientation.

https://monosnap.com/file/1ByKEEd9VJqVraQUm98SUtjYzQmet4

Snack, code example, screenshot, or link to a repository

https://monosnap.com/file/1ByKEEd9VJqVraQUm98SUtjYzQmet4

I think it may be related to issue #29290. In that issue the op states values are swapped. In this case values are simply wrong. Thus I thought it was worth opening up a new issue.

[henk9]

In your app.json, try changing "orientation": "portrait" to "orientation": "default".
Another thing to try is to reload the application (by pressing r in the console where you ran npm start),
and/or Ctrl + C followed by npm start (or npm run ios) to restart the server,
and then maybe m to toggle away the dev menu.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[GHEAD1802]

I am having same issue when i update from expo 50 to 51, My screen width and height does not update while rotating screen and i am using useWindowDimensions hook

[jameswilddev]

Might be fixed by this #46353