diff --git a/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js b/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js index 5444d52695cb37..abac38b3bee820 100644 --- a/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js +++ b/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js @@ -33,10 +33,7 @@ interface Agent { removeListener(event: $Keys, listener: () => void): void; } -type TraceNode = { - publicInstance?: TraceNode, - // TODO: remove this field when syncing the new version of the renderer from React to React Native. - canonical?: TraceNode, +type PublicInstance = { measure?: ( ( x: number, @@ -49,6 +46,16 @@ type TraceNode = { ) => void, }; +type TraceNode = + | PublicInstance + | { + canonical?: + | PublicInstance // TODO: remove this variant when syncing the new version of the renderer from React to React Native. + | { + publicInstance?: PublicInstance, + }, + }; + type ReactDevToolsGlobalHook = { on: (eventName: string, (agent: Agent) => void) => void, off: (eventName: string, (agent: Agent) => void) => void, @@ -102,11 +109,14 @@ export default function TraceUpdateOverlay(): React.Node { const newFramesToDraw: Array> = []; nodesToDraw.forEach(({node, color}) => { - // `publicInstance` => Fabric + // `canonical.publicInstance` => Fabric // TODO: remove this check when syncing the new version of the renderer from React to React Native. // `canonical` => Legacy Fabric // `node` => Legacy renderer - const component = node.publicInstance ?? node.canonical ?? node; + const component = + (node.canonical && node.canonical.publicInstance) ?? + node.canonical ?? + node; if (!component || !component.measure) { return; } diff --git a/packages/react-native/Libraries/Inspector/DevtoolsOverlay.js b/packages/react-native/Libraries/Inspector/DevtoolsOverlay.js index 37d1ebb30eb305..f1861f2e0b8cf4 100644 --- a/packages/react-native/Libraries/Inspector/DevtoolsOverlay.js +++ b/packages/react-native/Libraries/Inspector/DevtoolsOverlay.js @@ -52,11 +52,14 @@ export default function DevtoolsOverlay({ function onAgentShowNativeHighlight(node: any) { clearTimeout(hideTimeoutId); - // `publicInstance` => Fabric - // TODO: remove this check when syncing the new version of the renderer from React to React Native. + // `canonical.publicInstance` => Fabric // `canonical` => Legacy Fabric // `node` => Legacy renderer - const component = node.publicInstance ?? node.canonical ?? node; + const component = + (node.canonical && node.canonical.publicInstance) ?? + // TODO: remove this check when syncing the new version of the renderer from React to React Native. + node.canonical ?? + node; if (!component || !component.measure) { return; }