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: use less verbose API for RCTRedBox constraints #42261

Conversation

okwasniewski
Copy link
Contributor

Summary:

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

Changelog:

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

Test Plan:

Launch the app without metro enabled to see the RCTRedBox

CleanShot 2024-01-12 at 14 54 20@2x
CleanShot 2024-01-12 at 14 54 16@2x

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Callstack Partner: Callstack Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Jan 12, 2024
@facebook-github-bot
Copy link
Contributor

@javache has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@okwasniewski
Copy link
Contributor Author

Hey, can you guide me on what failed in the internal tests and how I can fix it? I think this shouldn't change anything in the tests

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Jan 16, 2024
@facebook-github-bot
Copy link
Contributor

@javache merged this pull request in b311c3e.

Saadnajmi pushed a commit to Saadnajmi/react-native-macos that referenced this pull request Jan 18, 2024
)

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 pushed a commit to Saadnajmi/react-native-macos that referenced this pull request Jul 26, 2024
)

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 pushed a commit to Saadnajmi/react-native-macos that referenced this pull request Jul 30, 2024
)

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 added a commit to microsoft/react-native-macos that referenced this pull request Aug 2, 2024
* fix(iOS): adjust RCTRedBox to work for iPad and support orientation changes (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

* refactor: use less verbose API for RCTRedBox constraints (facebook#42261)

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

* refactor Redbox on macOS and present as a sheet

* present RCTDevLoadingView as a sheet

* refactor Logbox and present as a sheet

* change RCTRootView.loadingView to RCTPlatformView

* update Podfile.lock

* PR feedback

---------

Co-authored-by: Oskar Kwaśniewski <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. p: Callstack Partner: Callstack Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants