Show both TM/Fabric overlay over the root view

Summary: This expands the existing FABRIC overlay to also indicate "TM" if turbomodule is active. Reviewed By: yungsters Differential Revision: D16999391 fbshipit-source-id: 42eedb697636c1172e595bc7c1ace2a9367a13b8
facebook · Aug 26, 2019 · e5b6341 · e5b6341
1 parent 8e04a14
commit e5b6341
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/Libraries/ReactNative/AppRegistry.js b/Libraries/ReactNative/AppRegistry.js
@@ -62,7 +62,7 @@ let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook =
 ) => component();
 
 let wrapperComponentProvider: ?WrapperComponentProvider;
-let showFabricIndicator = false;
+let showArchitectureIndicator = false;
 
 /**
  * `AppRegistry` is the JavaScript entry point to running all React Native apps.
@@ -74,8 +74,8 @@ const AppRegistry = {
     wrapperComponentProvider = provider;
   },
 
-  enableFabricIndicator(enabled: boolean): void {
-    showFabricIndicator = enabled;
+  enableArchitectureIndicator(enabled: boolean): void {
+    showArchitectureIndicator = enabled;
   },
 
   registerConfig(config: Array<AppConfig>): void {
@@ -121,7 +121,7 @@ const AppRegistry = {
           appParameters.rootTag,
           wrapperComponentProvider && wrapperComponentProvider(appParameters),
           appParameters.fabric,
-          showFabricIndicator,
+          showArchitectureIndicator,
           scopedPerformanceLogger,
         );
       },

diff --git a/...aries/ReactNative/ReactFabricIndicator.js → ...ative/ReactNativeArchitectureIndicator.js b/...aries/ReactNative/ReactFabricIndicator.js → ...ative/ReactNativeArchitectureIndicator.js
@@ -15,14 +15,29 @@ const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 const View = require('../Components/View/View');
 
-function ReactFabricIndicator(): React.Node {
+const hasTurboModule = global.__turboModuleProxy != null;
+const isBridgeless = global.RN$Bridgeless === true;
+
+function ReactNativeArchitectureIndicator(props: {|
+  fabric: boolean,
+|}): React.Node {
+  const parts = [];
+  if (isBridgeless) {
+    parts.push('NOBRIDGE');
+  } else {
+    if (props.fabric) {
+      parts.push('FABRIC');
+    }
+    if (hasTurboModule) {
+      parts.push('TM');
+    }
+  }
   return (
     <View style={styles.container}>
-      <Text style={styles.text}>FABRIC</Text>
+      <Text style={styles.text}>{parts.join('+')}</Text>
     </View>
   );
 }
-
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
@@ -38,5 +53,4 @@ const styles = StyleSheet.create({
     color: '#ffffff',
   },
 });
-
-module.exports = ReactFabricIndicator;
+module.exports = ReactNativeArchitectureIndicator;
diff --git a/Libraries/ReactNative/renderApplication.js b/Libraries/ReactNative/renderApplication.js
@@ -15,7 +15,7 @@ import GlobalPerformanceLogger from '../Utilities/GlobalPerformanceLogger';
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 import PerformanceLoggerContext from '../Utilities/PerformanceLoggerContext';
 const React = require('react');
-const ReactFabricIndicator = require('./ReactFabricIndicator');
+const ReactNativeArchitectureIndicator = require('./ReactNativeArchitectureIndicator');
 
 const invariant = require('invariant');
 
@@ -28,7 +28,7 @@ function renderApplication<Props: Object>(
   rootTag: any,
   WrapperComponent?: ?React.ComponentType<*>,
   fabric?: boolean,
-  showFabricIndicator?: boolean,
+  showArchitectureIndicator?: boolean,
   scopedPerformanceLogger?: IPerformanceLogger,
 ) {
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
@@ -38,8 +38,8 @@ function renderApplication<Props: Object>(
       value={scopedPerformanceLogger ?? GlobalPerformanceLogger}>
       <AppContainer rootTag={rootTag} WrapperComponent={WrapperComponent}>
         <RootComponent {...initialProps} rootTag={rootTag} />
-        {fabric === true && showFabricIndicator === true ? (
-          <ReactFabricIndicator />
+        {showArchitectureIndicator === true ? (
+          <ReactNativeArchitectureIndicator fabric={!!fabric} />
         ) : null}
       </AppContainer>
     </PerformanceLoggerContext.Provider>