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

fix[AppContainer]: mount react devtools overlay only when devtools are attached #38785

Commits on Aug 4, 2023

  1. fix[AppContainer]: mount react devtools overlay only when devtools ar…

    …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
    hoxyq committed Aug 4, 2023
    Configuration menu
    Copy the full SHA
    ea3efa8 View commit details
    Browse the repository at this point in the history