diff --git a/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js b/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js index 6e5914fd25..e0318fac9c 100644 --- a/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js +++ b/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js @@ -10,6 +10,7 @@ import type {Overlay} from './TraceUpdateOverlayNativeComponent'; +import UIManager from '../../ReactNative/UIManager'; import processColor from '../../StyleSheet/processColor'; import StyleSheet from '../../StyleSheet/StyleSheet'; import View from '../View/View'; @@ -53,6 +54,8 @@ type ReactDevToolsGlobalHook = { const {useEffect, useRef, useState} = React; const hook: ReactDevToolsGlobalHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__; +const isNativeComponentReady = + UIManager.hasViewManagerConfig('TraceUpdateOverlay'); let devToolsAgent: ?Agent; export default function TraceUpdateOverlay(): React.Node { @@ -60,6 +63,10 @@ export default function TraceUpdateOverlay(): React.Node { // This effect is designed to be explictly shown here to avoid re-subscribe from the same // overlay component. useEffect(() => { + if (!isNativeComponentReady) { + return; + } + function attachToDevtools(agent: Agent) { devToolsAgent = agent; agent.addListener('drawTraceUpdates', onAgentDrawTraceUpdates); @@ -141,7 +148,8 @@ export default function TraceUpdateOverlay(): React.Node { useRef>(null); return ( - !overlayDisabled && ( + !overlayDisabled && + isNativeComponentReady && ( { state: State = { inspector: null, devtoolsOverlay: null, + traceUpdateOverlay: null, mainKey: 1, hasError: false, }; @@ -75,7 +77,10 @@ class AppContainer extends React.Component { const devtoolsOverlay = ( ); - this.setState({devtoolsOverlay}); + const TraceUpdateOverlay = + require('../Components/TraceUpdateOverlay/TraceUpdateOverlay').default; + const traceUpdateOverlay = ; + this.setState({devtoolsOverlay, traceUpdateOverlay}); } } } @@ -127,6 +132,7 @@ class AppContainer extends React.Component { {!this.state.hasError && innerView} + {this.state.traceUpdateOverlay} {this.state.devtoolsOverlay} {this.state.inspector} {logBox}