fix(iOS): adjust RCTRedBox to work for iPad and support orientation changes #41217
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
|
@GijsWeterings has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
|
@javache has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
javache
reviewed
Oct 27, 2023
javache
approved these changes
Oct 27, 2023
|
@javache has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
Othinn
pushed a commit
to Othinn/react-native
that referenced
this pull request
Jan 9, 2024
…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. ## Changelog: [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. ### Before https://github.com/facebook/react-native/assets/52801365/892dcfe7-246f-4f36-be37-12c139c207ac ### After 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
facebook-github-bot
pushed a commit
that referenced
this pull request
Jan 16, 2024
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 Pull Request resolved: #42261 Test Plan: Launch the app without metro enabled to see the RCTRedBox   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
Jan 18, 2024
…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
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   Reviewed By: NickGerleman Differential Revision: D52730458 Pulled By: javache fbshipit-source-id: dc7227e7b6e3238c195342cb0460850b57eb75c3
okwasniewski
added a commit
to callstack/react-native-visionos
that referenced
this pull request
Jan 31, 2024
…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. ## Changelog: [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. ### Before https://github.com/facebook/react-native/assets/52801365/892dcfe7-246f-4f36-be37-12c139c207ac ### After 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
okwasniewski
added a commit
to callstack/react-native-visionos
that referenced
this pull request
Feb 6, 2024
…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. ## Changelog: [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. ### Before https://github.com/facebook/react-native/assets/52801365/892dcfe7-246f-4f36-be37-12c139c207ac ### After 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
okwasniewski
added a commit
to callstack/react-native-visionos
that referenced
this pull request
Apr 5, 2024
…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. ## Changelog: [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. ### Before https://github.com/facebook/react-native/assets/52801365/892dcfe7-246f-4f36-be37-12c139c207ac ### After 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
okwasniewski
added a commit
to callstack/react-native-visionos
that referenced
this pull request
Jun 24, 2024
…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. ## Changelog: [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. ### Before https://github.com/facebook/react-native/assets/52801365/892dcfe7-246f-4f36-be37-12c139c207ac ### After 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
Saadnajmi
pushed a commit
to Saadnajmi/react-native-macos
that referenced
this pull request
Jul 26, 2024
…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
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   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
…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
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   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   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 <oskarkwasniewski@icloud.com>
This pull request was closed.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
When opening
RCTRedBoxon 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.
Changelog:
[IOS] [FIXED] - adjust RCTRedBox to work for iPad and support orientation changes
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.
Before
before-redboxConverted.mp4
After
after-redboxConverted.mp4