Dimensions "change" event does not fire on Apple Silicon/M1 (running iPad-built app) until window is blurred

[LinusU]

Description

When running an app built for iOS on your Apple Silicon Mac, the dimensions doesn't update when resizing the window. Only after focusing another application does it update.

(see also #30648)

Version

0.70.5

Output of npx react-native info

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1
    Memory: 104.56 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - ~/coding/loco/order/node_modules/.bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
    Watchman: 2022.12.26.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: javac 17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.5 => 0.70.5 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Create a new React Native project and replace the app.js file with the code below.
2. Build and run on an Apple Silicon / M1 Mac and resize the window.
3. Observe that the numbers aren't changing.

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

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

export default function App() {
  const { width, height } = useWindowDimensions()

  return (
    <View style={{ padding: 64 }}>
      <Text>width: {width}, height: {height}</Text>
    </View>
  )
}

[LinusU]

@eminsr I observed this whilst running my iOS app natively on my MacBook. Is that what you are doing as well? I was under the impression that only apple silicon macs could run iOS apps 🤔

[eminsr]

@eminsr I observed this whilst running my iOS app natively on my MacBook. Is that what you are doing as well? I was under the impression that only apple silicon macs could run iOS apps 🤔

@LinusU it's my bad, I always use my iPad as a second screen so I automatically thought that my app was running on my MacBook. I was actually running the iPad app on the iPad natively. So my issue is not connected to yours my apologies.

[LinusU]

No worries!

[jai-youitv-wm]

Hi, I see same issue for our RN app on my Apple M1 pro mac book. Components are not scaled to new window size. If we focus other app & back, it updates. What is the solution for this?

[devDoubleH]

Hi there,

This seems to be a known issue, and a possible workaround is to use the Dimensions API along with the useEffect hook to listen for changes to the window dimensions.

Here's an example of how you can use Dimensions and useEffect to update the width and height of your component when the window is resized:

`
import React, { useState, useEffect } from 'react';
import { View, Text, Dimensions } from 'react-native';

export default function MyComponent() {
const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'));

useEffect(() => {
const handleResize = () => {
setWindowDimensions(Dimensions.get('window'));
};

Dimensions.addEventListener('change', handleResize);

return () => {
  Dimensions.removeEventListener('change', handleResize);
};

}, []);

return (

Width: {windowDimensions.width}
Height: {windowDimensions.height}

);
}
`

[kesha-antonov]

@devDoubleH

I have almost the same code, but in store with mobx. But have the same issue

import { Dimensions } from 'react-native'
import {
  observable,
  runInAction,
} from 'mobx'
import { debounceListener } from '@utils/listeners'

const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window')

const dimensions = observable({
  deviceWidth,
  deviceHeight,
})

function handleChange ({ window: { width: deviceWidth, height: deviceHeight } }) {
  runInAction(() => {
    Object.assign(dimensions, {
      deviceWidth,
      deviceHeight,
    })
  })
}

export function subscribeDimensions () {
  const listener = Dimensions.addEventListener('change', debounceListener(handleChange))

  return () => listener.remove()
}

export default dimensions

[kesha-antonov]

Solved it with debounce onLayout on main view container and got dimensions from there

[Shervanator]

We are getting this same issue when building on Apple Silicon Macs, but also I have noticed the same thing happens on iPad when using "Stage Manager", useWindowDimensions does not get updated values on the window resize events unless the app is backgrounded then foregrounded, or it is sized to its smallest or largest layouts on the iPad with stage manager.

Interestingly this doesn't seem to be the case for the old style multi-tasking on iPad with the window resize.

Maybe this is a hint at the fundamental issue?

[jpdriver]

Maybe this is a hint at the fundamental issue?

added plenty more context to the PR above 🙇🏻‍♂️