Initial `width` and `height` are inaccurate when manually setting `.defaultSize` on `RCTMainWindow`

billyjacoby commented 4 months ago

Description

When setting a custom height and/or width on the RCTMainWindow, the values reported by useWindowDimension are incorrect until the window is either moved or resized.

Steps to reproduce

Init a new project via the instructions in the readme
Change the default window size by setting .defaultSize(.init(width: 2000, height: 180)) on RCTMainWindow
Log the results of useWindowDimensions in the app file, and note the difference between the initially logged value and window size

React Native Version

0.73.4

Affected Platforms

Other (please specify)

Output of `npx react-native info`

System:
  OS: macOS 14.2.1
  CPU: (12) arm64 Apple M2 Max
  Memory: 196.42 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.5.0
    path: ~/.nvm/versions/node/v20.5.0/bin/node
  Yarn:
    version: 4.1.0
    path: ~/.nvm/versions/node/v20.5.0/bin/yarn
  npm:
    version: 9.8.0
    path: ~/.nvm/versions/node/v20.5.0/bin/npm
  Watchman:
    version: 2024.01.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.4
    wanted: 0.73.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false


### Stacktrace or Logs

```text
LOG  🪵 | height: 720
 LOG  🪵 | width: 1280

Reproducer

https://github.com/billyjacoby/callstack-visionos-repro/tree/window-size

Screenshots and Videos

I have very limited experience with the native library portion of React Native, but if someone wants to point me in the right direction I'm happy to try and fix this issue.

I assume the initial size just isn't being sent to the RN side of things for some reason.

okwasniewski commented 4 months ago

Hey,

Just checked it out on the latest version and it seems to work fine for me:

@main
struct SnowEmitterAppApp: App {
  @UIApplicationDelegateAdaptor var delegate: AppDelegate

  var body: some Scene {
    RCTMainWindow(moduleName: "SnowEmitterApp")
      .defaultSize(CGSize(width: 500, height: 800))
  }
}

Then in JS:

console.log('Dimensions: ', Dimensions.get('window')); //  {"fontScale": 1, "height": 800, "scale": 2, "width": 500}

function App(): React.JSX.Element {
  const dimensions = useWindowDimensions();
  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        React native visionOS {dimensions.height} {dimensions.width}👋
      </Text>
    </View>
  );
}

CleanShot 2024-02-13 at 13 01 36@2x

billyjacoby commented 4 months ago

I should have included this in the initial issue but it only seems to be an issue on the initial opening of the app. The way I'm able to reproduce on the simulator and on an actual AVP is to close the app while Metro is still running then click the Build button in XCode.

I'm also logging out the values from the useWindowDimensions hook specifically, I don't think that should make a difference though.

okwasniewski commented 4 months ago

@billyjacoby Can you try running the app with new architecture enabled (Install pods with RCT_NEW_ARCH_ENABLED=1 bundle exec pod install and see if that fixes the issue?

billyjacoby commented 4 months ago

Running with new arch enabled does in fact seem to fix this 🙌🏼

okwasniewski commented 4 months ago

Let's keep this issue open for now but our priority is new architecture (same as React Native's core team)

jpudysz commented 2 months ago

@okwasniewski

Do you have any idea how to receive notifications about window dimensions updates?

I've tried using NSKeyValueObserver with other hacks, but with no luck. Does visionOS even support it?

The same goes for useWindowDimensions - it always returns the same size.

Thanks!

okwasniewski commented 2 months ago

Hey @jpudysz,

React Native visionOS doesn't support it at the moment - I'm working on the implementation of this, together with a way of tracking each window state. Also, I think useWindowDimensions should accept windowId (with default to the main window).

So the new APIs that are coming:

useWindowDimensions() for each window
WindowManager.addEventListener('change', () => {}) // Listen to each window state changes

Currently, it is a bit unpredictable as useWindowDimensions returns the "last touched" window dimensions. Which version are you running that useWindowDimensions doesn't change?

https://github.com/callstack/react-native-visionos/assets/52801365/929e997a-4a09-4996-abf6-a044e6c3b2b7

jpudysz commented 2 months ago

I used the version from the docs, it's0.73.10.

jpudysz commented 2 months ago

@okwasniewski thanks for your hints! I was able to implement it using UnistylesRuntime! I will return in the future to support multiple windows; as of now, I support only one.

I used RCTWindowFrameDidChangeNotification exposed by RCTReactViewController.m.

https://github.com/callstack/react-native-visionos/assets/9088288/3dad953a-02e8-47b4-98a1-2cb2e2b186d8

callstack / react-native-visionos