fix[AppContainer]: mount react devtools overlay only when devtools are connected #38727
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
|
This pull request was exported from Phabricator. Differential Revision: D47954883 |
Base commit: e22d1a1 |
|
This pull request was exported from Phabricator. Differential Revision: D47954883 |
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Aug 2, 2023
…e connected (facebook#38727) Summary: Pull Request resolved: facebook#38727 ## Changelog: [General][Fix] - Do not render React DevTools overlays unless they are connected Fixes facebook#38024. Reproducible example: https://github.com/rasaha91/rn-bottomsheet. - This is a temporary workaround to resolve described problem for DEV bundles without attached React DevTools. - Still, such problem will be present for DEV bundles with attached React DevTools, but this should be only for brownfield apps with a shrinked React Native window. Checking that DevTools hook is present is not enough to determine whether the DevTools are connected. These changes fix it. Short description of what's going on there: 1. When React Native root window is rendered inside some native view, which takes only portion of the screen (like the native bottom sheet in the reproducible example), DevtoolsOverlay / InspectorOverlay takes up space based on application window dimension, this results into resizing the hosting window on the native side. https://pxl.cl/357r3 2. Right way to fix this would be removing the usage of application window sizes, so that DevtoolsOverlay / InspectorOverlay will be allowed only to take React Native's window. 3. Unfortunately, just removing setting is not enough, we should also have at least 1 of 2 things: - `collapsable` prop should be set to `true` => View will be flattened - Remove [`flex: 1` style on both root and inner Views](https://github.com/facebook/react-native/blob/b28e3c16ed7cbc8b3ed3f26d91c58acb4bb28879/packages/react-native/Libraries/ReactNative/AppContainer.js#L145-L147), but this is breaking how LogBox works now. | {F1062478964} | {F1062492367} Reviewed By: NickGerleman Differential Revision: D47954883 fbshipit-source-id: 924ae5dff701e2011536c819f17982d2e6ebe3a1
hoxyq
force-pushed
the
export-D47954883
branch
2 times, most recently
from
cf474ba
to
ce9814e
Compare
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Aug 4, 2023
…e connected (facebook#38727) Summary: Pull Request resolved: facebook#38727 ## Changelog: [General][Fix] - Do not render React DevTools overlays unless they are connected Fixes facebook#38024. Reproducible example: https://github.com/rasaha91/rn-bottomsheet. - This is a temporary workaround to resolve described problem for DEV bundles without attached React DevTools. - Still, such problem will be present for DEV bundles with attached React DevTools, but this should be only for brownfield apps with a shrinked React Native window. Checking that DevTools hook is present is not enough to determine whether the DevTools are connected. These changes fix it. Short description of what's going on there: 1. When React Native root window is rendered inside some native view, which takes only portion of the screen (like the native bottom sheet in the reproducible example), DevtoolsOverlay / InspectorOverlay takes up space based on application window dimension, this results into resizing the hosting window on the native side. https://pxl.cl/357r3 2. Right way to fix this would be removing the usage of application window sizes, so that DevtoolsOverlay / InspectorOverlay will be allowed only to take React Native's window. 3. Unfortunately, just removing setting is not enough, we should also have at least 1 of 2 things: - `collapsable` prop should be set to `true` => View will be flattened - Remove [`flex: 1` style on both root and inner Views](https://github.com/facebook/react-native/blob/b28e3c16ed7cbc8b3ed3f26d91c58acb4bb28879/packages/react-native/Libraries/ReactNative/AppContainer.js#L145-L147), but this is breaking how LogBox works now. | {F1062478964} | {F1062492367} Reviewed By: NickGerleman Differential Revision: D47954883 fbshipit-source-id: 9c39543d9efb6090cfa6a3910f3e87f69ca6d5ea
|
This pull request was exported from Phabricator. Differential Revision: D47954883 |
…e connected (facebook#38727) Summary: Pull Request resolved: facebook#38727 ## Changelog: [General][Fix] - Do not render React DevTools overlays unless they are connected Fixes facebook#38024. Reproducible example: https://github.com/rasaha91/rn-bottomsheet. - This is a temporary workaround to resolve described problem for DEV bundles without attached React DevTools. - Still, such problem will be present for DEV bundles with attached React DevTools, but this should be only for brownfield apps with a shrinked React Native window. Checking that DevTools hook is present is not enough to determine whether the DevTools are connected. These changes fix it. Short description of what's going on there: 1. When React Native root window is rendered inside some native view, which takes only portion of the screen (like the native bottom sheet in the reproducible example), DevtoolsOverlay / InspectorOverlay takes up space based on application window dimension, this results into resizing the hosting window on the native side. https://pxl.cl/357r3 2. Right way to fix this would be removing the usage of application window sizes, so that DevtoolsOverlay / InspectorOverlay will be allowed only to take React Native's window. 3. Unfortunately, just removing setting is not enough, we should also have at least 1 of 2 things: - `collapsable` prop should be set to `true` => View will be flattened - Remove [`flex: 1` style on both root and inner Views](https://github.com/facebook/react-native/blob/b28e3c16ed7cbc8b3ed3f26d91c58acb4bb28879/packages/react-native/Libraries/ReactNative/AppContainer.js#L145-L147), but this is breaking how LogBox works now. | {F1062478964} | {F1062492367} Reviewed By: NickGerleman Differential Revision: D47954883 fbshipit-source-id: d45d8cb82daa8dc9de58f54c137815b3a7abd5db
|
This pull request was exported from Phabricator. Differential Revision: D47954883 |
hoxyq
added a commit
to hoxyq/react-native
that referenced
this pull request
Aug 4, 2023
…e connected (facebook#38727) Summary: Pull Request resolved: facebook#38727 ## Changelog: [General][Fix] - Do not render React DevTools overlays unless they are connected Fixes facebook#38024. Reproducible example: https://github.com/rasaha91/rn-bottomsheet. - This is a temporary workaround to resolve described problem for DEV bundles without attached React DevTools. - Still, such problem will be present for DEV bundles with attached React DevTools, but this should be only for brownfield apps with a shrinked React Native window. Checking that DevTools hook is present is not enough to determine whether the DevTools are connected. These changes fix it. Short description of what's going on there: 1. When React Native root window is rendered inside some native view, which takes only portion of the screen (like the native bottom sheet in the reproducible example), DevtoolsOverlay / InspectorOverlay takes up space based on application window dimension, this results into resizing the hosting window on the native side. https://pxl.cl/357r3 2. Right way to fix this would be removing the usage of application window sizes, so that DevtoolsOverlay / InspectorOverlay will be allowed only to take React Native's window. 3. Unfortunately, just removing setting is not enough, we should also have at least 1 of 2 things: - `collapsable` prop should be set to `true` => View will be flattened - Remove [`flex: 1` style on both root and inner Views](https://github.com/facebook/react-native/blob/b28e3c16ed7cbc8b3ed3f26d91c58acb4bb28879/packages/react-native/Libraries/ReactNative/AppContainer.js#L145-L147), but this is breaking how LogBox works now. | {F1062478964} | {F1062492367} Reviewed By: NickGerleman Differential Revision: D47954883 fbshipit-source-id: d45d8cb82daa8dc9de58f54c137815b3a7abd5db
|
This pull request has been merged in 3901688. |
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:
Changelog:
[General][Fix] - Do not render React DevTools overlays unless they are connected
Fixes #38024.
Reproducible example: https://github.com/rasaha91/rn-bottomsheet.
Checking that DevTools hook is present is not enough to determine whether the DevTools are connected. These changes fix it.
Short description of what's going on there:
https://pxl.cl/357r3
collapsableprop should be set totrue=> View will be flattenedflex: 1style on both root and inner Views, but this is breaking how LogBox works now.| {F1062478964} | {F1062492367}
Differential Revision: D47954883