Expose ability to unmount an application once ran

Author: edkimmel

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

@@ -38,6 +38,36 @@ describe.each([['concurrent'], ['legacy']])('AppRegistry', (mode) => {
       expect(callback).toHaveBeenCalledTimes(1);
     });
 
+    test('unmount ran application', () => {
+      const setMountedState = jest.fn();
+      const MountedStateComponent = () => {
+        React.useEffect(() => {
+          setMountedState(true);
+          return () => {
+            setMountedState(false);
+          };
+        }, []);
+        return <NoopComponent />;
+      };
+
+      AppRegistry.registerComponent('App', () => MountedStateComponent);
+      let application;
+      act(() => {
+        application = AppRegistry.runApplication('App', {
+          initialProps: {},
+          rootTag,
+          mode
+        });
+      });
+      expect(setMountedState).toHaveBeenCalledTimes(1);
+      expect(setMountedState).toHaveBeenLastCalledWith(true);
+      act(() => {
+        application.unmount();
+      });
+      expect(setMountedState).toHaveBeenCalledTimes(2);
+      expect(setMountedState).toHaveBeenLastCalledWith(false);
+    });
+
     test('styles roots in different documents', () => {
       AppRegistry.registerComponent('App', () => NoopComponent);
       act(() => {

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

@@ -13,6 +13,7 @@ import type { ComponentType, Node } from 'react';
 import invariant from 'fbjs/lib/invariant';
 import unmountComponentAtNode from '../unmountComponentAtNode';
 import renderApplication, { getApplication } from './renderApplication';
+import type { Application } from './renderApplication';
 
 type AppParams = Object;
 type Runnable = {|
@@ -75,7 +76,7 @@ export default class AppRegistry {
           appParameters ? appParameters.initialProps : emptyObject,
           wrapperComponentProvider && wrapperComponentProvider(appParameters)
         ),
-      run: (appParameters) =>
+      run: (appParameters): Application =>
         renderApplication(
           componentProviderInstrumentationHook(componentProvider),
           wrapperComponentProvider && wrapperComponentProvider(appParameters),
@@ -108,7 +109,7 @@ export default class AppRegistry {
     return appKey;
   }
 
-  static runApplication(appKey: string, appParameters: Object): void {
+  static runApplication(appKey: string, appParameters: Object): Application {
     const isDevelopment =
       process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test';
     if (isDevelopment) {
@@ -129,7 +130,7 @@ export default class AppRegistry {
         'This is either due to an import error during initialization or failure to call AppRegistry.registerComponent.'
     );
 
-    runnables[appKey].run(appParameters);
+    return runnables[appKey].run(appParameters);
   }
 
   static setComponentProviderInstrumentationHook(

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

@@ -16,6 +16,10 @@ import renderLegacy, { hydrateLegacy, render, hydrate } from '../render';
 import StyleSheet from '../StyleSheet';
 import React from 'react';
 
+export type Application = {
+  unmount: () => void
+};
+
 export default function renderApplication<Props: Object>(
   RootComponent: ComponentType<Props>,
   WrapperComponent?: ?ComponentType<*>,
@@ -26,7 +30,7 @@ export default function renderApplication<Props: Object>(
     mode: 'concurrent' | 'legacy',
     rootTag: any
   }
-) {
+): Application {
   const { hydrate: shouldHydrate, initialProps, mode, rootTag } = options;
   const renderFn = shouldHydrate
     ? mode === 'concurrent'
@@ -38,7 +42,7 @@ export default function renderApplication<Props: Object>(
 
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
-  renderFn(
+  return renderFn(
     <AppContainer
       WrapperComponent={WrapperComponent}
       ref={callback}

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

@@ -16,6 +16,7 @@ import {
   hydrateRoot as domHydrateRoot
 } from 'react-dom/client';
 
+import unmountComponentAtNode from '../unmountComponentAtNode';
 import { createSheet } from '../StyleSheet/dom';
 
 export function hydrate(element, root) {
@@ -32,10 +33,20 @@ export function render(element, root) {
 
 export function hydrateLegacy(element, root, callback) {
   createSheet(root);
-  return domLegacyHydrate(element, root, callback);
+  domLegacyHydrate(element, root, callback);
+  return {
+    unmount: function () {
+      return unmountComponentAtNode(root);
+    }
+  };
 }
 
 export default function renderLegacy(element, root, callback) {
   createSheet(root);
-  return domLegacyRender(element, root, callback);
+  domLegacyRender(element, root, callback);
+  return {
+    unmount: function () {
+      return unmountComponentAtNode(root);
+    }
+  };
 }