Skip to content

Commit

Permalink
fix: defer ReactDevToolsOverlay import (#43690)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #43690

# Changelog: [Internal]

Fixes #43678.

The issue is that once `getInspectorDataForViewAtPoint` is imported, it should throw if RDT global hook was not injected. ReactDevTools overlay imports `getInspectorDataForViewAtPoint`, this is why it did throw in testing environment.

ReactDevToolsOverlay JSX-element is already gated with RDT global hook check, adding a deferred import, same as it was already implemented for Inspector.

Still unclear to me how this didn't throw all this time while using the Catalyst / RNTester.

Reviewed By: cortinico

Differential Revision: D55474774

fbshipit-source-id: 759e5e8227cc7534193e5b95616b6099c15f5cb5
  • Loading branch information
hoxyq authored and facebook-github-bot committed Mar 28, 2024
1 parent 8e7263a commit 4841373
Showing 1 changed file with 21 additions and 2 deletions.
23 changes: 21 additions & 2 deletions packages/react-native/Libraries/ReactNative/AppContainer-dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import View from '../Components/View/View';
import DebuggingOverlay from '../Debugging/DebuggingOverlay';
import useSubscribeToDebuggingOverlayRegistry from '../Debugging/useSubscribeToDebuggingOverlayRegistry';
import RCTDeviceEventEmitter from '../EventEmitter/RCTDeviceEventEmitter';
import ReactDevToolsOverlay from '../Inspector/ReactDevToolsOverlay';
import LogBoxNotificationContainer from '../LogBox/LogBoxNotificationContainer';
import StyleSheet from '../StyleSheet/StyleSheet';
import {RootTagContext, createRootTag} from './RootTag';
Expand Down Expand Up @@ -64,6 +63,26 @@ const InspectorDeferred = ({
);
};

type ReactDevToolsOverlayDeferredProps = {
inspectedViewRef: InspectedViewRef,
reactDevToolsAgent: ReactDevToolsAgent,
};

const ReactDevToolsOverlayDeferred = ({
inspectedViewRef,
reactDevToolsAgent,
}: ReactDevToolsOverlayDeferredProps) => {
const ReactDevToolsOverlay =
require('../Inspector/ReactDevToolsOverlay').default;

return (
<ReactDevToolsOverlay
inspectedViewRef={inspectedViewRef}
reactDevToolsAgent={reactDevToolsAgent}
/>
);
};

const AppContainer = ({
children,
fabric,
Expand Down Expand Up @@ -155,7 +174,7 @@ const AppContainer = ({
<DebuggingOverlay ref={debuggingOverlayRef} />

{reactDevToolsAgent != null && (
<ReactDevToolsOverlay
<ReactDevToolsOverlayDeferred
inspectedViewRef={innerViewRef}
reactDevToolsAgent={reactDevToolsAgent}
/>
Expand Down

0 comments on commit 4841373

Please sign in to comment.