Full size modals (including LogBox) not respecting window size on Catalyst

[jnpdx]

When launched in Catalyst on the Mac, certain React Native modal components (including the LogBox) don't seem to respect the size of the window. Instead of being full screen (a la iOS) modal, it gets stuck at ~740x395. Resizing the window, although it affects the bottom bar LogBox notification, does not resize the modal dialog itself.

This is inconsequential for a non-user-facing feature like LogBox, but it affects other elements as well (like react-native-modal).

React Native version:

0.63.3, 0.63.4, 0.64.0-rc2

Steps To Reproduce

1. Download either sample repo: 0.64.0-rc2 (https://github.com/jnpdx/RN-CatalystTest-64) or 0.63.4 (https://github.com/jnpdx/RN-CatalystTest) (note: these are just bare-bones React Native projects with small edits to make them work on Catalyst, like getting rid of Flipper)
2. From the project directory, run yarn install and then cd ios && pod install
3. Make sure that "My Mac" is chosen as the launch target
4. You must change the "Team" in "Signing and capabilities" to your own Team ID for both the CatalystTest target AND the React-Core-Accessibility bundle (in the Pods project) or else Xcode won't build/compile
5. Launch the sample app and tap the LogBox error at the bottom of the screen

Expected Results

LogBox should be a full screen modal and respect window resizing

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

0.64.0-rc2 (https://github.com/jnpdx/RN-CatalystTest-64)
0.63.4 (https://github.com/jnpdx/RN-CatalystTest)

[safaiyeh]

@jnpdx Thanks for the issue! I am not sure about the work put into Catalyst other than basic build support. Escalating the issue because I do not believe the capabilities of each component is documented

[jnpdx]

@safaiyeh

It looks like LogBox uses Stylesheet.absoluteFill, which looks like this:

const absoluteFill = {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
};

Which is basically exactly the same as react-native-modal's approach:

backdrop: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    opacity: 0,
    backgroundColor: 'black',
  },

So, although this obviously isn't the cause of the bug, it's definitely a hint to what's causing it to appear.

Regarding the work put in on Catalyst, FWIW, this is the only issue my app seemed to encounter when running as Catalyst (except for some minor non-runtime build issues), which was a pleasant surprise!

[jnpdx]

Another weird variable --

For me, on Catalina, the LogBox appears too small for the window. On Big Sur, it appears too large.

[Arkkeeper]

I've submitted a pull request fixing these issues (+RCTDevLoadingView width)

[robertherber]

Any updates on this? Seems worse in React Native 0.68 - like the React Native root view is never updating after the initial size of the window.

[Arkkeeper]

I'll try to publish some fixes used by our team as a new PR this or next week, hope it will be merged this time.

[Arkkeeper]

@robertherber this issue is really weird.
Could you please check it on the latest RN release candidate?

npx react-native init newapp --version 0.70.0-rc.2

Then set flipper_configuration in Podfile to FlipperConfiguration.disabled and mac_catalyst_enabled to true, cd ios && pod install, and try in on a sample app.

I don't have any issues (on Monterey 12.5 and Ventura beta 5), LogBox respects the size of the windows and keeps updating dynamically on resize or going to full screen mode.

[exotexot]

The Dimensions object does NOT update when resizing windows in Catalyst.
Neither does https://reactnative.dev/docs/usewindowdimensions fire on window resize events.

Using rn 0.70

[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.