Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Redbox, Logbox, and DevLoadingView as Sheets #2151

Merged
merged 8 commits into from
Aug 2, 2024

Conversation

Saadnajmi
Copy link
Collaborator

@Saadnajmi Saadnajmi commented Jul 31, 2024

Summary:

Upstream in React Native 0.74, RCTRedbox got heavily rewritten (see facebook@e2eb26c and facebook@b311c3e) . As such, we needed to update our macOS implementation. This proved to be quite difficult, as NSTableView is quite... obtuse. Many thanks to @FalseLobster for doing much of that part of the rewrite. I am cherry picking the rewrite commits here so we can reduce churn on the larger "0.74 merge" PR.

While we are touching this code, I realized that a natural presentation pattern for the red box would be to use a sheet. In fact, that would also apply to RCTDevLoadingView (which is particularly annoying as it's presented as a fixed-in-place tiny window on your screen) and RCTLogBox. So... I went ahead and refactored all three to use sheets. The result is quite nice!

While here, I realized separately, RCTRootView has a loadingView property so you can set something like an ActivityIndicator while it loads JS. There was some modifications to get that working, So I'm also adding that in this PR.

Test Plan:

RCTRedBox rewritten, and presented as a sheet:

Screen.Recording.2024-07-30.at.11.26.54.PM.mov

RCTDevLoadingView and RCTLogBox presented as sheets:

Screen.Recording.2024-07-30.at.11.29.19.PM.mov

RCTRootView.loadingView set to an NSProgressIndicator using the code block below. Ignore the devLoadingView looking different, I was testing a different design.

    NSProgressIndicator *loadingView = [NSProgressIndicator new]
    [loadingView setFrame:NSMakeRect(0,0,20,20)];
    loadingView.style = NSProgressIndicatorStyleSpinning;
    [loadingView startAnimation:self];
    [((RCTRootView *)rootView) setLoadingView:loadingView];
Screen.Recording.2024-07-31.at.5.29.45.PM.mov

…hanges (facebook#41217)

Summary:
When opening `RCTRedBox` on an iPad (and also visionOS) there was an issue with buttons width going out of screen. When changing screen orientation, RedBox wasn't recalculating view positions.

**Root cause**: Getting frame of root view to display this modal and basing all calculations on it.

**Solution**: Use Auto Layout to build UI that responds to orientation changes and device specific modal presentation.

I've also tested it with adding custom buttons to RedBox and it works properly.

[IOS] [FIXED] - adjust RCTRedBox to work for iPad and support orientation changes

Pull Request resolved: facebook#41217

Test Plan:
Launch the app without metro running and check out RedBox that's shown there. Also change screen orientation to see proper recalculation of view positions.

https://github.com/facebook/react-native/assets/52801365/892dcfe7-246f-4f36-be37-12c139c207ac

https://github.com/facebook/react-native/assets/52801365/dfd0c3d8-5997-462d-97ec-dcc3de452e26

Reviewed By: GijsWeterings

Differential Revision: D50734569

Pulled By: javache

fbshipit-source-id: 51b854a47caf90ae46fcd32c4adcc64ec2ceb63f
)

Summary:
This PR is a continuation of my previous PR where I refactored RCTRedBox to use Auto Layout (facebook#41217). This PR uses less verbose API for defining constraints.

## Changelog:

[IOS] [CHANGED] - use less verbose Auto Layout API for RCTRedBox constraints

Pull Request resolved: facebook#42261

Test Plan:
Launch the app without metro enabled to see the RCTRedBox

![CleanShot 2024-01-12 at 14 54 20@2x](https://github.com/facebook/react-native/assets/52801365/32ee9916-3e32-46c3-9f6b-c313631aa1e5)
![CleanShot 2024-01-12 at 14 54 16@2x](https://github.com/facebook/react-native/assets/52801365/c625b9b9-b462-4e67-831f-0192427bbe93)

Reviewed By: NickGerleman

Differential Revision: D52730458

Pulled By: javache

fbshipit-source-id: dc7227e7b6e3238c195342cb0460850b57eb75c3
@Saadnajmi Saadnajmi requested a review from a team as a code owner July 31, 2024 06:40
@Saadnajmi Saadnajmi requested review from amgleitman and tido64 July 31, 2024 06:59
@Saadnajmi Saadnajmi force-pushed the redbox branch 2 times, most recently from d00e06b to f04a530 Compare July 31, 2024 07:06
@Saadnajmi Saadnajmi merged commit 67a4a0f into microsoft:main Aug 2, 2024
14 checks passed
@Saadnajmi Saadnajmi deleted the redbox branch August 10, 2024 08:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants