Improve display names of root components in React Profiler

Summary:
Changelog:
[General][Added] - Added `debugName` parameter to `renderApplication` to use as the display name for the React root tree

Reviewed By: rickhanlonii

Differential Revision: D26637787

fbshipit-source-id: 3ddc037573f4434101a9d3dcb5592a127193481c

Libraries/ReactNative/AppRegistry.js

@@ -124,6 +124,7 @@ const AppRegistry = {
           showArchitectureIndicator,
           scopedPerformanceLogger,
           appKey === 'LogBox',
+          appKey,
         );
       },
     };

Libraries/ReactNative/renderApplication.js

@@ -28,12 +28,13 @@ function renderApplication<Props: Object>(
   showArchitectureIndicator?: boolean,
   scopedPerformanceLogger?: IPerformanceLogger,
   isLogBox?: boolean,
+  debugName?: string,
 ) {
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
   const performanceLogger = scopedPerformanceLogger ?? GlobalPerformanceLogger;
 
-  const renderable = (
+  let renderable = (
     <PerformanceLoggerContext.Provider value={performanceLogger}>
       <AppContainer
         rootTag={rootTag}
@@ -47,6 +48,16 @@ function renderApplication<Props: Object>(
     </PerformanceLoggerContext.Provider>
   );
 
+  if (__DEV__ && debugName) {
+    const RootComponentWithMeaningfulName = ({children}) => children;
+    RootComponentWithMeaningfulName.displayName = `${debugName}(RootComponent)`;
+    renderable = (
+      <RootComponentWithMeaningfulName>
+        {renderable}
+      </RootComponentWithMeaningfulName>
+    );
+  }
+
   performanceLogger.startTimespan('renderApplication_React_render');
   performanceLogger.setExtra('usedReactFabric', fabric ? '1' : '0');