Enable TraceUpdateOverlay for android RN apps

Summary:
This diff is a retry of shipping D43180893 (https://github.com/facebook/react-native/commit/89ef5bd6f9064298dfe55b0b18be4a770ee0872c), which got backed out in D43350025 (https://github.com/facebook/react-native/commit/1f151e0d2ff4995d296ad09ed8b96c79d2304387) due to issues in iOS RN apps.

I've exclude iOS apps in this diff. I am planning to have the iOS implementation for the TraceUpdateOverlay native component to fill the gap with lower priority.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D43409501

fbshipit-source-id: fe8bb5654862f0b5e9054a97ae1f4cde573bb3e0

Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js

@@ -10,8 +10,10 @@
 
 import type {Overlay} from './TraceUpdateOverlayNativeComponent';
 
+import UIManager from '../../ReactNative/UIManager';
 import processColor from '../../StyleSheet/processColor';
 import StyleSheet from '../../StyleSheet/StyleSheet';
+import Platform from '../../Utilities/Platform';
 import View from '../View/View';
 import TraceUpdateOverlayNativeComponent, {
   Commands,
@@ -53,6 +55,9 @@ type ReactDevToolsGlobalHook = {
 
 const {useEffect, useRef, useState} = React;
 const hook: ReactDevToolsGlobalHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+const isNativeComponentReady =
+  Platform.OS === 'android' &&
+  UIManager.hasViewManagerConfig('TraceUpdateOverlay');
 let devToolsAgent: ?Agent;
 
 export default function TraceUpdateOverlay(): React.Node {
@@ -60,6 +65,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 +150,8 @@ export default function TraceUpdateOverlay(): React.Node {
     useRef<?React.ElementRef<typeof TraceUpdateOverlayNativeComponent>>(null);
 
   return (
-    !overlayDisabled && (
+    !overlayDisabled &&
+    isNativeComponentReady && (
       <View pointerEvents="none" style={styles.overlay}>
         <TraceUpdateOverlayNativeComponent
           ref={nativeComponentRef}

Libraries/ReactNative/AppContainer.js

@@ -32,6 +32,7 @@ type Props = $ReadOnly<{|
 type State = {|
   inspector: ?React.Node,
   devtoolsOverlay: ?React.Node,
+  traceUpdateOverlay: ?React.Node,
   mainKey: number,
   hasError: boolean,
 |};
@@ -40,6 +41,7 @@ class AppContainer extends React.Component<Props, State> {
   state: State = {
     inspector: null,
     devtoolsOverlay: null,
+    traceUpdateOverlay: null,
     mainKey: 1,
     hasError: false,
   };
@@ -75,7 +77,10 @@ class AppContainer extends React.Component<Props, State> {
           const devtoolsOverlay = (
             <DevtoolsOverlay inspectedView={this._mainRef} />
           );
-          this.setState({devtoolsOverlay});
+          const TraceUpdateOverlay =
+            require('../Components/TraceUpdateOverlay/TraceUpdateOverlay').default;
+          const traceUpdateOverlay = <TraceUpdateOverlay />;
+          this.setState({devtoolsOverlay, traceUpdateOverlay});
         }
       }
     }
@@ -127,6 +132,7 @@ class AppContainer extends React.Component<Props, State> {
       <RootTagContext.Provider value={createRootTag(this.props.rootTag)}>
         <View style={styles.appContainer} pointerEvents="box-none">
           {!this.state.hasError && innerView}
+          {this.state.traceUpdateOverlay}
           {this.state.devtoolsOverlay}
           {this.state.inspector}
           {logBox}