[add] AppRegistry provider methods

Adds support for the following methods in React Native:
- setComponentProviderInstrumentationHook
- setWrapperComponentProvider

packages/react-native-web/src/exports/AppRegistry/AppContainer.js

@@ -11,13 +11,14 @@
 import StyleSheet from '../StyleSheet';
 import View from '../View';
 import { any, node } from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, type ComponentType } from 'react';
 
 type Context = {
   rootTag: any
 };
 
 type Props = {
+  WrapperComponent?: ?ComponentType<*>,
   // $FlowFixMe
   children?: React.Children,
   rootTag: any
@@ -35,6 +36,7 @@ export default class AppContainer extends Component<Props, State> {
   };
 
   static propTypes = {
+    WrapperComponent: any,
     children: node,
     rootTag: any.isRequired
   };
@@ -46,14 +48,23 @@ export default class AppContainer extends Component<Props, State> {
   }
 
   render() {
+    const { children, WrapperComponent } = this.props;
+    let innerView = (
+      <View
+        children={children}
+        key={this.state.mainKey}
+        pointerEvents="box-none"
+        style={styles.appContainer}
+      />
+    );
+
+    if (WrapperComponent) {
+      innerView = <WrapperComponent>{innerView}</WrapperComponent>;
+    }
+
     return (
       <View pointerEvents="box-none" style={styles.appContainer}>
-        <View
-          children={this.props.children}
-          key={this.state.mainKey}
-          pointerEvents="box-none"
-          style={styles.appContainer}
-        />
+        {innerView}
       </View>
     );
   }

packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap

@@ -11,6 +11,7 @@ exports[`Additional CSS for styled app 1`] = `
 
 exports[`AppRegistry/renderApplication getApplication returns "element" and "getStyleElement" 1`] = `
 <AppContainer
+  WrapperComponent={undefined}
   rootTag={Object {}}
 >
   <RootComponent />

packages/react-native-web/src/exports/AppRegistry/index.js

@@ -18,6 +18,15 @@ const emptyObject = {};
 const runnables = {};
 
 export type ComponentProvider = () => ComponentType<any>;
+export type ComponentProviderInstrumentationHook = (
+  component: ComponentProvider
+) => ComponentType<any>;
+export type WrapperComponentProvider = any => ComponentType<*>;
+
+let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook = (
+  component: ComponentProvider
+) => component();
+let wrapperComponentProvider: ?WrapperComponentProvider;
 
 export type AppConfig = {
   appKey: string,
@@ -44,12 +53,21 @@ export default class AppRegistry {
     return runnables[appKey].getApplication(appParameters);
   }
 
-  static registerComponent(appKey: string, getComponentFunc: ComponentProvider): string {
+  static registerComponent(appKey: string, componentProvider: ComponentProvider): string {
     runnables[appKey] = {
-      getApplication: ({ initialProps } = emptyObject) =>
-        getApplication(getComponentFunc(), initialProps),
-      run: ({ initialProps = emptyObject, rootTag }) =>
-        renderApplication(getComponentFunc(), initialProps, rootTag)
+      getApplication: appParameters =>
+        getApplication(
+          componentProviderInstrumentationHook(componentProvider),
+          appParameters.initialProps || emptyObject,
+          wrapperComponentProvider && wrapperComponentProvider(appParameters)
+        ),
+      run: appParameters =>
+        renderApplication(
+          componentProviderInstrumentationHook(componentProvider),
+          appParameters.initialProps || emptyObject,
+          appParameters.rootTag,
+          wrapperComponentProvider && wrapperComponentProvider(appParameters)
+        )
     };
     return appKey;
   }
@@ -91,6 +109,14 @@ export default class AppRegistry {
     runnables[appKey].run(appParameters);
   }
 
+  static setComponentProviderInstrumentationHook(hook: ComponentProviderInstrumentationHook) {
+    componentProviderInstrumentationHook = hook;
+  }
+
+  static setWrapperComponentProvider(provider: WrapperComponentProvider) {
+    wrapperComponentProvider = provider;
+  }
+
   static unmountApplicationComponentAtRootTag(rootTag: Object) {
     unmountComponentAtNode(rootTag);
   }

packages/react-native-web/src/exports/AppRegistry/renderApplication.js

@@ -20,21 +20,26 @@ const renderFn = process.env.NODE_ENV !== 'production' ? render : hydrate;
 export default function renderApplication<Props: Object>(
   RootComponent: ComponentType<Props>,
   initialProps: Props,
-  rootTag: any
+  rootTag: any,
+  WrapperComponent?: ?ComponentType<*>
 ) {
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
   renderFn(
-    <AppContainer rootTag={rootTag}>
+    <AppContainer WrapperComponent={WrapperComponent} rootTag={rootTag}>
       <RootComponent {...initialProps} />
     </AppContainer>,
     rootTag
   );
 }
 
-export function getApplication(RootComponent: ComponentType<Object>, initialProps: Object): Object {
+export function getApplication(
+  RootComponent: ComponentType<Object>,
+  initialProps: Object,
+  WrapperComponent?: ?ComponentType<*>
+): Object {
   const element = (
-    <AppContainer rootTag={{}}>
+    <AppContainer WrapperComponent={WrapperComponent} rootTag={{}}>
       <RootComponent {...initialProps} />
     </AppContainer>
   );