From d421c2530b96f10fe70986b2a1bd0bd4564a295c Mon Sep 17 00:00:00 2001
From: Ondrej Zaruba <onzruba@microsoft.com>
Date: Wed, 22 Dec 2021 14:51:07 +0100
Subject: [PATCH 1/5] Enable multiple roots with separate contexts

---
 .../ActivityIndicator/__tests__/index-test.js |  42 +-
 .../src/exports/AppRegistry/AppContainer.js   |  13 +-
 .../exports/AppRegistry/renderApplication.js  |  12 +-
 .../src/exports/AppRegistry/rootContext.js    |  14 +
 .../exports/Button/__tests__/index-test.js    |  16 +-
 .../exports/CheckBox/__tests__/index-test.js  |  38 +-
 .../src/exports/CheckBox/index.js             |  23 +-
 .../src/exports/Image/__tests__/index-test.js |  66 ++-
 .../src/exports/Image/index.js                |  20 +-
 .../ImageBackground/__tests__/index.js        |   8 +-
 .../src/exports/Modal/ModalAnimation.js       |  16 +-
 .../src/exports/Modal/ModalFocusTrap.js       |  16 +-
 .../src/exports/Modal/__tests__/index.js      |  73 +--
 .../src/exports/Picker/PickerItem.js          |   6 +-
 .../exports/Picker/__tests__/index-test.js    |  14 +-
 .../src/exports/Picker/index.js               |  78 +--
 .../exports/Pressable/__tests__/index-test.js |  40 +-
 .../ProgressBar/__tests__/index-test.js       |   6 +-
 .../ScrollView/__tests__/index-test.js        |  18 +-
 ...reateStyleResolver.js => StyleResolver.js} | 150 +++---
 .../__tests__/createStyleResolver-test.js     |   4 +-
 .../exports/StyleSheet/createCSSStyleSheet.js |   9 +-
 .../StyleSheet/createOrderedCSSStyleSheet.js  |  10 +-
 .../src/exports/StyleSheet/css.js             |   4 +-
 .../src/exports/StyleSheet/styleResolver.js   |  12 -
 .../exports/Switch/__tests__/index-test.js    |  18 +-
 .../src/exports/Switch/index.js               |  30 +-
 .../src/exports/Text/__tests__/index-test.js  |  78 +--
 .../src/exports/Text/index.js                 |   4 +-
 .../exports/TextInput/__tests__/index-test.js | 116 ++--
 .../src/exports/TextInput/index.js            | 508 +++++++++---------
 .../__tests__/index-test.js                   |   6 +-
 .../src/exports/View/__tests__/index-test.js  |  68 ++-
 .../src/exports/View/index.js                 |   4 +-
 .../createElement/__tests__/index-test.js     | 393 +++++++++-----
 .../src/exports/createElement/index.js        |   4 +-
 .../createDOMProps/__tests__/index-test.js    |  65 ++-
 .../src/modules/createDOMProps/index.js       |   3 +-
 .../src/modules/usePlatformMethods/index.js   |  34 +-
 .../src/vendor/renderRootContext.js           |  35 ++
 40 files changed, 1202 insertions(+), 872 deletions(-)
 create mode 100644 packages/react-native-web/src/exports/AppRegistry/rootContext.js
 rename packages/react-native-web/src/exports/StyleSheet/{createStyleResolver.js => StyleResolver.js} (65%)
 delete mode 100644 packages/react-native-web/src/exports/StyleSheet/styleResolver.js
 create mode 100644 packages/react-native-web/src/vendor/renderRootContext.js

diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js
index f5ae61b588..0509c173c7 100644
--- a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js
@@ -4,56 +4,64 @@ import ActivityIndicator from '..';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 
 describe('components/ActivityIndicator', () => {
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = render(<ActivityIndicator accessibilityLabel="accessibility label" />);
+      const { container } = renderRootContext(
+        <ActivityIndicator accessibilityLabel="accessibility label" />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = render(<ActivityIndicator accessibilityLiveRegion="polite" />);
+      const { container } = renderRootContext(
+        <ActivityIndicator accessibilityLiveRegion="polite" />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "animating"', () => {
     test('is "true"', () => {
-      const { container } = render(<ActivityIndicator animating={true} />);
+      const { container } = renderRootContext(<ActivityIndicator animating={true} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('is "false"', () => {
-      const { container } = render(<ActivityIndicator animating={false} />);
+      const { container } = renderRootContext(<ActivityIndicator animating={false} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('prop "color"', () => {
-    const { container } = render(<ActivityIndicator color="red" />);
+    const { container } = renderRootContext(<ActivityIndicator color="red" />);
     const svg = container.firstChild.querySelector('svg');
     expect(svg).toMatchSnapshot();
   });
 
   describe('prop "dataSet"', () => {
     test('value is set', () => {
-      const { container } = render(<ActivityIndicator dataSet={{ one: 'one', two: 'two' }} />);
+      const { container } = renderRootContext(
+        <ActivityIndicator dataSet={{ one: 'one', two: 'two' }} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "hidesWhenStopped"', () => {
     test('is "true"', () => {
-      const { container } = render(<ActivityIndicator animating={false} hidesWhenStopped={true} />);
+      const { container } = renderRootContext(
+        <ActivityIndicator animating={false} hidesWhenStopped={true} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('is "false"', () => {
-      const { container } = render(
+      const { container } = renderRootContext(
         <ActivityIndicator animating={false} hidesWhenStopped={false} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -62,7 +70,7 @@ describe('components/ActivityIndicator', () => {
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = render(<ActivityIndicator nativeID="123" />);
+      const { container } = renderRootContext(<ActivityIndicator nativeID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -72,7 +80,7 @@ describe('components/ActivityIndicator', () => {
       const onBlur = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<ActivityIndicator onBlur={onBlur} ref={ref} />);
+        renderRootContext(<ActivityIndicator onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       const body = createEventTarget(document.body);
@@ -89,7 +97,7 @@ describe('components/ActivityIndicator', () => {
       const onFocus = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<ActivityIndicator onFocus={onFocus} ref={ref} />);
+        renderRootContext(<ActivityIndicator onFocus={onFocus} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -102,33 +110,33 @@ describe('components/ActivityIndicator', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      render(<ActivityIndicator ref={ref} />);
+      renderRootContext(<ActivityIndicator ref={ref} />);
       expect(ref).toBeCalled();
     });
   });
 
   describe('prop "size"', () => {
     test('is "large"', () => {
-      const { container } = render(<ActivityIndicator size="large" />);
+      const { container } = renderRootContext(<ActivityIndicator size="large" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('is a number', () => {
-      const { container } = render(<ActivityIndicator size={30} />);
+      const { container } = renderRootContext(<ActivityIndicator size={30} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = render(<ActivityIndicator style={{ borderWidth: 5 }} />);
+      const { container } = renderRootContext(<ActivityIndicator style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = render(<ActivityIndicator testID="123" />);
+      const { container } = renderRootContext(<ActivityIndicator testID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
diff --git a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js b/packages/react-native-web/src/exports/AppRegistry/AppContainer.js
index cc5283bfc6..952c14c808 100644
--- a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js
+++ b/packages/react-native-web/src/exports/AppRegistry/AppContainer.js
@@ -9,6 +9,8 @@
  */
 
 import * as React from 'react';
+import RootContext from './rootContext';
+import StyleResolver from '../StyleSheet/StyleResolver';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
 
@@ -16,11 +18,10 @@ type Props = {
   WrapperComponent?: ?React.ComponentType<*>,
   // $FlowFixMe
   children?: React.Children,
-  rootTag: any
+  rootTag: any,
+  styleResolver: typeof StyleResolver
 };
 
-const RootTagContext: React.Context<any> = React.createContext(null);
-
 export default function AppContainer(props: Props): React.Node {
   const { children, WrapperComponent } = props;
 
@@ -31,13 +32,13 @@ export default function AppContainer(props: Props): React.Node {
   if (WrapperComponent) {
     innerView = <WrapperComponent>{innerView}</WrapperComponent>;
   }
-
+  const rootContext = { rootTag: props.rootTag, styleResolver: props.styleResolver };
   return (
-    <RootTagContext.Provider value={props.rootTag}>
+    <RootContext.Provider value={rootContext}>
       <View pointerEvents="box-none" style={styles.appContainer}>
         {innerView}
       </View>
-    </RootTagContext.Provider>
+    </RootContext.Provider>
   );
 }
 
diff --git a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
index 4ea3c4270d..da6613faeb 100644
--- a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
+++ b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
@@ -13,7 +13,7 @@ import type { ComponentType, Node } from 'react';
 import AppContainer from './AppContainer';
 import invariant from 'fbjs/lib/invariant';
 import render, { hydrate } from '../render';
-import styleResolver from '../StyleSheet/styleResolver';
+import StyleResolver from '../StyleSheet/StyleResolver';
 import React from 'react';
 
 export default function renderApplication<Props: Object>(
@@ -29,10 +29,15 @@ export default function renderApplication<Props: Object>(
   const { hydrate: shouldHydrate, initialProps, rootTag } = options;
   const renderFn = shouldHydrate ? hydrate : render;
 
+  const styleResolver = new StyleResolver(options.rootTag);
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
   renderFn(
-    <AppContainer WrapperComponent={WrapperComponent} rootTag={rootTag}>
+    <AppContainer
+      WrapperComponent={WrapperComponent}
+      rootTag={rootTag}
+      styleResolver={styleResolver}
+    >
       <RootComponent {...initialProps} />
     </AppContainer>,
     rootTag,
@@ -45,8 +50,9 @@ export function getApplication(
   initialProps: Object,
   WrapperComponent?: ?ComponentType<*>
 ): {| element: Node, getStyleElement: (Object) => Node |} {
+  const styleResolver = new StyleResolver();
   const element = (
-    <AppContainer WrapperComponent={WrapperComponent} rootTag={{}}>
+    <AppContainer WrapperComponent={WrapperComponent} rootTag={{}} styleResolver={styleResolver}>
       <RootComponent {...initialProps} />
     </AppContainer>
   );
diff --git a/packages/react-native-web/src/exports/AppRegistry/rootContext.js b/packages/react-native-web/src/exports/AppRegistry/rootContext.js
new file mode 100644
index 0000000000..d217b7e76b
--- /dev/null
+++ b/packages/react-native-web/src/exports/AppRegistry/rootContext.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Ondrej Zaruba.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import StyleResolver from '../../exports/StyleSheet/StyleResolver';
+
+const RootContext: { styleResoler: StyleResolver, rootTag: Node } = React.createContext(null);
+export default RootContext;
diff --git a/packages/react-native-web/src/exports/Button/__tests__/index-test.js b/packages/react-native-web/src/exports/Button/__tests__/index-test.js
index e901ab00ef..7e538d66eb 100644
--- a/packages/react-native-web/src/exports/Button/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Button/__tests__/index-test.js
@@ -2,22 +2,24 @@ import Button from '..';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 
 describe('components/Button', () => {
   test('prop "accessibilityLabel"', () => {
-    const { container } = render(<Button accessibilityLabel="accessibility label" title="" />);
+    const { container } = renderRootContext(
+      <Button accessibilityLabel="accessibility label" title="" />
+    );
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "color"', () => {
     const color = 'rgb(0, 0, 255)';
-    const { container } = render(<Button color={color} title="" />);
+    const { container } = renderRootContext(<Button color={color} title="" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "disabled"', () => {
-    const { container } = render(<Button disabled={true} title="" />);
+    const { container } = renderRootContext(<Button disabled={true} title="" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -25,7 +27,7 @@ describe('components/Button', () => {
     const onPress = jest.fn();
     const ref = React.createRef();
     act(() => {
-      render(<Button onPress={onPress} ref={ref} title="" />);
+      renderRootContext(<Button onPress={onPress} ref={ref} title="" />);
     });
     const target = createEventTarget(ref.current);
     act(() => {
@@ -36,12 +38,12 @@ describe('components/Button', () => {
   });
 
   test('prop "testID"', () => {
-    const { container } = render(<Button testID="123" title="" />);
+    const { container } = renderRootContext(<Button testID="123" title="" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "title"', () => {
-    const { container } = render(<Button title="Click me" />);
+    const { container } = renderRootContext(<Button title="Click me" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
index ecee57950a..f97bf8d3cd 100644
--- a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
@@ -4,7 +4,7 @@ import CheckBox from '../';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 
 function findCheckbox(container) {
   return container.firstChild.querySelector('input');
@@ -13,40 +13,42 @@ function findCheckbox(container) {
 describe('CheckBox', () => {
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = render(<CheckBox accessibilityLabel="accessibility label" />);
+      const { container } = renderRootContext(
+        <CheckBox accessibilityLabel="accessibility label" />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "color"', () => {
     test('value is set', () => {
-      const { container } = render(<CheckBox color="lightblue" value={true} />);
+      const { container } = renderRootContext(<CheckBox color="lightblue" value={true} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "dataSet"', () => {
     test('value is set', () => {
-      const { container } = render(<CheckBox dataSet={{ one: 'one', two: 'two' }} />);
+      const { container } = renderRootContext(<CheckBox dataSet={{ one: 'one', two: 'two' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "disabled"', () => {
     test('when "false" a default checkbox is rendered', () => {
-      const { container } = render(<CheckBox />);
+      const { container } = renderRootContext(<CheckBox />);
       expect(findCheckbox(container).disabled).toBe(false);
     });
 
     test('when "true" a disabled checkbox is rendered', () => {
-      const { container } = render(<CheckBox disabled />);
+      const { container } = renderRootContext(<CheckBox disabled />);
       expect(findCheckbox(container).disabled).toBe(true);
     });
   });
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = render(<CheckBox nativeID="123" />);
+      const { container } = renderRootContext(<CheckBox nativeID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -56,7 +58,7 @@ describe('CheckBox', () => {
       const onBlur = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<CheckBox onBlur={onBlur} ref={ref} />);
+        renderRootContext(<CheckBox onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       const body = createEventTarget(document.body);
@@ -71,7 +73,7 @@ describe('CheckBox', () => {
   describe('prop "onChange"', () => {
     test('is called with the event object', () => {
       const onChange = jest.fn();
-      const { container } = render(<CheckBox onChange={onChange} value={false} />);
+      const { container } = renderRootContext(<CheckBox onChange={onChange} value={false} />);
       const checkbox = findCheckbox(container);
       checkbox.click(); // Needed to get ReactDOM to trigger 'change' event
       expect(onChange).toHaveBeenCalled();
@@ -83,7 +85,7 @@ describe('CheckBox', () => {
       const onFocus = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<CheckBox onFocus={onFocus} ref={ref} />);
+        renderRootContext(<CheckBox onFocus={onFocus} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -96,7 +98,9 @@ describe('CheckBox', () => {
   describe('prop "onValueChange"', () => {
     test('when value is "false" it receives "true"', () => {
       const onValueChange = jest.fn();
-      const { container } = render(<CheckBox onValueChange={onValueChange} value={false} />);
+      const { container } = renderRootContext(
+        <CheckBox onValueChange={onValueChange} value={false} />
+      );
       const checkbox = findCheckbox(container);
       checkbox.click(); // Needed to get ReactDOM to trigger 'change' event
       expect(onValueChange).toHaveBeenCalledWith(true);
@@ -104,7 +108,7 @@ describe('CheckBox', () => {
 
     test('when value is "true" it receives "false"', () => {
       const onValueChange = jest.fn();
-      const { container } = render(<CheckBox onValueChange={onValueChange} value />);
+      const { container } = renderRootContext(<CheckBox onValueChange={onValueChange} value />);
       const checkbox = findCheckbox(container);
       checkbox.click(); // Needed to get ReactDOM to trigger 'change' event
       expect(onValueChange).toHaveBeenCalledWith(false);
@@ -114,33 +118,33 @@ describe('CheckBox', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      render(<CheckBox ref={ref} />);
+      renderRootContext(<CheckBox ref={ref} />);
       expect(ref).toBeCalled();
     });
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = render(<CheckBox style={{ borderWidth: 5 }} />);
+      const { container } = renderRootContext(<CheckBox style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = render(<CheckBox testID="123" />);
+      const { container } = renderRootContext(<CheckBox testID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "value"', () => {
     test('when "false" an unchecked checkbox is rendered', () => {
-      const { container } = render(<CheckBox value={false} />);
+      const { container } = renderRootContext(<CheckBox value={false} />);
       expect(findCheckbox(container).checked).toBe(false);
     });
 
     test('when "true" a checked checkbox is rendered', () => {
-      const { container } = render(<CheckBox value />);
+      const { container } = renderRootContext(<CheckBox value />);
       expect(findCheckbox(container).checked).toBe(true);
     });
   });
diff --git a/packages/react-native-web/src/exports/CheckBox/index.js b/packages/react-native-web/src/exports/CheckBox/index.js
index 5c5bda2d7b..0d195e2af5 100644
--- a/packages/react-native-web/src/exports/CheckBox/index.js
+++ b/packages/react-native-web/src/exports/CheckBox/index.js
@@ -15,6 +15,7 @@ import * as React from 'react';
 import createElement from '../createElement';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
+import RootContext from '../AppRegistry/rootContext';
 
 type CheckBoxProps = {
   ...ViewProps,
@@ -31,6 +32,8 @@ const CheckBox: React.AbstractComponent<
 > = React.forwardRef((props, forwardedRef) => {
   const { color, disabled, onChange, onValueChange, style, value, ...other } = props;
 
+  const rootContext = React.useContext(RootContext);
+
   function handleChange(event: Object) {
     const value = event.nativeEvent.target.checked;
     event.nativeEvent.value = value;
@@ -51,14 +54,18 @@ const CheckBox: React.AbstractComponent<
     />
   );
 
-  const nativeControl = createElement('input', {
-    checked: value,
-    disabled: disabled,
-    onChange: handleChange,
-    ref: forwardedRef,
-    style: [styles.nativeControl, styles.cursorInherit],
-    type: 'checkbox'
-  });
+  const nativeControl = createElement(
+    'input',
+    {
+      checked: value,
+      disabled: disabled,
+      onChange: handleChange,
+      ref: forwardedRef,
+      style: [styles.nativeControl, styles.cursorInherit],
+      type: 'checkbox'
+    },
+    rootContext.styleResolver
+  );
 
   return (
     <View
diff --git a/packages/react-native-web/src/exports/Image/__tests__/index-test.js b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
index a08bad5659..4f8918c073 100644
--- a/packages/react-native-web/src/exports/Image/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
@@ -7,7 +7,7 @@ import Image from '../';
 import ImageLoader, { ImageUriCache } from '../../../modules/ImageLoader';
 import PixelRatio from '../../PixelRatio';
 import React from 'react';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 
 const originalImage = window.Image;
 
@@ -23,7 +23,7 @@ describe('components/Image', () => {
 
   test('prop "accessibilityLabel"', () => {
     const defaultSource = { uri: 'https://google.com/favicon.ico' };
-    const { container } = render(
+    const { container } = renderRootContext(
       <Image accessibilityLabel="accessibilityLabel" defaultSource={defaultSource} />
     );
     expect(container.firstChild).toMatchSnapshot();
@@ -31,21 +31,21 @@ describe('components/Image', () => {
 
   test('prop "blurRadius"', () => {
     const defaultSource = { uri: 'https://google.com/favicon.ico' };
-    const { container } = render(<Image blurRadius={5} defaultSource={defaultSource} />);
+    const { container } = renderRootContext(<Image blurRadius={5} defaultSource={defaultSource} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "defaultSource"', () => {
     test('sets background image when value is an object', () => {
       const defaultSource = { uri: 'https://google.com/favicon.ico' };
-      const { container } = render(<Image defaultSource={defaultSource} />);
+      const { container } = renderRootContext(<Image defaultSource={defaultSource} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('sets background image when value is a string', () => {
       // emulate require-ed asset
       const defaultSource = 'https://google.com/favicon.ico';
-      const { container } = render(<Image defaultSource={defaultSource} />);
+      const { container } = renderRootContext(<Image defaultSource={defaultSource} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -55,7 +55,7 @@ describe('components/Image', () => {
         height: 10,
         width: 20
       };
-      const { container } = render(<Image defaultSource={defaultSource} />);
+      const { container } = renderRootContext(<Image defaultSource={defaultSource} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -65,7 +65,7 @@ describe('components/Image', () => {
         height: 10,
         width: 20
       };
-      const { container } = render(
+      const { container } = renderRootContext(
         <Image defaultSource={defaultSource} style={{ height: 20, width: 40 }} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -74,17 +74,19 @@ describe('components/Image', () => {
 
   test('prop "draggable"', () => {
     const defaultSource = { uri: 'https://google.com/favicon.ico' };
-    const { container } = render(<Image defaultSource={defaultSource} draggable={true} />);
+    const { container } = renderRootContext(
+      <Image defaultSource={defaultSource} draggable={true} />
+    );
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "focusable"', () => {
-    const { container } = render(<Image focusable={true} />);
+    const { container } = renderRootContext(<Image focusable={true} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "nativeID"', () => {
-    const { container } = render(<Image nativeID="nativeID" />);
+    const { container } = renderRootContext(<Image nativeID="nativeID" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -97,7 +99,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      render(
+      renderRootContext(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -119,7 +121,7 @@ describe('components/Image', () => {
       const onLoadEndStub = jest.fn();
       const uri = 'https://test.com/img.jpg';
       ImageUriCache.add(uri);
-      render(
+      renderRootContext(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -136,7 +138,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      const { rerender } = render(
+      const { rerender } = renderRootContext(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -162,7 +164,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      const { rerender } = render(
+      const { rerender } = renderRootContext(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -188,7 +190,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      const { rerender } = render(
+      const { rerender } = renderRootContext(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -214,7 +216,7 @@ describe('components/Image', () => {
   describe('prop "resizeMode"', () => {
     ['contain', 'cover', 'none', 'repeat', 'stretch', undefined].forEach((resizeMode) => {
       test(`value "${resizeMode}"`, () => {
-        const { container } = render(<Image resizeMode={resizeMode} />);
+        const { container } = renderRootContext(<Image resizeMode={resizeMode} />);
         expect(container.firstChild).toMatchSnapshot();
       });
     });
@@ -224,14 +226,14 @@ describe('components/Image', () => {
     test('does not throw', () => {
       const sources = [null, '', {}, { uri: '' }, { uri: 'https://google.com' }];
       sources.forEach((source) => {
-        expect(() => render(<Image source={source} />)).not.toThrow();
+        expect(() => renderRootContext(<Image source={source} />)).not.toThrow();
       });
     });
 
     test('is not set immediately if the image has not already been loaded', () => {
       const uri = 'https://google.com/favicon.ico';
       const source = { uri };
-      const { container } = render(<Image source={source} />);
+      const { container } = renderRootContext(<Image source={source} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -242,7 +244,9 @@ describe('components/Image', () => {
       });
       return Image.prefetch(uri).then(() => {
         const source = { uri };
-        const { container } = render(<Image source={source} />, { disableLifecycleMethods: true });
+        const { container } = renderRootContext(<Image source={source} />, {
+          disableLifecycleMethods: true
+        });
         expect(container.firstChild).toMatchSnapshot();
         ImageUriCache.remove(uri);
       });
@@ -255,7 +259,7 @@ describe('components/Image', () => {
       ImageUriCache.add(uriTwo);
 
       // initial render
-      const { container, rerender } = render(<Image source={{ uri: uriOne }} />);
+      const { container, rerender } = renderRootContext(<Image source={{ uri: uriOne }} />);
       ImageUriCache.remove(uriOne);
       expect(container.firstChild).toMatchSnapshot();
       // props update
@@ -268,7 +272,7 @@ describe('components/Image', () => {
 
     test('is correctly updated when missing in initial render', () => {
       const uri = 'https://testing.com/img.jpg';
-      const { container, rerender } = render(<Image />);
+      const { container, rerender } = renderRootContext(<Image />);
       act(() => {
         rerender(<Image source={{ uri }} />);
       });
@@ -282,7 +286,9 @@ describe('components/Image', () => {
       ImageLoader.load = jest.fn().mockImplementationOnce((_, onLoad, onError) => {
         loadCallback = onLoad;
       });
-      const { container } = render(<Image defaultSource={{ uri: defaultUri }} source={{ uri }} />);
+      const { container } = renderRootContext(
+        <Image defaultSource={{ uri: defaultUri }} source={{ uri }} />
+      );
       expect(container.firstChild).toMatchSnapshot();
       act(() => {
         loadCallback();
@@ -299,12 +305,12 @@ describe('components/Image', () => {
       }));
 
       PixelRatio.get = jest.fn(() => 1.0);
-      let { container } = render(<Image source={1} />);
+      let { container } = renderRootContext(<Image source={1} />);
       expect(container.querySelector('img').src).toBe('http://localhost/static/img.png');
 
       act(() => {
         PixelRatio.get = jest.fn(() => 2.2);
-        ({ container } = render(<Image source={1} />));
+        ({ container } = renderRootContext(<Image source={1} />));
       });
       expect(container.querySelector('img').src).toBe('http://localhost/static/img@2x.png');
     });
@@ -312,12 +318,12 @@ describe('components/Image', () => {
 
   describe('prop "style"', () => {
     test('supports "resizeMode" property', () => {
-      const { container } = render(<Image style={{ resizeMode: 'contain' }} />);
+      const { container } = renderRootContext(<Image style={{ resizeMode: 'contain' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('supports "shadow" properties (convert to filter)', () => {
-      const { container } = render(
+      const { container } = renderRootContext(
         <Image style={{ shadowColor: 'red', shadowOffset: { width: 1, height: 1 } }} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -325,20 +331,22 @@ describe('components/Image', () => {
 
     test('supports "tintcolor" property (convert to filter)', () => {
       const defaultSource = { uri: 'https://google.com/favicon.ico' };
-      const { container } = render(
+      const { container } = renderRootContext(
         <Image defaultSource={defaultSource} style={{ tintColor: 'red' }} />
       );
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('removes other unsupported View styles', () => {
-      const { container } = render(<Image style={{ overlayColor: 'red', tintColor: 'blue' }} />);
+      const { container } = renderRootContext(
+        <Image style={{ overlayColor: 'red', tintColor: 'blue' }} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('prop "testID"', () => {
-    const { container } = render(<Image testID="testID" />);
+    const { container } = renderRootContext(<Image testID="testID" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index 7cbde9f587..7b3aeebc31 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -20,6 +20,7 @@ import PixelRatio from '../PixelRatio';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
 import View from '../View';
+import RootContext from '../AppRegistry/rootContext';
 
 export type { ImageProps };
 
@@ -184,6 +185,7 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
     const hiddenImageRef = React.useRef(null);
     const filterRef = React.useRef(_filterId++);
     const requestRef = React.useRef(null);
+    const rootContext = React.useContext(RootContext);
     const shouldDisplaySource = state === LOADED || (state === LOADING && defaultSource == null);
     const [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle(
       style,
@@ -199,13 +201,17 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
 
     // Accessibility image allows users to trigger the browser's image context menu
     const hiddenImage = displayImageUri
-      ? createElement('img', {
-          alt: accessibilityLabel || '',
-          classList: [classes.accessibilityImage],
-          draggable: draggable || false,
-          ref: hiddenImageRef,
-          src: displayImageUri
-        })
+      ? createElement(
+          'img',
+          {
+            alt: accessibilityLabel || '',
+            classList: [classes.accessibilityImage],
+            draggable: draggable || false,
+            ref: hiddenImageRef,
+            src: displayImageUri
+          },
+          rootContext.styleResolver
+        )
       : null;
 
     function getBackgroundSize(): ?string {
diff --git a/packages/react-native-web/src/exports/ImageBackground/__tests__/index.js b/packages/react-native-web/src/exports/ImageBackground/__tests__/index.js
index eb1e925bb0..4cd1b74422 100644
--- a/packages/react-native-web/src/exports/ImageBackground/__tests__/index.js
+++ b/packages/react-native-web/src/exports/ImageBackground/__tests__/index.js
@@ -2,7 +2,7 @@
 
 import ImageBackground from '..';
 import React from 'react';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 import Text from '../../Text';
 
 function findImage(container) {
@@ -12,7 +12,7 @@ function findImage(container) {
 describe('components/ImageBackground', () => {
   describe('prop "children"', () => {
     test('render child content', () => {
-      const { getByText } = render(
+      const { getByText } = renderRootContext(
         <ImageBackground>
           <Text>Hello World!</Text>
         </ImageBackground>
@@ -24,7 +24,7 @@ describe('components/ImageBackground', () => {
   describe('prop "imageStyle"', () => {
     test('sets the style of the underlying Image', () => {
       const imageStyle = { width: 40, height: 60 };
-      const { container } = render(<ImageBackground imageStyle={imageStyle} />);
+      const { container } = renderRootContext(<ImageBackground imageStyle={imageStyle} />);
       expect(findImage(container).getAttribute('style')).toBe('height: 60px; width: 40px;');
     });
   });
@@ -32,7 +32,7 @@ describe('components/ImageBackground', () => {
   describe('prop "style"', () => {
     test('sets the style of the container View', () => {
       const style = { margin: 40 };
-      const { container } = render(<ImageBackground style={style} />);
+      const { container } = renderRootContext(<ImageBackground style={style} />);
       expect(container.firstChild.getAttribute('style')).toEqual('margin: 40px 40px 40px 40px;');
     });
   });
diff --git a/packages/react-native-web/src/exports/Modal/ModalAnimation.js b/packages/react-native-web/src/exports/Modal/ModalAnimation.js
index fece0d5979..e79b8a9438 100644
--- a/packages/react-native-web/src/exports/Modal/ModalAnimation.js
+++ b/packages/react-native-web/src/exports/Modal/ModalAnimation.js
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import StyleSheet from '../StyleSheet';
 import createElement from '../createElement';
+import RootContext from '../AppRegistry/rootContext';
 
 const ANIMATION_DURATION = 300;
 
@@ -37,6 +38,7 @@ function ModalAnimation(props: ModalAnimationProps): React.Node {
 
   const [isRendering, setIsRendering] = React.useState(false);
   const wasVisible = React.useRef(false);
+  const rootContext = React.useContext(RootContext);
 
   const isAnimated = animationType && animationType !== 'none';
 
@@ -74,11 +76,15 @@ function ModalAnimation(props: ModalAnimationProps): React.Node {
   }, [isAnimated, visible, animationEndCallback]);
 
   return isRendering || visible
-    ? createElement('div', {
-        style: isRendering ? getAnimationStyle(animationType, visible) : styles.hidden,
-        onAnimationEnd: animationEndCallback,
-        children
-      })
+    ? createElement(
+        'div',
+        {
+          style: isRendering ? getAnimationStyle(animationType, visible) : styles.hidden,
+          onAnimationEnd: animationEndCallback,
+          children
+        },
+        rootContext.styleResolver
+      )
     : null;
 }
 
diff --git a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
index 5b11636af8..04a255d03f 100644
--- a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
+++ b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
@@ -14,6 +14,7 @@ import View from '../View';
 import createElement from '../createElement';
 import StyleSheet from '../StyleSheet';
 import UIManager from '../UIManager';
+import RootContext from '../AppRegistry/rootContext';
 
 /**
  * This Component is used to "wrap" the modal we're opening
@@ -24,11 +25,16 @@ import UIManager from '../UIManager';
  */
 
 const FocusBracket = () => {
-  return createElement('div', {
-    accessibilityRole: 'none',
-    tabIndex: 0,
-    style: styles.focusBracket
-  });
+  const rootContext = React.useContext(RootContext);
+  return createElement(
+    'div',
+    {
+      accessibilityRole: 'none',
+      tabIndex: 0,
+      style: styles.focusBracket
+    },
+    rootContext.styleResolver
+  );
 };
 
 function attemptFocus(element: any) {
diff --git a/packages/react-native-web/src/exports/Modal/__tests__/index.js b/packages/react-native-web/src/exports/Modal/__tests__/index.js
index ea1e4fbac7..566355ce53 100644
--- a/packages/react-native-web/src/exports/Modal/__tests__/index.js
+++ b/packages/react-native-web/src/exports/Modal/__tests__/index.js
@@ -2,11 +2,12 @@
 
 import Modal from '..';
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 
 describe('components/Modal', () => {
   test('visible by default', () => {
-    const { getByTestId } = render(
+    const { getByTestId } = renderRootContext(
       <Modal>
         <a data-testid={'inside'} href={'#hello'}>
           Hello
@@ -19,7 +20,7 @@ describe('components/Modal', () => {
   });
 
   test('render children when visible', () => {
-    const { getByTestId } = render(
+    const { getByTestId } = renderRootContext(
       <Modal visible={true}>
         <a data-testid={'inside'} href={'#hello'}>
           Hello
@@ -32,7 +33,7 @@ describe('components/Modal', () => {
   });
 
   test('does not render children when not visible', () => {
-    const { container } = render(
+    const { container } = renderRootContext(
       <Modal visible={false}>
         <a data-testid={'inside'} href={'#hello'}>
           Hello
@@ -43,7 +44,7 @@ describe('components/Modal', () => {
   });
 
   test('invisible modals will not be the active modal', () => {
-    const { getByTestId } = render(
+    const { getByTestId } = renderRootContext(
       <>
         <Modal key={'modal-a'} visible={true}>
           <a data-testid={'inside-a'} href={'#hello'}>
@@ -64,7 +65,7 @@ describe('components/Modal', () => {
   });
 
   test('multiple modals will only mark one as active', () => {
-    const { getByTestId } = render(
+    const { getByTestId } = renderRootContext(
       <>
         <Modal key={'modal-a'} visible={true}>
           <a data-testid={'inside-a'} href={'#hello'}>
@@ -85,7 +86,7 @@ describe('components/Modal', () => {
   });
 
   test('modal active state changes propogate', () => {
-    const { rerender, getByTestId } = render(
+    const { rerender, getByTestId } = renderRootContext(
       <>
         <Modal key={'modal-a'} visible={true}>
           <a data-testid={'inside-a'} href={'#hello'}>
@@ -122,7 +123,7 @@ describe('components/Modal', () => {
   });
 
   test('removed modal sets others active state', () => {
-    const { rerender, getByTestId } = render(
+    const { rerender, getByTestId } = renderRootContext(
       <>
         <Modal key={'modal-a'} visible={true}>
           <a data-testid={'inside-a'} href={'#hello'}>
@@ -153,31 +154,31 @@ describe('components/Modal', () => {
 
   test('executes onShow callback when initially showing', () => {
     const onShowCallback = jest.fn();
-    render(<Modal onShow={onShowCallback} visible={true} />);
+    renderRootContext(<Modal onShow={onShowCallback} visible={true} />);
     expect(onShowCallback).toBeCalledTimes(1);
   });
 
   test('does not execute onShow callback when initially hidden', () => {
     const onShowCallback = jest.fn();
-    render(<Modal onShow={onShowCallback} visible={false} />);
+    renderRootContext(<Modal onShow={onShowCallback} visible={false} />);
     expect(onShowCallback).toBeCalledTimes(0);
   });
 
   test('does not execute onDismiss callback when initially hidden', () => {
     const onDismissCallback = jest.fn();
-    render(<Modal onDismiss={onDismissCallback} visible={false} />);
+    renderRootContext(<Modal onDismiss={onDismissCallback} visible={false} />);
     expect(onDismissCallback).toBeCalledTimes(0);
   });
 
   test('does not execute onDismiss callback when initially showing', () => {
     const onDismissCallback = jest.fn();
-    render(<Modal onDismiss={onDismissCallback} visible={true} />);
+    renderRootContext(<Modal onDismiss={onDismissCallback} visible={true} />);
     expect(onDismissCallback).toBeCalledTimes(0);
   });
 
   test('executes onShow callback when visibility changes', () => {
     const onShowCallback = jest.fn();
-    const { rerender } = render(<Modal onShow={onShowCallback} visible={false} />);
+    const { rerender } = renderRootContext(<Modal onShow={onShowCallback} visible={false} />);
     expect(onShowCallback).toBeCalledTimes(0);
     rerender(<Modal onShow={onShowCallback} visible={true} />);
     expect(onShowCallback).toBeCalledTimes(1);
@@ -185,14 +186,16 @@ describe('components/Modal', () => {
 
   test('executes onDismiss callback when visibility changes', () => {
     const onDismissCallback = jest.fn();
-    const { rerender } = render(<Modal onDismiss={onDismissCallback} visible={true} />);
+    const { rerender } = renderRootContext(<Modal onDismiss={onDismissCallback} visible={true} />);
     expect(onDismissCallback).toBeCalledTimes(0);
     rerender(<Modal onDismiss={onDismissCallback} visible={false} />);
     expect(onDismissCallback).toBeCalledTimes(1);
   });
 
   test('animationTypes none is the same as omitting', () => {
-    const { rerender, baseElement } = render(<Modal animationType={'none'} visible={true} />);
+    const { rerender, baseElement } = renderRootContext(
+      <Modal animationType={'none'} visible={true} />
+    );
     const animationNoneElement = baseElement.lastChild.lastChild;
     const animationNoneStyle = window.getComputedStyle(animationNoneElement, null);
     rerender(<Modal visible={true} />);
@@ -214,7 +217,7 @@ describe('components/Modal', () => {
   });
 
   test('creates view with role="modal" when active', () => {
-    const { baseElement } = render(
+    const { baseElement } = renderRootContext(
       <Modal visible={true}>
         <a href={'#hello'}>Hello</a>
       </Modal>
@@ -226,7 +229,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is trapped by default', () => {
-    render(
+    renderRootContext(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -246,7 +249,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is trapped when active flag changes', () => {
-    const { rerender } = render(
+    const { rerender } = renderRootContext(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -281,7 +284,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is brought back to the element that triggered modal after closing', () => {
-    const { rerender } = render(
+    const { rerender } = renderRootContext(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -340,7 +343,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is brought back to the body when element that triggered modal is removed from the DOM after closing modal', () => {
-    const { rerender } = render(
+    const { rerender } = renderRootContext(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -396,7 +399,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is trapped when active', () => {
-    render(
+    renderRootContext(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -416,7 +419,7 @@ describe('components/Modal', () => {
   });
 
   test('focus wraps forwards', () => {
-    render(
+    renderRootContext(
       <>
         <Modal visible={true}>
           <a data-testid={'inside-a'} href={'#'}>
@@ -442,7 +445,7 @@ describe('components/Modal', () => {
   });
 
   test('focus wraps backwards', () => {
-    render(
+    renderRootContext(
       <>
         <Modal visible={true}>
           <a data-testid={'inside-a'} href={'#'}>
@@ -468,7 +471,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is trapped without contents', () => {
-    render(
+    renderRootContext(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -485,7 +488,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is not trapped when inactive', () => {
-    render(
+    renderRootContext(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -503,7 +506,7 @@ describe('components/Modal', () => {
   });
 
   test('creates portal outside of the react container', () => {
-    const { container, baseElement } = render(
+    const { container, baseElement } = renderRootContext(
       <Modal visible={true}>
         <a data-testid={'hello'} href={'#hello'}>
           Hello World
@@ -518,7 +521,7 @@ describe('components/Modal', () => {
   });
 
   test('portal created is a div', () => {
-    const { baseElement } = render(
+    const { baseElement } = renderRootContext(
       <Modal visible={true}>
         <a data-testid={'hello'} href={'#hello'}>
           Hello World
@@ -540,7 +543,7 @@ describe('components/Modal', () => {
       );
     }
 
-    render(<TestComponent />);
+    renderRootContext(<TestComponent />);
 
     expect(spy).toHaveBeenNthCalledWith(1, 'ref');
     expect(spy).toHaveBeenNthCalledWith(2, 'mount');
@@ -549,7 +552,7 @@ describe('components/Modal', () => {
   test('escape key fires onRequestClose', () => {
     const spy = jest.fn();
 
-    render(<Modal onRequestClose={spy} visible={true} />);
+    renderRootContext(<Modal onRequestClose={spy} visible={true} />);
 
     fireEvent.keyUp(document, { key: 'Escape' });
 
@@ -560,7 +563,7 @@ describe('components/Modal', () => {
     const spyA = jest.fn();
     const spyB = jest.fn();
 
-    render(
+    renderRootContext(
       <>
         <Modal onRequestClose={spyA} visible={true} />
         <Modal onRequestClose={spyB} visible={true} />
@@ -577,7 +580,7 @@ describe('components/Modal', () => {
     const spyA = jest.fn();
     const spyB = jest.fn();
 
-    const { getByTestId, rerender } = render(
+    const { getByTestId, rerender } = renderRootContext(
       <>
         <Modal animationType={'slide'} onRequestClose={spyA} visible={false}>
           <a data-testid={'a'} />
@@ -602,10 +605,10 @@ describe('components/Modal', () => {
     );
 
     // This is kind of ugly but I can't find a better way to target just the animation div
-    const animationAElement = getByTestId('a').parentElement.parentElement.parentElement
-      .parentElement;
-    const animationBElement = getByTestId('b').parentElement.parentElement.parentElement
-      .parentElement;
+    const animationAElement =
+      getByTestId('a').parentElement.parentElement.parentElement.parentElement;
+    const animationBElement =
+      getByTestId('b').parentElement.parentElement.parentElement.parentElement;
 
     fireEvent.animationEnd(animationAElement);
     fireEvent.animationEnd(animationBElement);
diff --git a/packages/react-native-web/src/exports/Picker/PickerItem.js b/packages/react-native-web/src/exports/Picker/PickerItem.js
index 649b2cdf16..0642e4dce1 100644
--- a/packages/react-native-web/src/exports/Picker/PickerItem.js
+++ b/packages/react-native-web/src/exports/Picker/PickerItem.js
@@ -8,7 +8,9 @@
  * @noflow
  */
 
+import { useContext } from 'react';
 import type { ColorValue } from '../../types';
+import RootContext from '../AppRegistry/rootContext';
 
 import createElement from '../createElement';
 
@@ -22,5 +24,7 @@ type Props = {
 export default function PickerItem(props: Props) {
   const { color, label, testID, value } = props;
   const style = { color };
-  return createElement('option', { style, testID, value }, label);
+  const rootContext = useContext(RootContext);
+
+  return createElement('option', { style, testID, value }, rootContext.styleResolver, label);
 }
diff --git a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
index 44dd6a1be3..30008b0f7b 100644
--- a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
@@ -1,7 +1,7 @@
 /* eslint-env jasmine, jest */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 import Picker from '..';
 
 function findSelect(container) {
@@ -17,13 +17,13 @@ describe('components/Picker', () => {
           <Picker.Item label="label-2" value="value-2" />
         </Picker>
       );
-      const { container } = render(picker);
+      const { container } = renderRootContext(picker);
       expect(container.firstChild.firstChild).toMatchSnapshot();
     });
 
     test('items', () => {
       const pickerItem = <Picker.Item label="label-1" value="value-1" />;
-      const { container } = render(pickerItem);
+      const { container } = renderRootContext(pickerItem);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -36,7 +36,7 @@ describe('components/Picker', () => {
           <Picker.Item label="label-2" value="value-2" />
         </Picker>
       );
-      const { container } = render(picker);
+      const { container } = renderRootContext(picker);
       expect(findSelect(container).disabled).toBe(true);
     });
   });
@@ -50,7 +50,7 @@ describe('components/Picker', () => {
           <Picker.Item label="label-2" value="value-2" />
         </Picker>
       );
-      const { container } = render(picker);
+      const { container } = renderRootContext(picker);
       const select = findSelect(container);
       // mock change event
       select.selectedIndex = '1';
@@ -69,7 +69,7 @@ describe('components/Picker', () => {
           <Picker.Item label="label-2" value="value-2" />
         </Picker>
       );
-      const { container } = render(picker);
+      const { container } = renderRootContext(picker);
       expect(findSelect(container).value).toBe('value-2');
     });
 
@@ -80,7 +80,7 @@ describe('components/Picker', () => {
           <Picker.Item label="label-2" value={22} />
         </Picker>
       );
-      const { container } = render(picker);
+      const { container } = renderRootContext(picker);
       expect(findSelect(container).value).toBe('22');
     });
   });
diff --git a/packages/react-native-web/src/exports/Picker/index.js b/packages/react-native-web/src/exports/Picker/index.js
index 1a3c297255..015aef7ab9 100644
--- a/packages/react-native-web/src/exports/Picker/index.js
+++ b/packages/react-native-web/src/exports/Picker/index.js
@@ -17,6 +17,7 @@ import useMergeRefs from '../../modules/useMergeRefs';
 import usePlatformMethods from '../../modules/usePlatformMethods';
 import PickerItem from './PickerItem';
 import StyleSheet from '../StyleSheet';
+import RootContext from '../AppRegistry/rootContext';
 
 type PickerProps = {
   ...ViewProps,
@@ -31,53 +32,52 @@ type PickerProps = {
   prompt?: string
 };
 
-const Picker: React.AbstractComponent<
-  PickerProps,
-  HTMLElement & PlatformMethods
-> = React.forwardRef((props, forwardedRef) => {
-  const {
-    children,
-    enabled,
-    onValueChange,
-    selectedValue,
-    style,
-    testID,
-    /* eslint-disable */
-    itemStyle,
-    mode,
-    prompt,
-    /* eslint-enable */
-    ...other
-  } = props;
+const Picker: React.AbstractComponent<PickerProps, HTMLElement & PlatformMethods> =
+  React.forwardRef((props, forwardedRef) => {
+    const {
+      children,
+      enabled,
+      onValueChange,
+      selectedValue,
+      style,
+      testID,
+      /* eslint-disable */
+      itemStyle,
+      mode,
+      prompt,
+      /* eslint-enable */
+      ...other
+    } = props;
 
-  const hostRef = React.useRef(null);
+    const hostRef = React.useRef(null);
+    const rootContext = React.useContext(RootContext);
 
-  function handleChange(e: Object) {
-    const { selectedIndex, value } = e.target;
-    if (onValueChange) {
-      onValueChange(value, selectedIndex);
+    function handleChange(e: Object) {
+      const { selectedIndex, value } = e.target;
+      if (onValueChange) {
+        onValueChange(value, selectedIndex);
+      }
     }
-  }
 
-  // $FlowFixMe
-  const supportedProps: any = {
-    children,
-    disabled: enabled === false ? true : undefined,
-    onChange: handleChange,
-    style: [styles.initial, style],
-    testID,
-    value: selectedValue,
-    ...other
-  };
+    // $FlowFixMe
+    const supportedProps: any = {
+      children,
+      disabled: enabled === false ? true : undefined,
+      onChange: handleChange,
+      style: [styles.initial, style],
+      testID,
+      value: selectedValue,
+      ...other
+    };
 
-  const platformMethodsRef = usePlatformMethods(supportedProps);
+    const platformMethodsRef = usePlatformMethods(supportedProps);
 
-  const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+    const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
 
-  supportedProps.ref = setRef;
+    supportedProps.ref = setRef;
 
-  return createElement('select', supportedProps);
-});
+    return createElement('select', supportedProps, rootContext.styleResolver);
+  });
 
 // $FlowFixMe
 Picker.Item = PickerItem;
diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
index b9a4a2d8d2..01d9d71546 100644
--- a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
@@ -4,58 +4,58 @@ import React from 'react';
 import Pressable from '../';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 
 describe('components/Pressable', () => {
   test('default', () => {
-    const { container } = render(<Pressable />);
+    const { container } = renderRootContext(<Pressable />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = render(<Pressable accessibilityLabel="label" />);
+      const { container } = renderRootContext(<Pressable accessibilityLabel="label" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = render(<Pressable accessibilityLiveRegion="polite" />);
+      const { container } = renderRootContext(<Pressable accessibilityLiveRegion="polite" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityRole"', () => {
     test('value is set', () => {
-      const { container } = render(<Pressable accessibilityRole="none" />);
+      const { container } = renderRootContext(<Pressable accessibilityRole="none" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value is "button"', () => {
-      const { container } = render(<Pressable accessibilityRole="button" />);
+      const { container } = renderRootContext(<Pressable accessibilityRole="button" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value alters HTML element', () => {
-      const { container } = render(<Pressable accessibilityRole="article" />);
+      const { container } = renderRootContext(<Pressable accessibilityRole="article" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('prop "disabled"', () => {
-    const { container } = render(<Pressable disabled={true} />);
+    const { container } = renderRootContext(<Pressable disabled={true} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "href"', () => {
-    const { container } = render(<Pressable href="#href" />);
+    const { container } = renderRootContext(<Pressable href="#href" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = render(<Pressable nativeID="nativeID" />);
+      const { container } = renderRootContext(<Pressable nativeID="nativeID" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -66,7 +66,7 @@ describe('components/Pressable', () => {
     const onFocus = jest.fn();
     const ref = React.createRef();
     act(() => {
-      ({ container } = render(
+      ({ container } = renderRootContext(
         <Pressable
           children={({ focused }) => (focused ? <div data-testid="focus-content" /> : null)}
           onBlur={onBlur}
@@ -96,7 +96,7 @@ describe('components/Pressable', () => {
     const onFocus = jest.fn();
     const ref = React.createRef();
     act(() => {
-      render(<Pressable disabled={true} onBlur={onBlur} onFocus={onFocus} ref={ref} />);
+      renderRootContext(<Pressable disabled={true} onBlur={onBlur} onFocus={onFocus} ref={ref} />);
     });
     const target = createEventTarget(ref.current);
     const body = createEventTarget(document.body);
@@ -116,7 +116,7 @@ describe('components/Pressable', () => {
     const onHoverOut = jest.fn();
     const ref = React.createRef();
     act(() => {
-      ({ container } = render(
+      ({ container } = renderRootContext(
         <Pressable
           children={({ hovered }) => (hovered ? <div data-testid="hover-content" /> : null)}
           onHoverIn={onHoverIn}
@@ -148,7 +148,7 @@ describe('components/Pressable', () => {
     const onPressOut = jest.fn();
     const ref = React.createRef();
     act(() => {
-      ({ container } = render(
+      ({ container } = renderRootContext(
         <Pressable
           children={({ pressed }) => (pressed ? <div data-testid="press-content" /> : null)}
           onContextMenu={onContextMenu}
@@ -206,7 +206,7 @@ describe('components/Pressable', () => {
     }
 
     act(() => {
-      ({ container } = render(<TestCase />));
+      ({ container } = renderRootContext(<TestCase />));
     });
     const target = createEventTarget(ref.current);
     expect(container.firstChild).toMatchSnapshot();
@@ -228,14 +228,14 @@ describe('components/Pressable', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      render(<Pressable ref={ref} />);
+      renderRootContext(<Pressable ref={ref} />);
       expect(ref).toBeCalled();
     });
 
     test('node has imperative methods', () => {
       const ref = React.createRef();
       act(() => {
-        render(<Pressable ref={ref} />);
+        renderRootContext(<Pressable ref={ref} />);
       });
       const node = ref.current;
       expect(typeof node.measure === 'function');
@@ -246,20 +246,20 @@ describe('components/Pressable', () => {
   });
 
   test('prop "pointerEvents"', () => {
-    const { container } = render(<Pressable pointerEvents="box-only" />);
+    const { container } = renderRootContext(<Pressable pointerEvents="box-only" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = render(<Pressable style={{ borderWidth: 5 }} />);
+      const { container } = renderRootContext(<Pressable style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = render(<Pressable testID="123" />);
+      const { container } = renderRootContext(<Pressable testID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
diff --git a/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js b/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js
index db0d77cd61..8a4dff8e7a 100644
--- a/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js
@@ -1,18 +1,18 @@
 /* eslint-env jasmine, jest */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 import ProgressBar from '..';
 
 describe('components/ProgressBar', () => {
   describe('progress', () => {
     test('value as percentage is set to "aria-valuenow"', () => {
-      const { container } = render(<ProgressBar progress={0.5} />);
+      const { container } = renderRootContext(<ProgressBar progress={0.5} />);
       expect(container.firstChild.getAttribute('aria-valuenow')).toBe('50');
     });
 
     test('is ignored when "indeterminate" is "true"', () => {
-      const { container } = render(<ProgressBar indeterminate progress={0.5} />);
+      const { container } = renderRootContext(<ProgressBar indeterminate progress={0.5} />);
       expect(container.firstChild.getAttribute('aria-valuenow')).toBe(null);
     });
   });
diff --git a/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js b/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
index 9fcc6c753c..78bf620463 100644
--- a/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
@@ -3,7 +3,7 @@ import ScrollView from '../';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
 import { findDOMNode } from 'react-dom';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 
 describe('components/ScrollView', () => {
   describe('prop "onScroll"', () => {
@@ -11,7 +11,7 @@ describe('components/ScrollView', () => {
       const onScroll = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<ScrollView onScroll={onScroll} ref={ref} scrollEventThrottle={16} />);
+        renderRootContext(<ScrollView onScroll={onScroll} ref={ref} scrollEventThrottle={16} />);
       });
       const target = createEventTarget(findDOMNode(ref.current));
       act(() => {
@@ -25,7 +25,7 @@ describe('components/ScrollView', () => {
       const onScroll = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(
+        renderRootContext(
           <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
             <div ref={ref} />
           </ScrollView>
@@ -42,7 +42,7 @@ describe('components/ScrollView', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      render(<ScrollView ref={ref} />);
+      renderRootContext(<ScrollView ref={ref} />);
       expect(ref).toBeCalled();
     });
 
@@ -50,7 +50,9 @@ describe('components/ScrollView', () => {
       const ref = jest.fn();
       let rerender;
       act(() => {
-        ({ rerender } = render(<ScrollView nativeID="123" ref={ref} style={{ borderWidth: 5 }} />));
+        ({ rerender } = renderRootContext(
+          <ScrollView nativeID="123" ref={ref} style={{ borderWidth: 5 }} />
+        ));
       });
       expect(ref).toHaveBeenCalledTimes(1);
       act(() => {
@@ -62,7 +64,7 @@ describe('components/ScrollView', () => {
     test('node has imperative methods', () => {
       const ref = React.createRef();
       act(() => {
-        render(<ScrollView ref={ref} />);
+        renderRootContext(<ScrollView ref={ref} />);
       });
       const node = ref.current;
 
@@ -89,12 +91,12 @@ describe('components/ScrollView', () => {
 
   describe('prop "refreshControl"', () => {
     test('without', () => {
-      const { container } = render(<ScrollView style={{ backgroundColor: 'red' }} />);
+      const { container } = renderRootContext(<ScrollView style={{ backgroundColor: 'red' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('with', () => {
-      const { container } = render(
+      const { container } = renderRootContext(
         <ScrollView
           refreshControl={<div id="refresh-control" />}
           style={{ backgroundColor: 'red' }}
diff --git a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js b/packages/react-native-web/src/exports/StyleSheet/StyleResolver.js
similarity index 65%
rename from packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
rename to packages/react-native-web/src/exports/StyleSheet/StyleResolver.js
index 4c8ceb40ea..005a37ceb2 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
+++ b/packages/react-native-web/src/exports/StyleSheet/StyleResolver.js
@@ -25,56 +25,66 @@ import initialRules from './initialRules';
 import modality from './modality';
 import { STYLE_ELEMENT_ID, STYLE_GROUPS } from './constants';
 
-export default function createStyleResolver() {
-  let inserted, sheet, cache;
-  const resolved = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
-
-  const init = () => {
-    inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
-    sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(STYLE_ELEMENT_ID));
-    cache = {};
-    modality((rule) => sheet.insert(rule, STYLE_GROUPS.modality));
+export default class StyleResolver {
+  static resolved = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
+  inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
+  _sheet: any;
+
+  constructor(rootTag?: HTMLElement) {
+    this._init(rootTag);
+  }
+
+  _init(rootTag?: HTMLElement) {
+    this._sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(STYLE_ELEMENT_ID, rootTag));
+    this.cache = {};
+
+    modality((rule) => this.sheet.insert(rule, STYLE_GROUPS.modality));
     initialRules.forEach((rule) => {
-      sheet.insert(rule, STYLE_GROUPS.reset);
+      this.sheet.insert(rule, STYLE_GROUPS.reset);
     });
-  };
+  }
 
-  init();
+  clear() {
+    StyleResolver.resolved = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
+    this.inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
+    this.cache = {};
+    this._sheet.clear();
+  }
 
-  function addToCache(className, prop, value) {
-    if (!cache[prop]) {
-      cache[prop] = {};
+  _addToCache(className, prop, value) {
+    if (!this.cache[prop]) {
+      this.cache[prop] = {};
     }
-    cache[prop][value] = className;
+    this.cache[prop][value] = className;
   }
 
-  function getClassName(prop, value) {
+  _getClassName(prop, value) {
     const val = stringifyValueWithProperty(value, prop);
-    return cache[prop] && cache[prop].hasOwnProperty(val) && cache[prop][val];
+    return this.cache[prop] && this.cache[prop].hasOwnProperty(val) && this.cache[prop][val];
   }
 
-  function _injectRegisteredStyle(id) {
+  _injectRegisteredStyle(id) {
     const { doLeftAndRightSwapInRTL, isRTL } = I18nManager.getConstants();
     const dir = isRTL ? (doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap') : 'ltr';
-    if (!inserted[dir][id]) {
+    if (!this.inserted[dir][id]) {
       const style = createCompileableStyle(i18nStyle(flattenStyle(id)));
       const results = atomic(style);
       Object.keys(results).forEach((key) => {
         const { identifier, property, rules, value } = results[key];
-        addToCache(identifier, property, value);
+        this._addToCache(identifier, property, value);
         rules.forEach((rule) => {
           const group = STYLE_GROUPS.custom[property] || STYLE_GROUPS.atomic;
-          sheet.insert(rule, group);
+          this.sheet.insert(rule, group);
         });
       });
-      inserted[dir][id] = true;
+      this.inserted[dir][id] = true;
     }
   }
 
   /**
    * Resolves a React Native style object to DOM attributes
    */
-  function resolve(style, classList) {
+  resolve(style, classList) {
     const nextClassList = [];
     let props = {};
 
@@ -85,12 +95,15 @@ export default function createStyleResolver() {
     if (Array.isArray(classList)) {
       flattenArray(classList).forEach((identifier) => {
         if (identifier) {
-          if (inserted.css[identifier] == null && resolved.css[identifier] != null) {
-            const item = resolved.css[identifier];
+          if (
+            this.inserted.css[identifier] == null &&
+            StyleResolver.resolved.css[identifier] != null
+          ) {
+            const item = StyleResolver.resolved.css[identifier];
             item.rules.forEach((rule) => {
-              sheet.insert(rule, item.group);
+              this.sheet.insert(rule, item.group);
             });
-            inserted.css[identifier] = true;
+            this.inserted.css[identifier] = true;
           }
 
           nextClassList.push(identifier);
@@ -100,12 +113,12 @@ export default function createStyleResolver() {
 
     if (typeof style === 'number') {
       // fast and cachable
-      _injectRegisteredStyle(style);
+      this._injectRegisteredStyle(style);
       const key = createCacheKey(style);
-      props = _resolveStyle(style, key);
+      props = this._resolveStyle(style, key);
     } else if (!Array.isArray(style)) {
       // resolve a plain RN style object
-      props = _resolveStyle(style);
+      props = this._resolveStyle(style);
     } else {
       // flatten the style array
       // cache resolved props when all styles are registered
@@ -121,11 +134,11 @@ export default function createStyleResolver() {
           if (isArrayOfNumbers) {
             cacheKey += id + '-';
           }
-          _injectRegisteredStyle(id);
+          this._injectRegisteredStyle(id);
         }
       }
       const key = isArrayOfNumbers ? createCacheKey(cacheKey) : null;
-      props = _resolveStyle(flatArray, key);
+      props = this._resolveStyle(flatArray, key);
     }
 
     nextClassList.push(...props.classList);
@@ -144,13 +157,13 @@ export default function createStyleResolver() {
   /**
    * Resolves a React Native style object
    */
-  function _resolveStyle(style, key) {
+  _resolveStyle(style, key) {
     const { doLeftAndRightSwapInRTL, isRTL } = I18nManager.getConstants();
     const dir = isRTL ? (doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap') : 'ltr';
 
     // faster: memoized
-    if (key != null && resolved[dir][key] != null) {
-      return resolved[dir][key];
+    if (key != null && StyleResolver.resolved[dir][key] != null) {
+      return StyleResolver.resolved[dir][key];
     }
 
     const flatStyle = flattenStyle(style);
@@ -163,7 +176,7 @@ export default function createStyleResolver() {
         (props, styleProp) => {
           const value = localizedStyle[styleProp];
           if (value != null) {
-            const className = getClassName(styleProp, value);
+            const className = this._getClassName(styleProp, value);
             if (className) {
               props.classList.push(className);
             } else {
@@ -181,7 +194,7 @@ export default function createStyleResolver() {
                   const { identifier, rules } = a[key];
                   props.classList.push(identifier);
                   rules.forEach((rule) => {
-                    sheet.insert(rule, STYLE_GROUPS.atomic);
+                    this.sheet.insert(rule, STYLE_GROUPS.atomic);
                   });
                 });
               } else {
@@ -203,44 +216,43 @@ export default function createStyleResolver() {
     }
 
     if (key != null) {
-      resolved[dir][key] = props;
+      StyleResolver.resolved[dir][key] = props;
     }
 
     return props;
   }
 
-  return {
-    getStyleSheet() {
-      const textContent = sheet.getTextContent();
-      // Reset state on the server so critical css is always the result
-      if (!canUseDOM) {
-        init();
-      }
+  getStyleSheet() {
+    const textContent = this.sheet.getTextContent();
+    // Reset state on the server so critical css is always the result
+    if (!canUseDOM) {
+      this._init();
+    }
 
-      return {
-        id: STYLE_ELEMENT_ID,
-        textContent
-      };
-    },
-    createCSS(rules, group) {
-      const result = {};
-      Object.keys(rules).forEach((name) => {
-        const style = rules[name];
-        const compiled = classic(style, name);
-
-        Object.keys(compiled).forEach((key) => {
-          const { identifier, rules } = compiled[key];
-          resolved.css[identifier] = { group: group || STYLE_GROUPS.classic, rules };
-          result[name] = identifier;
-        });
+    return {
+      id: STYLE_ELEMENT_ID,
+      textContent
+    };
+  }
+
+  static createCSS(rules, group) {
+    const result = {};
+    Object.keys(rules).forEach((name) => {
+      const style = rules[name];
+      const compiled = classic(style, name);
+
+      Object.keys(compiled).forEach((key) => {
+        const { identifier, rules } = compiled[key];
+        StyleResolver.resolved.css[identifier] = { group: group || STYLE_GROUPS.classic, rules };
+        result[name] = identifier;
       });
-      return result;
-    },
-    resolve,
-    get sheet() {
-      return sheet;
-    }
-  };
+    });
+    return result;
+  }
+
+  get sheet() {
+    return this._sheet;
+  }
 }
 
 /**
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js
index 97fec84ebc..bc3322d4a1 100644
--- a/packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js
+++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/createStyleResolver-test.js
@@ -3,14 +3,14 @@
 import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 import I18nManager from '../../I18nManager';
 import ReactNativePropRegistry from '../ReactNativePropRegistry';
-import createStyleResolver from '../createStyleResolver';
+import StyleResolver from '../StyleResolver';
 
 const canUseDOM = ExecutionEnvironment.canUseDOM;
 let styleResolver;
 
 describe('StyleSheet/createStyleResolver', () => {
   beforeEach(() => {
-    styleResolver = createStyleResolver({ insert() {} });
+    styleResolver = new StyleResolver();
   });
 
   describe('resolve', () => {
diff --git a/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
index fab09042a7..61de5e1829 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
@@ -10,16 +10,17 @@
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 
 // $FlowFixMe: HTMLStyleElement is incorrectly typed - https://github.com/facebook/flow/issues/2696
-export default function createCSSStyleSheet(id: string): ?CSSStyleSheet {
+export default function createCSSStyleSheet(id: string, rootTag?: HTMLElement): ?CSSStyleSheet {
   if (canUseDOM) {
-    const element = document.getElementById(id);
+    const doc = rootTag?.ownerDocument || document;
+    const element = doc.getElementById(id);
     if (element != null) {
       // $FlowFixMe: HTMLElement is incorrectly typed
       return element.sheet;
     } else {
-      const element = document.createElement('style');
+      const element = doc.createElement('style');
       element.setAttribute('id', id);
-      const head = document.head;
+      const head = doc.head;
       if (head) {
         head.insertBefore(element, head.firstChild);
       }
diff --git a/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js
index a16675c2cf..72832e9cf9 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createOrderedCSSStyleSheet.js
@@ -27,9 +27,7 @@ const slice = Array.prototype.slice;
  * https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
  * https://gist.github.com/necolas/aa0c37846ad6bd3b05b727b959e82674
  */
-export default function createOrderedCSSStyleSheet(
-  sheet: ?CSSStyleSheet
-): {|
+export default function createOrderedCSSStyleSheet(sheet: ?CSSStyleSheet): {|
   getTextContent: () => string,
   insert: (cssText: string, groupValue: number) => void
 |} {
@@ -98,6 +96,12 @@ export default function createOrderedCSSStyleSheet(
         .join('\n');
     },
 
+    clear() {
+      //groups.clear();
+      //selectors.clear();
+      //sheet.cssRules.clear();
+    },
+
     /**
      * Insert a rule into the style sheet
      */
diff --git a/packages/react-native-web/src/exports/StyleSheet/css.js b/packages/react-native-web/src/exports/StyleSheet/css.js
index a6eb402323..019829bec3 100644
--- a/packages/react-native-web/src/exports/StyleSheet/css.js
+++ b/packages/react-native-web/src/exports/StyleSheet/css.js
@@ -7,7 +7,7 @@
  * @noflow
  */
 
-import styleResolver from './styleResolver';
+import StyleResolver from './StyleResolver';
 
 /**
  * A simple (and dangerous) CSS system.
@@ -19,7 +19,7 @@ const css = {
    * const classes = css.create({ base: {}, extra: {} })
    */
   create(rules, group) {
-    return styleResolver.createCSS(rules, group);
+    return StyleResolver.createCSS(rules, group);
   }
 };
 
diff --git a/packages/react-native-web/src/exports/StyleSheet/styleResolver.js b/packages/react-native-web/src/exports/StyleSheet/styleResolver.js
deleted file mode 100644
index 964da05558..0000000000
--- a/packages/react-native-web/src/exports/StyleSheet/styleResolver.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright (c) Nicolas Gallagher.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import createStyleResolver from './createStyleResolver';
-const styleResolver: any = createStyleResolver();
-export default styleResolver;
diff --git a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
index 0435cfb9a8..da57704c4e 100644
--- a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
@@ -1,7 +1,7 @@
 /* eslint-env jasmine, jest */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 import Switch from '..';
 
 function findCheckbox(container) {
@@ -10,18 +10,18 @@ function findCheckbox(container) {
 
 describe('components/Switch', () => {
   test('accessibilityLabel is applied to native checkbox', () => {
-    const { container } = render(<Switch accessibilityLabel="switch" />);
+    const { container } = renderRootContext(<Switch accessibilityLabel="switch" />);
     expect(findCheckbox(container).getAttribute('aria-label')).toBe('switch');
   });
 
   describe('disabled', () => {
     test('when "false" a default checkbox is rendered', () => {
-      const { container } = render(<Switch />);
+      const { container } = renderRootContext(<Switch />);
       expect(findCheckbox(container).disabled).toBe(false);
     });
 
     test('when "true" a disabled checkbox is rendered', () => {
-      const { container } = render(<Switch disabled />);
+      const { container } = renderRootContext(<Switch disabled />);
       expect(findCheckbox(container).disabled).toBe(true);
     });
   });
@@ -29,7 +29,9 @@ describe('components/Switch', () => {
   describe('onValueChange', () => {
     test('when value is "false" it receives "true"', () => {
       const onValueChange = jest.fn();
-      const { container } = render(<Switch onValueChange={onValueChange} value={false} />);
+      const { container } = renderRootContext(
+        <Switch onValueChange={onValueChange} value={false} />
+      );
       const checkbox = findCheckbox(container);
       checkbox.click(); // Needed to get ReactDOM to trigger 'change' event
       expect(onValueChange).toHaveBeenCalledWith(true);
@@ -37,7 +39,7 @@ describe('components/Switch', () => {
 
     test('when value is "true" it receives "false"', () => {
       const onValueChange = jest.fn();
-      const { container } = render(<Switch onValueChange={onValueChange} value />);
+      const { container } = renderRootContext(<Switch onValueChange={onValueChange} value />);
       const checkbox = findCheckbox(container);
       checkbox.click(); // Needed to get ReactDOM to trigger 'change' event
       expect(onValueChange).toHaveBeenCalledWith(false);
@@ -46,12 +48,12 @@ describe('components/Switch', () => {
 
   describe('value', () => {
     test('when "false" an unchecked checkbox is rendered', () => {
-      const { container } = render(<Switch value={false} />);
+      const { container } = renderRootContext(<Switch value={false} />);
       expect(findCheckbox(container).checked).toBe(false);
     });
 
     test('when "true" a checked checkbox is rendered', () => {
-      const { container } = render(<Switch value />);
+      const { container } = renderRootContext(<Switch value />);
       expect(findCheckbox(container).checked).toBe(true);
     });
   });
diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js
index dbcca6f94c..99c1c63add 100644
--- a/packages/react-native-web/src/exports/Switch/index.js
+++ b/packages/react-native-web/src/exports/Switch/index.js
@@ -15,6 +15,7 @@ import createElement from '../createElement';
 import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
+import RootContext from '../AppRegistry/rootContext';
 
 type SwitchProps = {
   ...ViewProps,
@@ -49,6 +50,7 @@ const Switch: React.AbstractComponent<
   } = props;
 
   const thumbRef = React.useRef(null);
+  const rootContext = React.useContext(RootContext);
 
   function handleChange(event: Object) {
     if (onValueChange != null) {
@@ -109,18 +111,22 @@ const Switch: React.AbstractComponent<
     }
   ];
 
-  const nativeControl = createElement('input', {
-    accessibilityLabel,
-    checked: value,
-    disabled: disabled,
-    onBlur: handleFocusState,
-    onChange: handleChange,
-    onFocus: handleFocusState,
-    ref: forwardedRef,
-    style: [styles.nativeControl, styles.cursorInherit],
-    type: 'checkbox',
-    role: 'switch'
-  });
+  const nativeControl = createElement(
+    'input',
+    {
+      accessibilityLabel,
+      checked: value,
+      disabled: disabled,
+      onBlur: handleFocusState,
+      onChange: handleChange,
+      onFocus: handleFocusState,
+      ref: forwardedRef,
+      style: [styles.nativeControl, styles.cursorInherit],
+      type: 'checkbox',
+      role: 'switch'
+    },
+    rootContext.styleResolver
+  );
 
   return (
     <View {...other} style={rootStyle}>
diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
index f8b47bd49f..be74224f78 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
@@ -5,77 +5,79 @@ import React from 'react';
 import Text from '../';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 
 describe('components/Text', () => {
   test('default', () => {
-    const { container } = render(<Text />);
+    const { container } = renderRootContext(<Text />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('nested', () => {
-    const { container } = render(<Text children={<Text testID="child" />} />);
+    const { container } = renderRootContext(<Text children={<Text testID="child" />} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = render(<Text accessibilityLabel="accessibility label" />);
+      const { container } = renderRootContext(<Text accessibilityLabel="accessibility label" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLabelledBy"', () => {
     test('value is set', () => {
-      const { container } = render(<Text accessibilityLabelledBy="123" />);
+      const { container } = renderRootContext(<Text accessibilityLabelledBy="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = render(<Text accessibilityLiveRegion="polite" />);
+      const { container } = renderRootContext(<Text accessibilityLiveRegion="polite" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityRole"', () => {
     test('value is set', () => {
-      const { container } = render(<Text accessibilityRole="none" />);
+      const { container } = renderRootContext(<Text accessibilityRole="none" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value is "button"', () => {
-      const { container } = render(<Text accessibilityRole="button" />);
+      const { container } = renderRootContext(<Text accessibilityRole="button" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value alters HTML element', () => {
-      const { container } = render(<Text accessibilityRole="article" />);
+      const { container } = renderRootContext(<Text accessibilityRole="article" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('allows "dir" to be overridden', () => {
-    const { container } = render(<Text dir="rtl" />);
+    const { container } = renderRootContext(<Text dir="rtl" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "href"', () => {
     test('value is set', () => {
-      const { container } = render(<Text href="https://example.com" />);
+      const { container } = renderRootContext(<Text href="https://example.com" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('href with accessibilityRole', () => {
-      const { container } = render(<Text accessibilityRole="none" href="https://example.com" />);
+      const { container } = renderRootContext(
+        <Text accessibilityRole="none" href="https://example.com" />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "hrefAttrs"', () => {
     test('requires "href"', () => {
-      const { container } = render(<Text hrefAttrs={{ download: 'filename.jpg' }} />);
+      const { container } = renderRootContext(<Text hrefAttrs={{ download: 'filename.jpg' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -85,7 +87,9 @@ describe('components/Text', () => {
         rel: 'nofollow',
         target: '_blank'
       };
-      const { container } = render(<Text href="https://example.com" hrefAttrs={hrefAttrs} />);
+      const { container } = renderRootContext(
+        <Text href="https://example.com" hrefAttrs={hrefAttrs} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -93,7 +97,9 @@ describe('components/Text', () => {
       const hrefAttrs = {
         target: 'blank'
       };
-      const { container } = render(<Text href="https://example.com" hrefAttrs={hrefAttrs} />);
+      const { container } = renderRootContext(
+        <Text href="https://example.com" hrefAttrs={hrefAttrs} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -103,37 +109,39 @@ describe('components/Text', () => {
         rel: null,
         target: null
       };
-      const { container } = render(<Text href="https://example.com" hrefAttrs={hrefAttrs} />);
+      const { container } = renderRootContext(
+        <Text href="https://example.com" hrefAttrs={hrefAttrs} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "lang"', () => {
     test('undefined', () => {
-      const { container } = render(<Text />);
+      const { container } = renderRootContext(<Text />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('fr', () => {
-      const { container } = render(<Text lang="fr" />);
+      const { container } = renderRootContext(<Text lang="fr" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = render(<Text nativeID="nativeID" />);
+      const { container } = renderRootContext(<Text nativeID="nativeID" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "numberOfLines"', () => {
     test('value is set', () => {
-      const { container } = render(<Text numberOfLines={3} />);
+      const { container } = renderRootContext(<Text numberOfLines={3} />);
       expect(container.firstChild).toMatchSnapshot();
     });
     test('value is set to one', () => {
-      const { container } = render(<Text numberOfLines={1} />);
+      const { container } = renderRootContext(<Text numberOfLines={1} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -143,7 +151,7 @@ describe('components/Text', () => {
       const onBlur = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<Text onBlur={onBlur} ref={ref} />);
+        renderRootContext(<Text onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       const body = createEventTarget(document.body);
@@ -160,7 +168,7 @@ describe('components/Text', () => {
       const onClick = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<Text onClick={onClick} ref={ref} />);
+        renderRootContext(<Text onClick={onClick} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -173,7 +181,7 @@ describe('components/Text', () => {
       const onClick = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<Text onClick={onClick} onPress={() => {}} ref={ref} />);
+        renderRootContext(<Text onClick={onClick} onPress={() => {}} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -188,7 +196,7 @@ describe('components/Text', () => {
       const onFocus = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<Text onFocus={onFocus} ref={ref} />);
+        renderRootContext(<Text onFocus={onFocus} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -203,7 +211,7 @@ describe('components/Text', () => {
       const onPress = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<Text onPress={onPress} ref={ref} />);
+        renderRootContext(<Text onPress={onPress} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -217,7 +225,7 @@ describe('components/Text', () => {
       const onPress = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<Text onClick={() => {}} onPress={onPress} ref={ref} />);
+        renderRootContext(<Text onClick={() => {}} onPress={onPress} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -230,7 +238,7 @@ describe('components/Text', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      render(<Text ref={ref} />);
+      renderRootContext(<Text ref={ref} />);
       expect(ref).toBeCalled();
     });
 
@@ -238,7 +246,9 @@ describe('components/Text', () => {
       const ref = jest.fn();
       let rerender;
       act(() => {
-        ({ rerender } = render(<Text nativeID="123" ref={ref} style={{ borderWidth: 5 }} />));
+        ({ rerender } = renderRootContext(
+          <Text nativeID="123" ref={ref} style={{ borderWidth: 5 }} />
+        ));
       });
       expect(ref).toHaveBeenCalledTimes(1);
       act(() => {
@@ -250,7 +260,7 @@ describe('components/Text', () => {
     test('node has imperative methods', () => {
       const ref = React.createRef();
       act(() => {
-        render(<Text ref={ref} />);
+        renderRootContext(<Text ref={ref} />);
       });
       const node = ref.current;
       expect(typeof node.measure === 'function');
@@ -262,26 +272,26 @@ describe('components/Text', () => {
 
   describe('prop "selectable"', () => {
     test('value of false', () => {
-      const { container } = render(<Text selectable={false} />);
+      const { container } = renderRootContext(<Text selectable={false} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value of true', () => {
-      const { container } = render(<Text selectable={true} />);
+      const { container } = renderRootContext(<Text selectable={true} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = render(<Text style={{ borderWidth: 5 }} />);
+      const { container } = renderRootContext(<Text style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = render(<Text testID="123" />);
+      const { container } = renderRootContext(<Text testID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
index a2a74ce474..34bc4b1a98 100644
--- a/packages/react-native-web/src/exports/Text/index.js
+++ b/packages/react-native-web/src/exports/Text/index.js
@@ -22,6 +22,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from './TextAncestorContext';
+import RootContext from '../AppRegistry/rootContext';
 
 const forwardPropsList = {
   ...forwardedProps.defaultProps,
@@ -69,6 +70,7 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
 
     const hasTextAncestor = React.useContext(TextAncestorContext);
     const hostRef = React.useRef(null);
+    const rootContext = React.useContext(RootContext);
 
     const classList = [
       classes.text,
@@ -150,7 +152,7 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
 
     supportedProps.ref = setRef;
 
-    const element = createElement(component, supportedProps);
+    const element = createElement(component, supportedProps, rootContext.styleResolver);
 
     return hasTextAncestor ? (
       element
diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
index 5a79866749..0202725f82 100644
--- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
@@ -4,7 +4,7 @@ import React from 'react';
 import TextInput from '..';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 
 function findInput(container) {
   return container.querySelector('input');
@@ -69,19 +69,19 @@ function keydown(payload) {
 describe('components/TextInput', () => {
   describe('prop "autoComplete"', () => {
     test('value "on"', () => {
-      const { container } = render(<TextInput />);
+      const { container } = renderRootContext(<TextInput />);
       const input = findInput(container);
       expect(input.getAttribute('autoComplete')).toEqual('on');
     });
 
     test('value "off"', () => {
-      const { container } = render(<TextInput autoComplete="off" />);
+      const { container } = renderRootContext(<TextInput autoComplete="off" />);
       const input = findInput(container);
       expect(input.getAttribute('autoComplete')).toEqual('off');
     });
 
     test('autoCompleteType fallback', () => {
-      const { container } = render(<TextInput autoCompleteType="off" />);
+      const { container } = renderRootContext(<TextInput autoCompleteType="off" />);
       const input = findInput(container);
       expect(input.getAttribute('autoComplete')).toEqual('off');
     });
@@ -89,13 +89,13 @@ describe('components/TextInput', () => {
 
   describe('prop "autoFocus"', () => {
     test('value "false"', () => {
-      const { container } = render(<TextInput />);
+      const { container } = renderRootContext(<TextInput />);
       const input = findInput(container);
       expect(document.activeElement).not.toBe(input);
     });
 
     test('value "true"', () => {
-      const { container } = render(<TextInput autoFocus />);
+      const { container } = renderRootContext(<TextInput autoFocus />);
       const input = findInput(container);
       expect(document.activeElement).toBe(input);
     });
@@ -105,14 +105,16 @@ describe('components/TextInput', () => {
     const defaultValue = 'defaultValue';
 
     testIfDocumentIsFocused('value "false"', () => {
-      const { container } = render(<TextInput defaultValue={defaultValue} />);
+      const { container } = renderRootContext(<TextInput defaultValue={defaultValue} />);
       const input = findInput(container);
       input.focus();
       expect(input.node.value).toEqual(defaultValue);
     });
 
     testIfDocumentIsFocused('value "true"', () => {
-      const { container } = render(<TextInput clearTextOnFocus defaultValue={defaultValue} />);
+      const { container } = renderRootContext(
+        <TextInput clearTextOnFocus defaultValue={defaultValue} />
+      );
       const input = findInput(container);
       input.focus();
       expect(input.node.value).toEqual('');
@@ -121,20 +123,20 @@ describe('components/TextInput', () => {
 
   test('prop "defaultValue"', () => {
     const defaultValue = 'defaultValue';
-    const { container } = render(<TextInput defaultValue={defaultValue} />);
+    const { container } = renderRootContext(<TextInput defaultValue={defaultValue} />);
     const input = findInput(container);
     expect(input.value).toEqual(defaultValue);
   });
 
   describe('prop "disabled"', () => {
     test('value "false"', () => {
-      const { container } = render(<TextInput />);
+      const { container } = renderRootContext(<TextInput />);
       const input = findInput(container);
       expect(input.disabled).toEqual(false);
     });
 
     test('value "true"', () => {
-      const { container } = render(<TextInput disabled={true} />);
+      const { container } = renderRootContext(<TextInput disabled={true} />);
       const input = findInput(container);
       expect(input.disabled).toEqual(true);
     });
@@ -142,13 +144,13 @@ describe('components/TextInput', () => {
 
   describe('prop "editable"', () => {
     test('value "true"', () => {
-      const { container } = render(<TextInput />);
+      const { container } = renderRootContext(<TextInput />);
       const input = findInput(container);
       expect(input.readOnly).toEqual(false);
     });
 
     test('value "false"', () => {
-      const { container } = render(<TextInput editable={false} />);
+      const { container } = renderRootContext(<TextInput editable={false} />);
       const input = findInput(container);
       expect(input.readOnly).toEqual(true);
     });
@@ -156,67 +158,67 @@ describe('components/TextInput', () => {
 
   describe('prop "keyboardType"', () => {
     test('default value', () => {
-      const { container } = render(<TextInput keyboardType="default" />);
+      const { container } = renderRootContext(<TextInput keyboardType="default" />);
       const input = findInput(container);
       expect(input.type).toEqual('text');
     });
 
     test('value "email-address"', () => {
-      const { container } = render(<TextInput keyboardType="email-address" />);
+      const { container } = renderRootContext(<TextInput keyboardType="email-address" />);
       const input = findInput(container);
       expect(input.type).toEqual('email');
     });
 
     test('value "decimal-pad"', () => {
-      const { container } = render(<TextInput keyboardType="decimal-pad" />);
+      const { container } = renderRootContext(<TextInput keyboardType="decimal-pad" />);
       const input = findInput(container);
       expect(input.inputMode).toEqual('decimal');
     });
 
     test('value "number-pad"', () => {
-      const { container } = render(<TextInput keyboardType="number-pad" />);
+      const { container } = renderRootContext(<TextInput keyboardType="number-pad" />);
       const input = findInput(container);
       expect(input.inputMode).toEqual('numeric');
     });
 
     test('value "numeric"', () => {
-      const { container } = render(<TextInput keyboardType="numeric" />);
+      const { container } = renderRootContext(<TextInput keyboardType="numeric" />);
       const input = findInput(container);
       expect(input.inputMode).toEqual('numeric');
     });
 
     test('value "phone-pad"', () => {
-      const { container } = render(<TextInput keyboardType="phone-pad" />);
+      const { container } = renderRootContext(<TextInput keyboardType="phone-pad" />);
       const input = findInput(container);
       expect(input.type).toEqual('tel');
     });
 
     test('value "url"', () => {
-      const { container } = render(<TextInput keyboardType="url" />);
+      const { container } = renderRootContext(<TextInput keyboardType="url" />);
       const input = findInput(container);
       expect(input.type).toEqual('url');
     });
   });
 
   test('prop "maxLength"', () => {
-    let { container } = render(<TextInput />);
+    let { container } = renderRootContext(<TextInput />);
     let input = findInput(container);
     expect(input.getAttribute('maxLength')).toEqual(null);
 
-    ({ container } = render(<TextInput maxLength={10} />));
+    ({ container } = renderRootContext(<TextInput maxLength={10} />));
     input = findInput(container);
     expect(input.getAttribute('maxLength')).toEqual('10');
   });
 
   describe('prop "multiline"', () => {
     test('value "false"', () => {
-      const { container } = render(<TextInput />);
+      const { container } = renderRootContext(<TextInput />);
       const input = findInput(container);
       expect(input).toBeDefined();
     });
 
     test('value "true"', () => {
-      const { container } = render(<TextInput multiline />);
+      const { container } = renderRootContext(<TextInput multiline />);
       const textarea = findTextArea(container);
       expect(textarea).toBeDefined();
     });
@@ -224,7 +226,7 @@ describe('components/TextInput', () => {
 
   describe('prop "numberOfLines"', () => {
     test('without "multiline"', () => {
-      const { container } = render(<TextInput numberOfLines={2} />);
+      const { container } = renderRootContext(<TextInput numberOfLines={2} />);
       const input = findInput(container);
       const textarea = findTextArea(container);
       expect(input).toBeDefined();
@@ -232,7 +234,7 @@ describe('components/TextInput', () => {
     });
 
     test('with "multiline"', () => {
-      const { container } = render(<TextInput multiline numberOfLines={3} />);
+      const { container } = renderRootContext(<TextInput multiline numberOfLines={3} />);
       const textarea = findTextArea(container);
       expect(textarea.getAttribute('rows')).toEqual('3');
     });
@@ -242,7 +244,7 @@ describe('components/TextInput', () => {
     const onBlur = jest.fn();
     const ref = React.createRef();
     act(() => {
-      render(<TextInput onBlur={onBlur} ref={ref} />);
+      renderRootContext(<TextInput onBlur={onBlur} ref={ref} />);
     });
     const target = createEventTarget(ref.current);
     const body = createEventTarget(document.body);
@@ -256,7 +258,7 @@ describe('components/TextInput', () => {
 
   test.skip('prop "onChange"', () => {
     const onChange = jest.fn();
-    const { container } = render(<TextInput onChange={onChange} />);
+    const { container } = renderRootContext(<TextInput onChange={onChange} />);
     const input = findInput(container);
     // This doesn't cause ReactDOM to trigger 'change' event... ¯\_(ツ)_/¯
     input.dispatchEvent(new window.Event('change', { bubbles: true }));
@@ -265,7 +267,7 @@ describe('components/TextInput', () => {
 
   test.skip('prop "onChangeText"', () => {
     const onChangeText = jest.fn();
-    const { container } = render(<TextInput onChangeText={onChangeText} />);
+    const { container } = renderRootContext(<TextInput onChangeText={onChangeText} />);
     const input = findInput(container);
     // This doesn't cause ReactDOM to trigger 'change' event... ¯\_(ツ)_/¯
     input.dispatchEvent(keydown({ key: 'a' }));
@@ -278,7 +280,7 @@ describe('components/TextInput', () => {
     const onFocus = jest.fn();
     const ref = React.createRef();
     act(() => {
-      render(<TextInput onFocus={onFocus} ref={ref} />);
+      renderRootContext(<TextInput onFocus={onFocus} ref={ref} />);
     });
     const target = createEventTarget(ref.current);
     act(() => {
@@ -293,7 +295,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = render(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'ArrowLeft' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -315,7 +317,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = render(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'Backspace' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -337,7 +339,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = render(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'Enter' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -359,7 +361,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = render(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'Escape' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -381,7 +383,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = render(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: ' ' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -403,7 +405,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = render(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'Tab' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -425,7 +427,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = render(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'a' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -447,7 +449,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = render(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(
         keydown({
@@ -477,7 +479,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = render(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(
         keydown({
@@ -491,7 +493,7 @@ describe('components/TextInput', () => {
 
   describe('prop "onSelectionChange"', () => {
     test('is called on select', () => {
-      const { container } = render(
+      const { container } = renderRootContext(
         <TextInput defaultValue="12345" onSelectionChange={onSelectionChange} />
       );
       const input = findInput(container);
@@ -506,7 +508,7 @@ describe('components/TextInput', () => {
 
     test.skip('is called on change', () => {
       const onSelectionChange = jest.fn();
-      const { container } = render(<TextInput onSelectionChange={onSelectionChange} />);
+      const { container } = renderRootContext(<TextInput onSelectionChange={onSelectionChange} />);
       const input = findInput(container);
       // This doesn't cause ReactDOM to trigger 'change' event... ¯\_(ツ)_/¯
       input.dispatchEvent(new window.Event('change', { bubbles: true }));
@@ -516,7 +518,7 @@ describe('components/TextInput', () => {
 
   describe('prop "onSubmitEditing"', () => {
     test('single-line input', (done) => {
-      const { container } = render(
+      const { container } = renderRootContext(
         <TextInput defaultValue="12345" onSubmitEditing={onSubmitEditing} />
       );
       const input = findInput(container);
@@ -530,7 +532,7 @@ describe('components/TextInput', () => {
 
     test('single-line input while composing', () => {
       const onSubmitEditing = jest.fn();
-      const { container } = render(
+      const { container } = renderRootContext(
         <TextInput defaultValue="12345" onSubmitEditing={onSubmitEditing} />
       );
       const input = findInput(container);
@@ -541,7 +543,7 @@ describe('components/TextInput', () => {
 
     test('multi-line input', () => {
       const onSubmitEditing = jest.fn();
-      const { container } = render(
+      const { container } = renderRootContext(
         <TextInput defaultValue="12345" multiline onSubmitEditing={onSubmitEditing} />
       );
       const textarea = findTextArea(container);
@@ -553,7 +555,7 @@ describe('components/TextInput', () => {
       const onSubmitEditing = jest.fn();
       const preventDefault = jest.fn();
 
-      const { container } = render(
+      const { container } = renderRootContext(
         <TextInput blurOnSubmit defaultValue="12345" multiline onSubmitEditing={onSubmitEditing} />
       );
       const textarea = findTextArea(container);
@@ -570,24 +572,24 @@ describe('components/TextInput', () => {
 
   test('prop "returnKeyType"', () => {
     const returnKeyType = 'previous';
-    const { container } = render(<TextInput returnKeyType={returnKeyType} />);
+    const { container } = renderRootContext(<TextInput returnKeyType={returnKeyType} />);
     const input = findInput(container);
     expect(input.getAttribute('enterkeyhint')).toEqual(returnKeyType);
   });
 
   test('prop "secureTextEntry"', () => {
-    let { container } = render(<TextInput secureTextEntry />);
+    let { container } = renderRootContext(<TextInput secureTextEntry />);
     const input = findInput(container);
     expect(input.getAttribute('type')).toEqual('password');
     // ignored for multiline
-    ({ container } = render(<TextInput multiline secureTextEntry />));
+    ({ container } = renderRootContext(<TextInput multiline secureTextEntry />));
     const textarea = findTextArea(container);
     expect(textarea.getAttribute('type')).toEqual(null);
   });
 
   describe('prop "selectTextOnFocus"', () => {
     testIfDocumentIsFocused('value "false"', () => {
-      const { container } = render(<TextInput defaultValue={'text'} />);
+      const { container } = renderRootContext(<TextInput defaultValue={'text'} />);
       const input = findInput(container);
       input.focus();
       expect(input.selectionEnd).toEqual(4);
@@ -605,13 +607,13 @@ describe('components/TextInput', () => {
   describe('prop "selection"', () => {
     test('set cursor location', () => {
       const cursorLocation = { start: 3, end: 3 };
-      const { container: defaultContainer } = render(<TextInput defaultValue="12345" />);
+      const { container: defaultContainer } = renderRootContext(<TextInput defaultValue="12345" />);
       const inputDefaultSelection = findInput(defaultContainer);
       // default selection is 0
       expect(inputDefaultSelection.selectionStart).toEqual(0);
       expect(inputDefaultSelection.selectionEnd).toEqual(0);
 
-      const { container: customContainer } = render(
+      const { container: customContainer } = renderRootContext(
         <TextInput defaultValue="12345" selection={cursorLocation} />
       );
       const inputCustomSelection = findInput(customContainer);
@@ -623,19 +625,19 @@ describe('components/TextInput', () => {
 
   describe('prop "spellCheck"', () => {
     test('default value', () => {
-      const { container } = render(<TextInput />);
+      const { container } = renderRootContext(<TextInput />);
       const input = findInput(container);
       expect(input.getAttribute('spellCheck')).toEqual('true');
     });
 
     test('inherit from "autoCorrect"', () => {
-      const { container } = render(<TextInput autoCorrect={false} />);
+      const { container } = renderRootContext(<TextInput autoCorrect={false} />);
       const input = findInput(container);
       expect(input.getAttribute('spellCheck')).toEqual('false');
     });
 
     test('value "false"', () => {
-      const { container } = render(<TextInput spellCheck={false} />);
+      const { container } = renderRootContext(<TextInput spellCheck={false} />);
       const input = findInput(container);
       expect(input.getAttribute('spellCheck')).toEqual('false');
     });
@@ -643,7 +645,7 @@ describe('components/TextInput', () => {
 
   test('prop "value"', () => {
     const value = 'value';
-    const { container } = render(<TextInput value={value} />);
+    const { container } = renderRootContext(<TextInput value={value} />);
     const input = findInput(container);
     expect(input.value).toEqual(value);
   });
@@ -651,13 +653,13 @@ describe('components/TextInput', () => {
   describe('imperative methods', () => {
     test('node.clear()', () => {
       const ref = React.createRef();
-      render(<TextInput ref={ref} />);
+      renderRootContext(<TextInput ref={ref} />);
       expect(typeof ref.current.clear).toBe('function');
     });
 
     test('node.isFocused()', () => {
       const ref = React.createRef();
-      render(<TextInput ref={ref} />);
+      renderRootContext(<TextInput ref={ref} />);
       expect(typeof ref.current.isFocused).toBe('function');
     });
   });
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index a37dd8ca86..58951d4121 100644
--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/packages/react-native-web/src/exports/TextInput/index.js
@@ -23,6 +23,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextInputState from '../../modules/TextInputState';
+import RootContext from '../AppRegistry/rootContext';
 
 /**
  * Determines whether a 'selection' prop differs from a node's existing
@@ -83,285 +84,284 @@ function isEventComposing(nativeEvent) {
   return nativeEvent.isComposing || nativeEvent.keyCode === 229;
 }
 
-const TextInput: React.AbstractComponent<
-  TextInputProps,
-  HTMLElement & PlatformMethods
-> = React.forwardRef((props, forwardedRef) => {
-  const {
-    autoCapitalize = 'sentences',
-    autoComplete,
-    autoCompleteType,
-    autoCorrect = true,
-    blurOnSubmit,
-    clearTextOnFocus,
-    dir,
-    editable = true,
-    keyboardType = 'default',
-    multiline = false,
-    numberOfLines = 1,
-    onBlur,
-    onChange,
-    onChangeText,
-    onContentSizeChange,
-    onFocus,
-    onKeyPress,
-    onLayout,
-    onMoveShouldSetResponder,
-    onMoveShouldSetResponderCapture,
-    onResponderEnd,
-    onResponderGrant,
-    onResponderMove,
-    onResponderReject,
-    onResponderRelease,
-    onResponderStart,
-    onResponderTerminate,
-    onResponderTerminationRequest,
-    onScrollShouldSetResponder,
-    onScrollShouldSetResponderCapture,
-    onSelectionChange,
-    onSelectionChangeShouldSetResponder,
-    onSelectionChangeShouldSetResponderCapture,
-    onStartShouldSetResponder,
-    onStartShouldSetResponderCapture,
-    onSubmitEditing,
-    placeholderTextColor,
-    returnKeyType,
-    secureTextEntry = false,
-    selection,
-    selectTextOnFocus,
-    spellCheck
-  } = props;
-
-  let type;
-  let inputMode;
-
-  switch (keyboardType) {
-    case 'email-address':
-      type = 'email';
-      break;
-    case 'number-pad':
-    case 'numeric':
-      inputMode = 'numeric';
-      break;
-    case 'decimal-pad':
-      inputMode = 'decimal';
-      break;
-    case 'phone-pad':
-      type = 'tel';
-      break;
-    case 'search':
-    case 'web-search':
-      type = 'search';
-      break;
-    case 'url':
-      type = 'url';
-      break;
-    default:
-      type = 'text';
-  }
+const TextInput: React.AbstractComponent<TextInputProps, HTMLElement & PlatformMethods> =
+  React.forwardRef((props, forwardedRef) => {
+    const {
+      autoCapitalize = 'sentences',
+      autoComplete,
+      autoCompleteType,
+      autoCorrect = true,
+      blurOnSubmit,
+      clearTextOnFocus,
+      dir,
+      editable = true,
+      keyboardType = 'default',
+      multiline = false,
+      numberOfLines = 1,
+      onBlur,
+      onChange,
+      onChangeText,
+      onContentSizeChange,
+      onFocus,
+      onKeyPress,
+      onLayout,
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onResponderEnd,
+      onResponderGrant,
+      onResponderMove,
+      onResponderReject,
+      onResponderRelease,
+      onResponderStart,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChange,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture,
+      onSubmitEditing,
+      placeholderTextColor,
+      returnKeyType,
+      secureTextEntry = false,
+      selection,
+      selectTextOnFocus,
+      spellCheck
+    } = props;
+
+    let type;
+    let inputMode;
+
+    switch (keyboardType) {
+      case 'email-address':
+        type = 'email';
+        break;
+      case 'number-pad':
+      case 'numeric':
+        inputMode = 'numeric';
+        break;
+      case 'decimal-pad':
+        inputMode = 'decimal';
+        break;
+      case 'phone-pad':
+        type = 'tel';
+        break;
+      case 'search':
+      case 'web-search':
+        type = 'search';
+        break;
+      case 'url':
+        type = 'url';
+        break;
+      default:
+        type = 'text';
+    }
 
-  if (secureTextEntry) {
-    type = 'password';
-  }
+    if (secureTextEntry) {
+      type = 'password';
+    }
 
-  const dimensions = React.useRef({ height: null, width: null });
-  const hostRef = React.useRef(null);
-
-  const handleContentSizeChange = React.useCallback(
-    (hostNode) => {
-      if (multiline && onContentSizeChange && hostNode != null) {
-        const newHeight = hostNode.scrollHeight;
-        const newWidth = hostNode.scrollWidth;
-        if (newHeight !== dimensions.current.height || newWidth !== dimensions.current.width) {
-          dimensions.current.height = newHeight;
-          dimensions.current.width = newWidth;
-          onContentSizeChange({
-            nativeEvent: {
-              contentSize: {
-                height: dimensions.current.height,
-                width: dimensions.current.width
+    const dimensions = React.useRef({ height: null, width: null });
+    const hostRef = React.useRef(null);
+    const rootContext = React.useContext(RootContext);
+
+    const handleContentSizeChange = React.useCallback(
+      (hostNode) => {
+        if (multiline && onContentSizeChange && hostNode != null) {
+          const newHeight = hostNode.scrollHeight;
+          const newWidth = hostNode.scrollWidth;
+          if (newHeight !== dimensions.current.height || newWidth !== dimensions.current.width) {
+            dimensions.current.height = newHeight;
+            dimensions.current.width = newWidth;
+            onContentSizeChange({
+              nativeEvent: {
+                contentSize: {
+                  height: dimensions.current.height,
+                  width: dimensions.current.width
+                }
               }
+            });
+          }
+        }
+      },
+      [multiline, onContentSizeChange]
+    );
+
+    const imperativeRef = React.useMemo(
+      () => (hostNode) => {
+        // TextInput needs to add more methods to the hostNode in addition to those
+        // added by `usePlatformMethods`. This is temporarily until an API like
+        // `TextInput.clear(hostRef)` is added to React Native.
+        if (hostNode != null) {
+          hostNode.clear = function () {
+            if (hostNode != null) {
+              hostNode.value = '';
             }
-          });
+          };
+          hostNode.isFocused = function () {
+            return hostNode != null && TextInputState.currentlyFocusedField() === hostNode;
+          };
+          handleContentSizeChange(hostNode);
         }
+      },
+      [handleContentSizeChange]
+    );
+
+    function handleBlur(e) {
+      TextInputState._currentlyFocusedNode = null;
+      if (onBlur) {
+        e.nativeEvent.text = e.target.value;
+        onBlur(e);
       }
-    },
-    [multiline, onContentSizeChange]
-  );
-
-  const imperativeRef = React.useMemo(
-    () => (hostNode) => {
-      // TextInput needs to add more methods to the hostNode in addition to those
-      // added by `usePlatformMethods`. This is temporarily until an API like
-      // `TextInput.clear(hostRef)` is added to React Native.
-      if (hostNode != null) {
-        hostNode.clear = function () {
-          if (hostNode != null) {
-            hostNode.value = '';
-          }
-        };
-        hostNode.isFocused = function () {
-          return hostNode != null && TextInputState.currentlyFocusedField() === hostNode;
-        };
-        handleContentSizeChange(hostNode);
-      }
-    },
-    [handleContentSizeChange]
-  );
-
-  function handleBlur(e) {
-    TextInputState._currentlyFocusedNode = null;
-    if (onBlur) {
-      e.nativeEvent.text = e.target.value;
-      onBlur(e);
     }
-  }
 
-  function handleChange(e) {
-    const hostNode = e.target;
-    const text = hostNode.value;
-    e.nativeEvent.text = text;
-    handleContentSizeChange(hostNode);
-    if (onChange) {
-      onChange(e);
-    }
-    if (onChangeText) {
-      onChangeText(text);
+    function handleChange(e) {
+      const hostNode = e.target;
+      const text = hostNode.value;
+      e.nativeEvent.text = text;
+      handleContentSizeChange(hostNode);
+      if (onChange) {
+        onChange(e);
+      }
+      if (onChangeText) {
+        onChangeText(text);
+      }
     }
-  }
 
-  function handleFocus(e) {
-    const hostNode = e.target;
-    if (onFocus) {
-      e.nativeEvent.text = hostNode.value;
-      onFocus(e);
-    }
-    if (hostNode != null) {
-      TextInputState._currentlyFocusedNode = hostNode;
-      if (clearTextOnFocus) {
-        hostNode.value = '';
+    function handleFocus(e) {
+      const hostNode = e.target;
+      if (onFocus) {
+        e.nativeEvent.text = hostNode.value;
+        onFocus(e);
       }
-      if (selectTextOnFocus) {
-        // Safari requires selection to occur in a setTimeout
-        setTimeout(() => {
-          hostNode.select();
-        }, 0);
+      if (hostNode != null) {
+        TextInputState._currentlyFocusedNode = hostNode;
+        if (clearTextOnFocus) {
+          hostNode.value = '';
+        }
+        if (selectTextOnFocus) {
+          // Safari requires selection to occur in a setTimeout
+          setTimeout(() => {
+            hostNode.select();
+          }, 0);
+        }
       }
     }
-  }
 
-  function handleKeyDown(e) {
-    const hostNode = e.target;
-    // Prevent key events bubbling (see #612)
-    e.stopPropagation();
+    function handleKeyDown(e) {
+      const hostNode = e.target;
+      // Prevent key events bubbling (see #612)
+      e.stopPropagation();
 
-    const blurOnSubmitDefault = !multiline;
-    const shouldBlurOnSubmit = blurOnSubmit == null ? blurOnSubmitDefault : blurOnSubmit;
+      const blurOnSubmitDefault = !multiline;
+      const shouldBlurOnSubmit = blurOnSubmit == null ? blurOnSubmitDefault : blurOnSubmit;
 
-    const nativeEvent = e.nativeEvent;
-    const isComposing = isEventComposing(nativeEvent);
-
-    if (onKeyPress) {
-      onKeyPress(e);
-    }
+      const nativeEvent = e.nativeEvent;
+      const isComposing = isEventComposing(nativeEvent);
 
-    if (
-      e.key === 'Enter' &&
-      !e.shiftKey &&
-      // Do not call submit if composition is occuring.
-      !isComposing &&
-      !e.isDefaultPrevented()
-    ) {
-      if ((blurOnSubmit || !multiline) && onSubmitEditing) {
-        // prevent "Enter" from inserting a newline or submitting a form
-        e.preventDefault();
-        nativeEvent.text = e.target.value;
-        onSubmitEditing(e);
+      if (onKeyPress) {
+        onKeyPress(e);
       }
-      if (shouldBlurOnSubmit && hostNode != null) {
-        hostNode.blur();
+
+      if (
+        e.key === 'Enter' &&
+        !e.shiftKey &&
+        // Do not call submit if composition is occuring.
+        !isComposing &&
+        !e.isDefaultPrevented()
+      ) {
+        if ((blurOnSubmit || !multiline) && onSubmitEditing) {
+          // prevent "Enter" from inserting a newline or submitting a form
+          e.preventDefault();
+          nativeEvent.text = e.target.value;
+          onSubmitEditing(e);
+        }
+        if (shouldBlurOnSubmit && hostNode != null) {
+          hostNode.blur();
+        }
       }
     }
-  }
 
-  function handleSelectionChange(e) {
-    if (onSelectionChange) {
-      try {
-        const node = e.target;
-        const { selectionStart, selectionEnd } = node;
-        e.nativeEvent.selection = {
-          start: selectionStart,
-          end: selectionEnd
-        };
-        e.nativeEvent.text = e.target.value;
-        onSelectionChange(e);
-      } catch (e) {}
+    function handleSelectionChange(e) {
+      if (onSelectionChange) {
+        try {
+          const node = e.target;
+          const { selectionStart, selectionEnd } = node;
+          e.nativeEvent.selection = {
+            start: selectionStart,
+            end: selectionEnd
+          };
+          e.nativeEvent.text = e.target.value;
+          onSelectionChange(e);
+        } catch (e) {}
+      }
     }
-  }
 
-  useLayoutEffect(() => {
-    const node = hostRef.current;
-    if (node != null && selection != null) {
-      setSelection(node, selection);
-    }
-    if (document.activeElement === node) {
-      TextInputState._currentlyFocusedNode = node;
-    }
-  }, [hostRef, selection]);
-
-  const component = multiline ? 'textarea' : 'input';
-  const classList = [classes.textinput];
-  const style = StyleSheet.compose(props.style, placeholderTextColor && { placeholderTextColor });
-
-  useElementLayout(hostRef, onLayout);
-  useResponderEvents(hostRef, {
-    onMoveShouldSetResponder,
-    onMoveShouldSetResponderCapture,
-    onResponderEnd,
-    onResponderGrant,
-    onResponderMove,
-    onResponderReject,
-    onResponderRelease,
-    onResponderStart,
-    onResponderTerminate,
-    onResponderTerminationRequest,
-    onScrollShouldSetResponder,
-    onScrollShouldSetResponderCapture,
-    onSelectionChangeShouldSetResponder,
-    onSelectionChangeShouldSetResponderCapture,
-    onStartShouldSetResponder,
-    onStartShouldSetResponderCapture
+    useLayoutEffect(() => {
+      const node = hostRef.current;
+      if (node != null && selection != null) {
+        setSelection(node, selection);
+      }
+      if (document.activeElement === node) {
+        TextInputState._currentlyFocusedNode = node;
+      }
+    }, [hostRef, selection]);
+
+    const component = multiline ? 'textarea' : 'input';
+    const classList = [classes.textinput];
+    const style = StyleSheet.compose(props.style, placeholderTextColor && { placeholderTextColor });
+
+    useElementLayout(hostRef, onLayout);
+    useResponderEvents(hostRef, {
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onResponderEnd,
+      onResponderGrant,
+      onResponderMove,
+      onResponderReject,
+      onResponderRelease,
+      onResponderStart,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture
+    });
+
+    const supportedProps = pickProps(props);
+    supportedProps.autoCapitalize = autoCapitalize;
+    supportedProps.autoComplete = autoComplete || autoCompleteType || 'on';
+    supportedProps.autoCorrect = autoCorrect ? 'on' : 'off';
+    supportedProps.classList = classList;
+    // 'auto' by default allows browsers to infer writing direction
+    supportedProps.dir = dir !== undefined ? dir : 'auto';
+    supportedProps.enterKeyHint = returnKeyType;
+    supportedProps.onBlur = handleBlur;
+    supportedProps.onChange = handleChange;
+    supportedProps.onFocus = handleFocus;
+    supportedProps.onKeyDown = handleKeyDown;
+    supportedProps.onSelect = handleSelectionChange;
+    supportedProps.readOnly = !editable;
+    supportedProps.rows = multiline ? numberOfLines : undefined;
+    supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect;
+    supportedProps.style = style;
+    supportedProps.type = multiline ? undefined : type;
+    supportedProps.inputMode = inputMode;
+
+    const platformMethodsRef = usePlatformMethods(supportedProps);
+
+    const setRef = useMergeRefs(hostRef, platformMethodsRef, imperativeRef, forwardedRef);
+
+    supportedProps.ref = setRef;
+
+    return createElement(component, supportedProps, rootContext.styleResolver);
   });
 
-  const supportedProps = pickProps(props);
-  supportedProps.autoCapitalize = autoCapitalize;
-  supportedProps.autoComplete = autoComplete || autoCompleteType || 'on';
-  supportedProps.autoCorrect = autoCorrect ? 'on' : 'off';
-  supportedProps.classList = classList;
-  // 'auto' by default allows browsers to infer writing direction
-  supportedProps.dir = dir !== undefined ? dir : 'auto';
-  supportedProps.enterKeyHint = returnKeyType;
-  supportedProps.onBlur = handleBlur;
-  supportedProps.onChange = handleChange;
-  supportedProps.onFocus = handleFocus;
-  supportedProps.onKeyDown = handleKeyDown;
-  supportedProps.onSelect = handleSelectionChange;
-  supportedProps.readOnly = !editable;
-  supportedProps.rows = multiline ? numberOfLines : undefined;
-  supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect;
-  supportedProps.style = style;
-  supportedProps.type = multiline ? undefined : type;
-  supportedProps.inputMode = inputMode;
-
-  const platformMethodsRef = usePlatformMethods(supportedProps);
-
-  const setRef = useMergeRefs(hostRef, platformMethodsRef, imperativeRef, forwardedRef);
-
-  supportedProps.ref = setRef;
-
-  return createElement(component, supportedProps);
-});
-
 TextInput.displayName = 'TextInput';
 // $FlowFixMe
 TextInput.State = TextInputState;
diff --git a/packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js b/packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js
index 74aa89d6e7..9dc1ec781f 100644
--- a/packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 import TouchableWithoutFeedback from '../';
 import View from '../../View';
 
 describe('components/TouchableWithoutFeedback', () => {
   test('forwards ref', () => {
     const ref = jest.fn();
-    render(
+    renderRootContext(
       <TouchableWithoutFeedback ref={ref}>
         <View />
       </TouchableWithoutFeedback>
@@ -16,7 +16,7 @@ describe('components/TouchableWithoutFeedback', () => {
 
   test('forwards ref of child', () => {
     const ref = jest.fn();
-    render(
+    renderRootContext(
       <TouchableWithoutFeedback>
         <View ref={ref} />
       </TouchableWithoutFeedback>
diff --git a/packages/react-native-web/src/exports/View/__tests__/index-test.js b/packages/react-native-web/src/exports/View/__tests__/index-test.js
index 592db3f678..4ace474213 100644
--- a/packages/react-native-web/src/exports/View/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/View/__tests__/index-test.js
@@ -5,17 +5,17 @@ import View from '../';
 import StyleSheet from '../../StyleSheet';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import { render } from '@testing-library/react';
+import renderRootContext from '../../../vendor/renderRootContext';
 
 describe('components/View', () => {
   test('default', () => {
-    const { container } = render(<View />);
+    const { container } = renderRootContext(<View />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('non-text is rendered', () => {
     const children = <View testID="1" />;
-    const { container } = render(<View>{children}</View>);
+    const { container } = renderRootContext(<View>{children}</View>);
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -30,12 +30,12 @@ describe('components/View', () => {
     });
 
     test('error logged (single)', () => {
-      render(<View>hello</View>);
+      renderRootContext(<View>hello</View>);
       expect(console.error).toBeCalled();
     });
 
     test('error logged (array)', () => {
-      render(
+      renderRootContext(
         <View>
           <View />
           hello
@@ -48,62 +48,64 @@ describe('components/View', () => {
 
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = render(<View accessibilityLabel="accessibility label" />);
+      const { container } = renderRootContext(<View accessibilityLabel="accessibility label" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLabelledBy"', () => {
     test('value is set', () => {
-      const { container } = render(<View accessibilityLabelledBy="123" />);
+      const { container } = renderRootContext(<View accessibilityLabelledBy="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = render(<View accessibilityLiveRegion="polite" />);
+      const { container } = renderRootContext(<View accessibilityLiveRegion="polite" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityRole"', () => {
     test('value is set', () => {
-      const { container } = render(<View accessibilityRole="none" />);
+      const { container } = renderRootContext(<View accessibilityRole="none" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value is "button"', () => {
-      const { container } = render(<View accessibilityRole="button" />);
+      const { container } = renderRootContext(<View accessibilityRole="button" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value alters HTML element', () => {
-      const { container } = render(<View accessibilityRole="article" />);
+      const { container } = renderRootContext(<View accessibilityRole="article" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('allows "dir" to be overridden', () => {
-    const { container } = render(<View dir="rtl" />);
+    const { container } = renderRootContext(<View dir="rtl" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "href"', () => {
     test('value is set', () => {
-      const { container } = render(<View href="https://example.com" />);
+      const { container } = renderRootContext(<View href="https://example.com" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('href with accessibilityRole', () => {
-      const { container } = render(<View accessibilityRole="none" href="https://example.com" />);
+      const { container } = renderRootContext(
+        <View accessibilityRole="none" href="https://example.com" />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "hrefAttrs"', () => {
     test('requires "href"', () => {
-      const { container } = render(<View hrefAttrs={{ download: 'filename.jpg' }} />);
+      const { container } = renderRootContext(<View hrefAttrs={{ download: 'filename.jpg' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -113,7 +115,9 @@ describe('components/View', () => {
         rel: 'nofollow',
         target: '_blank'
       };
-      const { container } = render(<View href="https://example.com" hrefAttrs={hrefAttrs} />);
+      const { container } = renderRootContext(
+        <View href="https://example.com" hrefAttrs={hrefAttrs} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -121,7 +125,9 @@ describe('components/View', () => {
       const hrefAttrs = {
         target: 'blank'
       };
-      const { container } = render(<View href="https://example.com" hrefAttrs={hrefAttrs} />);
+      const { container } = renderRootContext(
+        <View href="https://example.com" hrefAttrs={hrefAttrs} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -131,14 +137,16 @@ describe('components/View', () => {
         rel: null,
         target: null
       };
-      const { container } = render(<View href="https://example.com" hrefAttrs={hrefAttrs} />);
+      const { container } = renderRootContext(
+        <View href="https://example.com" hrefAttrs={hrefAttrs} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = render(<View nativeID="nativeID" />);
+      const { container } = renderRootContext(<View nativeID="nativeID" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -148,7 +156,7 @@ describe('components/View', () => {
       const onBlur = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<View onBlur={onBlur} ref={ref} />);
+        renderRootContext(<View onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       const body = createEventTarget(document.body);
@@ -165,7 +173,7 @@ describe('components/View', () => {
       const onFocus = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<View onFocus={onFocus} ref={ref} />);
+        renderRootContext(<View onFocus={onFocus} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -179,7 +187,7 @@ describe('components/View', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      render(<View ref={ref} />);
+      renderRootContext(<View ref={ref} />);
       expect(ref).toBeCalled();
     });
 
@@ -187,7 +195,9 @@ describe('components/View', () => {
       const ref = jest.fn();
       let rerender;
       act(() => {
-        ({ rerender } = render(<View nativeID="123" ref={ref} style={{ borderWidth: 5 }} />));
+        ({ rerender } = renderRootContext(
+          <View nativeID="123" ref={ref} style={{ borderWidth: 5 }} />
+        ));
       });
       expect(ref).toHaveBeenCalledTimes(1);
       act(() => {
@@ -199,7 +209,7 @@ describe('components/View', () => {
     test('node has imperative methods', () => {
       const ref = React.createRef();
       act(() => {
-        render(<View ref={ref} />);
+        renderRootContext(<View ref={ref} />);
       });
       const node = ref.current;
       expect(typeof node.measure === 'function');
@@ -211,7 +221,7 @@ describe('components/View', () => {
     describe('setNativeProps method', () => {
       test('works with react-native props', () => {
         const ref = React.createRef();
-        const { container } = render(<View ref={ref} />);
+        const { container } = renderRootContext(<View ref={ref} />);
         const node = ref.current;
         node.setNativeProps({
           accessibilityLabel: 'label',
@@ -230,7 +240,7 @@ describe('components/View', () => {
         const ref = React.createRef();
         const styles = StyleSheet.create({ root: { color: 'red' } });
         // initial render
-        const { container, rerender } = render(
+        const { container, rerender } = renderRootContext(
           <View ref={ref} style={[styles.root, { width: 10 }]} />
         );
         const node = ref.current;
@@ -253,20 +263,20 @@ describe('components/View', () => {
   });
 
   test('prop "pointerEvents"', () => {
-    const { container } = render(<View pointerEvents="box-only" />);
+    const { container } = renderRootContext(<View pointerEvents="box-only" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = render(<View style={{ borderWidth: 5 }} />);
+      const { container } = renderRootContext(<View style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = render(<View testID="123" />);
+      const { container } = renderRootContext(<View testID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js
index 13c98b7b99..cff153ac72 100644
--- a/packages/react-native-web/src/exports/View/index.js
+++ b/packages/react-native-web/src/exports/View/index.js
@@ -22,6 +22,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
+import RootContext from '../AppRegistry/rootContext';
 
 const forwardPropsList = {
   ...forwardedProps.defaultProps,
@@ -75,6 +76,7 @@ const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods> =
     }
 
     const hasTextAncestor = React.useContext(TextAncestorContext);
+    const rootContext = React.useContext(RootContext);
     const hostRef = React.useRef(null);
 
     useElementLayout(hostRef, onLayout);
@@ -124,7 +126,7 @@ const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods> =
 
     supportedProps.ref = setRef;
 
-    return createElement(component, supportedProps);
+    return createElement(component, supportedProps, rootContext.styleResolver);
   }
 );
 
diff --git a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js
index 6401a43626..2b3f9f9ae9 100644
--- a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js
@@ -3,6 +3,7 @@
 import createElement from '..';
 import React from 'react';
 import { render } from '@testing-library/react';
+import StyleResolver from '../../StyleSheet/StyleResolver';
 
 function getAttribute(container, attribute) {
   return container.firstChild.getAttribute(attribute);
@@ -12,27 +13,45 @@ function getProperty(container, prop) {
   return container.firstChild[prop];
 }
 
+let styleResolver;
+
 describe('exports/createElement', () => {
+  beforeEach(() => {
+    styleResolver = new StyleResolver();
+  });
+
+  afterEach(() => {
+    styleResolver.clear();
+  });
+
   test('renders different DOM elements', () => {
-    let { container } = render(createElement('span'));
+    let { container } = render(createElement('span', {}, styleResolver));
     expect(container.firstChild).toMatchSnapshot();
-    ({ container } = render(createElement('main')));
+    ({ container } = render(createElement('main', {}, styleResolver)));
     expect(container.firstChild).toMatchSnapshot();
     ({ container } = render(
-      createElement('svg', { children: createElement('image', { href: '#href' }) })
+      createElement(
+        'svg',
+        { children: createElement('image', { href: '#href' }, styleResolver) },
+        styleResolver
+      )
     ));
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "accessibilityRole"', () => {
     test('string component type', () => {
-      const { container } = render(createElement('span', { accessibilityRole: 'link' }));
+      const { container } = render(
+        createElement('span', { accessibilityRole: 'link' }, styleResolver)
+      );
       expect(container.firstChild.nodeName).toBe('SPAN');
     });
 
     test('function component type', () => {
       const Custom = () => <div />;
-      const { container } = render(createElement(Custom, { accessibilityRole: 'link' }));
+      const { container } = render(
+        createElement(Custom, { accessibilityRole: 'link' }, styleResolver)
+      );
       expect(container.firstChild.nodeName).toBe('DIV');
     });
   });
@@ -40,126 +59,152 @@ describe('exports/createElement', () => {
   describe('accessibility props', () => {
     test('accessibilityActiveDescendant', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityActiveDescendant: null })
+        createElement('div', { accessibilityActiveDescendant: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-activedescendant')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityActiveDescendant: 'abc' })
+        createElement('div', { accessibilityActiveDescendant: 'abc' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-activedescendant')).toBe('abc');
     });
 
     test('accessibilityAtomic', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityAtomic: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityAtomic: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-atomic')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityAtomic: true }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityAtomic: true }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-atomic')).toBe('true');
     });
 
     test('accessibilityAutoComplete', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityAutoComplete: null })
+        createElement('div', { accessibilityAutoComplete: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-autocomplete')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityAutoComplete: true })
+        createElement('div', { accessibilityAutoComplete: true }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-autocomplete')).toBe('true');
     });
 
     test('accessibilityBusy', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityBusy: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityBusy: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-busy')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityBusy: true }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityBusy: true }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-busy')).toBe('true');
     });
 
     test('accessibilityChecked', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityChecked: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityChecked: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-checked')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityChecked: true }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityChecked: true }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-checked')).toBe('true');
     });
 
     test('accessibilityColumnCount', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityColumnCount: null })
+        createElement('div', { accessibilityColumnCount: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-colcount')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityColumnCount: 5 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityColumnCount: 5 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-colcount')).toBe('5');
     });
 
     test('accessibilityColumnIndex', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityColumnIndex: null })
+        createElement('div', { accessibilityColumnIndex: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-colindex')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityColumnIndex: 5 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityColumnIndex: 5 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-colindex')).toBe('5');
     });
 
     test('accessibilityColumnSpan', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityColumnSpan: null })
+        createElement('div', { accessibilityColumnSpan: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-colspan')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityColumnSpan: 5 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityColumnSpan: 5 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-colspan')).toBe('5');
     });
 
     test('accessibilityControls', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityControls: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityControls: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-controls')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityControls: 'abc' })
+        createElement('div', { accessibilityControls: 'abc' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-controls')).toBe('abc');
       const { container: hasMultipleValues } = render(
-        createElement('div', { accessibilityControls: ['abc', 'def'] })
+        createElement('div', { accessibilityControls: ['abc', 'def'] }, styleResolver)
       );
       expect(getAttribute(hasMultipleValues, 'aria-controls')).toBe('abc def');
     });
 
     test('accessibilityCurrent', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityCurrent: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityCurrent: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-current')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityCurrent: 'page' })
+        createElement('div', { accessibilityCurrent: 'page' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-current')).toBe('page');
     });
 
     test('accessibilityDescribedBy', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityDescribedBy: null })
+        createElement('div', { accessibilityDescribedBy: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-describedby')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityDescribedBy: 'abc' })
+        createElement('div', { accessibilityDescribedBy: 'abc' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-describedby')).toBe('abc');
       const { container: hasMultipleValues } = render(
-        createElement('div', { accessibilityDescribedBy: ['abc', 'def'] })
+        createElement('div', { accessibilityDescribedBy: ['abc', 'def'] }, styleResolver)
       );
       expect(getAttribute(hasMultipleValues, 'aria-describedby')).toBe('abc def');
     });
 
     test('accessibilityDetails', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityDetails: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityDetails: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-details')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityDetails: 'abc' }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityDetails: 'abc' }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-details')).toBe('abc');
     });
 
     test('accessibilityDisabled', () => {
       const { container: isEmpty } = render(
-        createElement('button', { accessibilityDisabled: null })
+        createElement('button', { accessibilityDisabled: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-disabled')).toBeNull();
       expect(getProperty(isEmpty, 'disabled')).toBe(false);
       const { container: hasValue } = render(
-        createElement('button', { accessibilityDisabled: true })
+        createElement('button', { accessibilityDisabled: true }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-disabled')).toBe('true');
       expect(getProperty(hasValue, 'disabled')).toBe(true);
@@ -167,191 +212,239 @@ describe('exports/createElement', () => {
 
     test('accessibilityErrorMessage', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityErrorMessage: null })
+        createElement('div', { accessibilityErrorMessage: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-errormessage')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityErrorMessage: 'abc' })
+        createElement('div', { accessibilityErrorMessage: 'abc' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-errormessage')).toBe('abc');
     });
 
     test('accessibilityExpanded', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityExpanded: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityExpanded: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-expanded')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityExpanded: true }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityExpanded: true }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-expanded')).toBe('true');
     });
 
     test('accessibilityFlowTo', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityFlowTo: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityFlowTo: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-flowto')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityFlowTo: 'abc' }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityFlowTo: 'abc' }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-flowto')).toBe('abc');
       const { container: hasMultipleValues } = render(
-        createElement('div', { accessibilityFlowTo: ['abc', 'def'] })
+        createElement('div', { accessibilityFlowTo: ['abc', 'def'] }, styleResolver)
       );
       expect(getAttribute(hasMultipleValues, 'aria-flowto')).toBe('abc def');
     });
 
     test('accessibilityHasPopup', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityHasPopup: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityHasPopup: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-haspopup')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityHasPopup: true }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityHasPopup: true }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-haspopup')).toBe('true');
     });
 
     test('accessibilityHidden', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityHidden: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityHidden: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-hidden')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityHidden: true }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityHidden: true }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-hidden')).toBe('true');
     });
 
     test('accessibilityInvalid', () => {
-      const { container: isEmpty } = render(createElement('input', { accessibilityInvalid: null }));
+      const { container: isEmpty } = render(
+        createElement('input', { accessibilityInvalid: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-invalid')).toBeNull();
       const { container: hasValue } = render(
-        createElement('input', { accessibilityInvalid: true })
+        createElement('input', { accessibilityInvalid: true }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-invalid')).toBe('true');
     });
 
     test('accessibilityKeyShortcuts', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityKeyShortcuts: null })
+        createElement('div', { accessibilityKeyShortcuts: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-keyshortcuts')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', {
-          accessibilityKeyShortcuts: ['ArrowUp', 'Enter', 'Space', 'Alt+Shift+T']
-        })
+        createElement(
+          'div',
+          {
+            accessibilityKeyShortcuts: ['ArrowUp', 'Enter', 'Space', 'Alt+Shift+T']
+          },
+          styleResolver
+        )
       );
       expect(getAttribute(hasValue, 'aria-keyshortcuts')).toBe('ArrowUp Enter Space Alt+Shift+T');
     });
 
     test('accessibilityLabel', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityLabel: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityLabel: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-label')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityLabel: 'abc' }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityLabel: 'abc' }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-label')).toBe('abc');
     });
 
     test('accessibilityLabelledBy', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityLabelledBy: null })
+        createElement('div', { accessibilityLabelledBy: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-labelledby')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityLabelledBy: 'abc' })
+        createElement('div', { accessibilityLabelledBy: 'abc' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-labelledby')).toBe('abc');
       const { container: hasMultipleValues } = render(
-        createElement('div', { accessibilityLabelledBy: ['abc', 'def'] })
+        createElement('div', { accessibilityLabelledBy: ['abc', 'def'] }, styleResolver)
       );
       expect(getAttribute(hasMultipleValues, 'aria-labelledby')).toBe('abc def');
     });
 
     test('accessibilityLevel', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityLevel: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityLevel: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-level')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityLevel: 3 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityLevel: 3 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-level')).toBe('3');
     });
 
     test('accessibilityLiveRegion', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityLiveRegion: null })
+        createElement('div', { accessibilityLiveRegion: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-live')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityLiveRegion: 'polite' })
+        createElement('div', { accessibilityLiveRegion: 'polite' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-live')).toBe('polite');
     });
 
     test('accessibilityModal', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityModal: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityModal: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-modal')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityModal: true }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityModal: true }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-modal')).toBe('true');
     });
 
     test('accessibilityMultiline', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityMultiline: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityMultiline: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-multiline')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityMultiline: true })
+        createElement('div', { accessibilityMultiline: true }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-multiline')).toBe('true');
     });
 
     test('accessibilityMultiSelectable', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityMultiSelectable: null })
+        createElement('div', { accessibilityMultiSelectable: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-multiselectable')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityMultiSelectable: true })
+        createElement('div', { accessibilityMultiSelectable: true }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-multiselectable')).toBe('true');
     });
 
     test('accessibilityOrientation', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityOrientation: null })
+        createElement('div', { accessibilityOrientation: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-orientation')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityOrientation: 'vertical' })
+        createElement('div', { accessibilityOrientation: 'vertical' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-orientation')).toBe('vertical');
     });
 
     test('accessibilityOwns', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityOwns: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityOwns: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-owns')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityOwns: 'abc' }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityOwns: 'abc' }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-owns')).toBe('abc');
       const { container: hasMultipleValues } = render(
-        createElement('div', { accessibilityOwns: ['abc', 'def'] })
+        createElement('div', { accessibilityOwns: ['abc', 'def'] }, styleResolver)
       );
       expect(getAttribute(hasMultipleValues, 'aria-owns')).toBe('abc def');
     });
 
     test('accessibilityPlaceholder', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityPlaceholder: null })
+        createElement('div', { accessibilityPlaceholder: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-placeholder')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityPlaceholder: 'MM-DD-YYYY' })
+        createElement('div', { accessibilityPlaceholder: 'MM-DD-YYYY' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-placeholder')).toBe('MM-DD-YYYY');
     });
 
     test('accessibilityPosInSet', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityPosInSet: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityPosInSet: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-posinset')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityPosInSet: 3 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityPosInSet: 3 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-posinset')).toBe('3');
     });
 
     test('accessibilityPressed', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityPressed: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityPressed: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-pressed')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityPressed: true }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityPressed: true }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-pressed')).toBe('true');
     });
 
     test('accessibilityReadOnly', () => {
       const { container: isEmpty } = render(
-        createElement('input', { accessibilityReadOnly: null })
+        createElement('input', { accessibilityReadOnly: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-readonly')).toBeNull();
       expect(getProperty(isEmpty, 'readOnly')).toBe(false);
       const { container: hasValue } = render(
-        createElement('input', { accessibilityReadOnly: true })
+        createElement('input', { accessibilityReadOnly: true }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-readonly')).toBe('true');
       expect(getProperty(hasValue, 'readOnly')).toBe(true);
@@ -359,122 +452,168 @@ describe('exports/createElement', () => {
 
     test('accessibilityRequired', () => {
       const { container: isEmpty } = render(
-        createElement('input', { accessibilityRequired: null })
+        createElement('input', { accessibilityRequired: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-required')).toBeNull();
       expect(getProperty(isEmpty, 'required')).toBe(false);
       const { container: hasValue } = render(
-        createElement('input', { accessibilityRequired: true })
+        createElement('input', { accessibilityRequired: true }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-required')).toBe('true');
       expect(getProperty(hasValue, 'required')).toBe(true);
     });
 
     test('accessibilityRole', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityRole: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityRole: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'role')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityRole: 'button' }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityRole: 'button' }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'role')).toBe('button');
       expect(getAttribute(hasValue, 'tabIndex')).toBe('0');
-      const { container: roleIsNone } = render(createElement('div', { accessibilityRole: 'none' }));
+      const { container: roleIsNone } = render(
+        createElement('div', { accessibilityRole: 'none' }, styleResolver)
+      );
       expect(getAttribute(roleIsNone, 'role')).toBe('presentation');
     });
 
     test('accessibilityRoleDescription', () => {
       const { container: isEmpty } = render(
-        createElement('div', { accessibilityRoleDescription: null })
+        createElement('div', { accessibilityRoleDescription: null }, styleResolver)
       );
       expect(getAttribute(isEmpty, 'aria-roledescription')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityRoleDescription: 'abc' })
+        createElement('div', { accessibilityRoleDescription: 'abc' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-roledescription')).toBe('abc');
     });
 
     test('accessibilityRowCount', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityRowCount: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityRowCount: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-rowcount')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityRowCount: 5 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityRowCount: 5 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-rowcount')).toBe('5');
     });
 
     test('accessibilityRowIndex', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityRowIndex: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityRowIndex: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-rowindex')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityRowIndex: 5 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityRowIndex: 5 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-rowindex')).toBe('5');
     });
 
     test('accessibilityRowSpan', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityRowSpan: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityRowSpan: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-rowspan')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityRowSpan: 5 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityRowSpan: 5 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-rowspan')).toBe('5');
     });
 
     test('accessibilitySelected', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilitySelected: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilitySelected: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-selected')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilitySelected: true }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilitySelected: true }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-selected')).toBe('true');
     });
 
     test('accessibilitySetSize', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilitySetSize: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilitySetSize: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-setsize')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilitySetSize: 5 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilitySetSize: 5 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-setsize')).toBe('5');
     });
 
     test('accessibilitySort', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilitySort: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilitySort: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-sort')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilitySort: 'ascending' })
+        createElement('div', { accessibilitySort: 'ascending' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-sort')).toBe('ascending');
     });
 
     test('accessibilityValueMax', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityValueMax: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityValueMax: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-valuemax')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityValueMax: 100 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityValueMax: 100 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-valuemax')).toBe('100');
     });
 
     test('accessibilityValueMin', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityValueMin: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityValueMin: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-valuemin')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityValueMin: 10 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityValueMin: 10 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-valuemin')).toBe('10');
     });
 
     test('accessibilityValueNow', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityValueNow: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityValueNow: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-valuenow')).toBeNull();
-      const { container: hasValue } = render(createElement('div', { accessibilityValueNow: 50 }));
+      const { container: hasValue } = render(
+        createElement('div', { accessibilityValueNow: 50 }, styleResolver)
+      );
       expect(getAttribute(hasValue, 'aria-valuenow')).toBe('50');
     });
 
     test('accessibilityValueText', () => {
-      const { container: isEmpty } = render(createElement('div', { accessibilityValueText: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { accessibilityValueText: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'aria-valuetext')).toBeNull();
       const { container: hasValue } = render(
-        createElement('div', { accessibilityValueText: 'fifty' })
+        createElement('div', { accessibilityValueText: 'fifty' }, styleResolver)
       );
       expect(getAttribute(hasValue, 'aria-valuetext')).toBe('fifty');
     });
 
     test('dataSet', () => {
       const { container: hasValue } = render(
-        createElement('div', {
-          dataSet: {
-            one: '1',
-            two: '2',
-            camelCase: 'camelCase',
-            msPrefix: 'msPrefix'
-          }
-        })
+        createElement(
+          'div',
+          {
+            dataSet: {
+              one: '1',
+              two: '2',
+              camelCase: 'camelCase',
+              msPrefix: 'msPrefix'
+            }
+          },
+          styleResolver
+        )
       );
       expect(hasValue.firstChild).toMatchInlineSnapshot(`
         <div
@@ -487,37 +626,45 @@ describe('exports/createElement', () => {
     });
 
     test('focusable', () => {
-      const { container: isEmpty } = render(createElement('div', { focusable: null }));
+      const { container: isEmpty } = render(
+        createElement('div', { focusable: null }, styleResolver)
+      );
       expect(getAttribute(isEmpty, 'tabindex')).toBeNull();
 
-      const { container: isTrue } = render(createElement('div', { focusable: true }));
+      const { container: isTrue } = render(
+        createElement('div', { focusable: true }, styleResolver)
+      );
       expect(getAttribute(isTrue, 'tabindex')).toBe('0');
 
       const { container: isFalseNativelyFocusable } = render(
-        createElement('button', { focusable: false })
+        createElement('button', { focusable: false }, styleResolver)
       );
       expect(getAttribute(isFalseNativelyFocusable, 'tabindex')).toBe('-1');
 
       const { container: isDisabledNativelyFocusable } = render(
-        createElement('button', {
-          accessibilityDisabled: true,
-          focusable: true
-        })
+        createElement(
+          'button',
+          {
+            accessibilityDisabled: true,
+            focusable: true
+          },
+          styleResolver
+        )
       );
       expect(getAttribute(isDisabledNativelyFocusable, 'tabindex')).toBe('-1');
 
       const { container: isTrueNativelyFocusable } = render(
-        createElement('button', { focusable: true })
+        createElement('button', { focusable: true }, styleResolver)
       );
       expect(getAttribute(isTrueNativelyFocusable, 'tabindex')).toBeNull();
 
       const { container: isFocusableRole } = render(
-        createElement('div', { accessibilityRole: 'button', focusable: true })
+        createElement('div', { accessibilityRole: 'button', focusable: true }, styleResolver)
       );
       expect(getAttribute(isFocusableRole, 'tabindex')).toBe('0');
 
       const { container: isFalseFocusableRole } = render(
-        createElement('div', { accessibilityRole: 'button', focusable: false })
+        createElement('div', { accessibilityRole: 'button', focusable: false }, styleResolver)
       );
       expect(getAttribute(isFalseFocusableRole, 'tabindex')).toBe('-1');
     });
diff --git a/packages/react-native-web/src/exports/createElement/index.js b/packages/react-native-web/src/exports/createElement/index.js
index 95e4b28283..fa0b98be9c 100644
--- a/packages/react-native-web/src/exports/createElement/index.js
+++ b/packages/react-native-web/src/exports/createElement/index.js
@@ -11,14 +11,14 @@ import AccessibilityUtil from '../../modules/AccessibilityUtil';
 import createDOMProps from '../../modules/createDOMProps';
 import React from 'react';
 
-const createElement = (component, props, ...children) => {
+const createElement = (component, props, styleResolver, ...children) => {
   // Use equivalent platform elements where possible.
   let accessibilityComponent;
   if (component && component.constructor === String) {
     accessibilityComponent = AccessibilityUtil.propsToAccessibilityComponent(props);
   }
   const Component = accessibilityComponent || component;
-  const domProps = createDOMProps(Component, props);
+  const domProps = createDOMProps(Component, styleResolver, props);
 
   return React.createElement(Component, domProps, ...children);
 };
diff --git a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js
index 0a208eda99..990a7d06aa 100644
--- a/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/createDOMProps/__tests__/index-test.js
@@ -1,44 +1,47 @@
 /* eslint-env jasmine, jest */
 
 import createDOMProps from '..';
+import StyleResolver from '../../../exports/StyleSheet/StyleResolver';
 
-const createProps = (props) => createDOMProps(null, props);
+const createProps = (props, resolver) => createDOMProps(null, resolver, props);
 
 describe('modules/createDOMProps', () => {
+  const resolver = new StyleResolver();
+
   describe('focus-related accessibility attributes', () => {
     test('with no accessibility props', () => {
-      expect(createProps({})).toEqual({});
+      expect(createProps({}, resolver)).toEqual({});
     });
 
     describe('"accessibilityRole" of "link"', () => {
       const accessibilityRole = 'link';
 
       test('default case', () => {
-        expect(createProps({ accessibilityRole })).toEqual(
+        expect(createProps({ accessibilityRole }, resolver)).toEqual(
           expect.not.objectContaining({ tabIndex: '-1' })
         );
       });
 
       test('when "focusable" is true', () => {
-        expect(createProps({ accessibilityRole, focusable: true })).toEqual(
+        expect(createProps({ accessibilityRole, focusable: true }, resolver)).toEqual(
           expect.not.objectContaining({ tabIndex: '-1' })
         );
       });
 
       test('when "focusable" is false', () => {
-        expect(createProps({ accessibilityRole, focusable: false })).toEqual(
+        expect(createProps({ accessibilityRole, focusable: false }, resolver)).toEqual(
           expect.objectContaining({ tabIndex: '-1' })
         );
       });
 
       test('when "accessibilityDisabled" is true', () => {
-        expect(createProps({ accessibilityRole, accessibilityDisabled: true })).toEqual(
+        expect(createProps({ accessibilityRole, accessibilityDisabled: true }, resolver)).toEqual(
           expect.objectContaining({ 'aria-disabled': true })
         );
       });
 
       test('when "disabled" is false', () => {
-        expect(createProps({ accessibilityRole, accessibilityDisabled: false })).toEqual(
+        expect(createProps({ accessibilityRole, accessibilityDisabled: false }, resolver)).toEqual(
           expect.not.objectContaining({ tabIndex: '-1' })
         );
       });
@@ -46,31 +49,31 @@ describe('modules/createDOMProps', () => {
 
     const testFocusableRole = (accessibilityRole) => {
       test('default case', () => {
-        expect(createProps({ accessibilityRole })).toEqual(
+        expect(createProps({ accessibilityRole }, resolver)).toEqual(
           expect.objectContaining({ tabIndex: '0' })
         );
       });
 
       test('when "focusable" is true', () => {
-        expect(createProps({ accessibilityRole, focusable: true })).toEqual(
+        expect(createProps({ accessibilityRole, focusable: true }, resolver)).toEqual(
           expect.objectContaining({ tabIndex: '0' })
         );
       });
 
       test('when "focusable" is false', () => {
-        expect(createProps({ accessibilityRole, focusable: false })).toEqual(
+        expect(createProps({ accessibilityRole, focusable: false }, resolver)).toEqual(
           expect.objectContaining({ tabIndex: '-1' })
         );
       });
 
       test('when "accessibilityDisabled" is true', () => {
-        expect(createProps({ accessibilityRole, accessibilityDisabled: true })).toEqual(
+        expect(createProps({ accessibilityRole, accessibilityDisabled: true }, resolver)).toEqual(
           expect.objectContaining({ 'aria-disabled': true })
         );
       });
 
       test('when "accessibilityDisabled" is false', () => {
-        expect(createProps({ accessibilityRole, accessibilityDisabled: false })).toEqual(
+        expect(createProps({ accessibilityRole, accessibilityDisabled: false }, resolver)).toEqual(
           expect.objectContaining({ tabIndex: '0' })
         );
       });
@@ -82,13 +85,13 @@ describe('modules/createDOMProps', () => {
 
     describe('with unfocusable accessibilityRole', () => {
       test('when "focusable" is true', () => {
-        expect(createProps({ focusable: true })).toEqual(
+        expect(createProps({ focusable: true }, resolver)).toEqual(
           expect.objectContaining({ tabIndex: '0' })
         );
       });
 
       test('when "focusable" is false', () => {
-        expect(createProps({ focusable: false })).toEqual(
+        expect(createProps({ focusable: false }, resolver)).toEqual(
           expect.objectContaining({ tabIndex: '-1' })
         );
       });
@@ -97,19 +100,19 @@ describe('modules/createDOMProps', () => {
 
   test('prop "accessibilityLabel" becomes "aria-label"', () => {
     const accessibilityLabel = 'accessibilityLabel';
-    const props = createProps({ accessibilityLabel });
+    const props = createProps({ accessibilityLabel }, resolver);
     expect(props['aria-label']).toEqual(accessibilityLabel);
   });
 
   test('prop "accessibilityLiveRegion" becomes "aria-live"', () => {
     const accessibilityLiveRegion = 'none';
-    const props = createProps({ accessibilityLiveRegion });
+    const props = createProps({ accessibilityLiveRegion }, resolver);
     expect(props['aria-live']).toEqual('off');
   });
 
   test('prop "accessibilityRole" becomes "role"', () => {
     const accessibilityRole = 'button';
-    const props = createProps({ accessibilityRole });
+    const props = createProps({ accessibilityRole }, resolver);
     expect(props.role).toEqual('button');
   });
 
@@ -133,50 +136,54 @@ describe('modules/createDOMProps', () => {
 
     test('values are "undefined"', () => {
       const accessibilityState = createAccessibilityState(undefined);
-      const props = createProps({ accessibilityState });
+      const props = createProps({ accessibilityState }, resolver);
       expect(props).toMatchSnapshot();
     });
 
     test('values are "false"', () => {
       const accessibilityState = createAccessibilityState(false);
-      const props = createProps({ accessibilityState });
+      const props = createProps({ accessibilityState }, resolver);
       expect(props).toMatchSnapshot();
     });
 
     test('values are "true"', () => {
       const accessibilityState = createAccessibilityState(true);
-      const props = createProps({ accessibilityState });
+      const props = createProps({ accessibilityState }, resolver);
       expect(props).toMatchSnapshot();
     });
   });
 
   test('prop "className" is preserved', () => {
     const className = 'external-class-name';
-    const props = createProps({ className });
+    const props = createProps({ className }, resolver);
     expect(props.className).toEqual(className);
   });
 
   test('prop "nativeID" becomes "id"', () => {
     const nativeID = 'Example.nativeID';
-    const props = createProps({ nativeID });
+    const props = createProps({ nativeID }, resolver);
     expect(props.id).toEqual(nativeID);
   });
 
   test('prop "testID" becomes "data-testid"', () => {
     const testID = 'Example.testID';
-    const props = createProps({ testID });
+    const props = createProps({ testID }, resolver);
     expect(props['data-testid']).toEqual(testID);
   });
 
   test('includes cursor style for pressable roles', () => {
-    expect(createDOMProps('span', { accessibilityRole: 'link' }).className).toMatchSnapshot();
-    expect(createDOMProps('span', { accessibilityRole: 'button' }).className).toMatchSnapshot();
+    expect(
+      createDOMProps('span', resolver, { accessibilityRole: 'link' }).className
+    ).toMatchSnapshot();
+    expect(
+      createDOMProps('span', resolver, { accessibilityRole: 'button' }).className
+    ).toMatchSnapshot();
   });
 
   test('includes base reset style for browser-styled elements', () => {
-    expect(createDOMProps('a').className).toMatchSnapshot();
-    expect(createDOMProps('button').className).toMatchSnapshot();
-    expect(createDOMProps('li').className).toMatchSnapshot();
-    expect(createDOMProps('ul').className).toMatchSnapshot();
+    expect(createDOMProps('a', resolver, {}).className).toMatchSnapshot();
+    expect(createDOMProps('button', resolver, {}).className).toMatchSnapshot();
+    expect(createDOMProps('li', resolver, {}).className).toMatchSnapshot();
+    expect(createDOMProps('ul', resolver, {}).className).toMatchSnapshot();
   });
 });
diff --git a/packages/react-native-web/src/modules/createDOMProps/index.js b/packages/react-native-web/src/modules/createDOMProps/index.js
index 3f7efb13fe..b6af1d95e9 100644
--- a/packages/react-native-web/src/modules/createDOMProps/index.js
+++ b/packages/react-native-web/src/modules/createDOMProps/index.js
@@ -10,7 +10,6 @@
 import AccessibilityUtil from '../AccessibilityUtil';
 import css from '../../exports/StyleSheet/css';
 import StyleSheet from '../../exports/StyleSheet';
-import styleResolver from '../../exports/StyleSheet/styleResolver';
 import { STYLE_GROUPS } from '../../exports/StyleSheet/constants';
 
 const emptyObject = {};
@@ -62,7 +61,7 @@ const pointerEventsStyles = StyleSheet.create({
   }
 });
 
-const createDOMProps = (elementType, props) => {
+const createDOMProps = (elementType, styleResolver, props) => {
   if (!props) {
     props = emptyObject;
   }
diff --git a/packages/react-native-web/src/modules/usePlatformMethods/index.js b/packages/react-native-web/src/modules/usePlatformMethods/index.js
index c04c781c72..dabf2a01da 100644
--- a/packages/react-native-web/src/modules/usePlatformMethods/index.js
+++ b/packages/react-native-web/src/modules/usePlatformMethods/index.js
@@ -13,13 +13,23 @@ import type { ViewProps } from '../../exports/View';
 import UIManager from '../../exports/UIManager';
 import createDOMProps from '../createDOMProps';
 import useStable from '../useStable';
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
+import RootContext from '../../exports/AppRegistry/rootContext';
+import StyleResolver from '../../exports/StyleSheet/StyleResolver';
 
 const emptyObject = {};
 
-function setNativeProps(node, nativeProps, classList, pointerEvents, style, previousStyleRef) {
+function setNativeProps(
+  node,
+  styleResolver,
+  nativeProps,
+  classList,
+  pointerEvents,
+  style,
+  previousStyleRef
+) {
   if (node != null && nativeProps) {
-    const domProps = createDOMProps(null, {
+    const domProps = createDOMProps(null, styleResolver, {
       pointerEvents,
       ...nativeProps,
       classList: [classList, nativeProps.className],
@@ -60,8 +70,16 @@ export default function usePlatformMethods({
 }): (hostNode: any) => void {
   const previousStyleRef = useRef(null);
   const setNativePropsArgsRef = useRef(null);
+  const rootContext = useContext(RootContext);
   setNativePropsArgsRef.current = { classList, pointerEvents, style };
 
+  let resolver;
+  if (rootContext?.styleResolver) {
+    resolver = rootContext.styleResolver;
+  } else {
+    resolver = new StyleResolver();
+  }
+
   // Avoid creating a new ref on every render. The props only need to be
   // available to 'setNativeProps' when it is called.
   const ref = useStable(() => (hostNode: any) => {
@@ -72,7 +90,15 @@ export default function usePlatformMethods({
       hostNode.measureInWindow = (callback) => UIManager.measureInWindow(hostNode, callback);
       hostNode.setNativeProps = (nativeProps) => {
         const { classList, style, pointerEvents } = setNativePropsArgsRef.current || emptyObject;
-        setNativeProps(hostNode, nativeProps, classList, pointerEvents, style, previousStyleRef);
+        setNativeProps(
+          hostNode,
+          resolver,
+          nativeProps,
+          classList,
+          pointerEvents,
+          style,
+          previousStyleRef
+        );
       };
     }
   });
diff --git a/packages/react-native-web/src/vendor/renderRootContext.js b/packages/react-native-web/src/vendor/renderRootContext.js
new file mode 100644
index 0000000000..939b6f800e
--- /dev/null
+++ b/packages/react-native-web/src/vendor/renderRootContext.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Ondrej Zaruba.
+ * Copyright (c) Microsoft and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import RootContext from '../exports/AppRegistry/rootContext';
+import StyleResolver from '../exports/StyleSheet/StyleResolver';
+
+function RootContextProvider({ children }) {
+    const resolver = new StyleResolver();
+    const rootContext = { rootTag: undefined, styleResolver: resolver };
+
+    React.useEffect(() => {
+        return function cleanup() {
+            resolver.clear();
+        }
+    })
+
+    return (
+        <RootContext.Provider value={rootContext}>
+            {children}
+        </RootContext.Provider>
+    );
+}
+
+export default function renderRootContext(element: React.ReactElement, options) {
+    return render(element, { wrapper: RootContextProvider, ...options });
+}
\ No newline at end of file

From 3200bf7cc62c2507f9cb2531aa35c70ce8cdb746 Mon Sep 17 00:00:00 2001
From: Ondrej Zaruba <onzruba@microsoft.com>
Date: Thu, 23 Dec 2021 16:31:58 +0100
Subject: [PATCH 2/5] Add example

---
 packages/examples/pages/_app.js               |  7 ++
 packages/examples/pages/multi-root/index.js   | 73 +++++++++++++++++++
 .../src/exports/AppRegistry/AppContainer.js   | 13 +++-
 .../exports/AppRegistry/PortalContainer.js    | 38 ++++++++++
 .../{rootContext.js => RootContext.js}        |  4 +-
 .../exports/AppRegistry/renderApplication.js  |  9 +--
 .../src/exports/Image/index.js                |  2 +-
 .../src/exports/Text/index.js                 |  2 +-
 .../src/exports/View/index.js                 |  2 +-
 .../src/modules/usePlatformMethods/index.js   | 12 +--
 10 files changed, 136 insertions(+), 26 deletions(-)
 create mode 100644 packages/examples/pages/_app.js
 create mode 100644 packages/examples/pages/multi-root/index.js
 create mode 100644 packages/react-native-web/src/exports/AppRegistry/PortalContainer.js
 rename packages/react-native-web/src/exports/AppRegistry/{rootContext.js => RootContext.js} (59%)

diff --git a/packages/examples/pages/_app.js b/packages/examples/pages/_app.js
new file mode 100644
index 0000000000..536c60d71b
--- /dev/null
+++ b/packages/examples/pages/_app.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import AppContainer from 'react-native-web/dist/cjs/exports/AppRegistry/AppContainer';
+
+export default function Application({ Component, pageProps }) {
+  return <AppContainer WrapperComponent={Component} WrapperComponentProps={pageProps} />;
+}
diff --git a/packages/examples/pages/multi-root/index.js b/packages/examples/pages/multi-root/index.js
new file mode 100644
index 0000000000..7e228b5406
--- /dev/null
+++ b/packages/examples/pages/multi-root/index.js
@@ -0,0 +1,73 @@
+import { Button, StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import Example from '../../shared/example';
+
+import { PortalContainer } from '../../../react-native-web/dist/cjs/exports/AppRegistry/PortalContainer';
+
+export function ChildWindowPage() {
+  const [clicked, setClicked] = React.useState(false);
+
+  function onClick() {
+    setClicked(true);
+  }
+
+  return (
+    <View style={styles.childItems}>
+      <Button onPress={onClick} title="Click" />
+      <Text>{clicked ? 'Clicked!' : 'Click this button!'}</Text>
+    </View>
+  );
+}
+
+export default function MultiRootPage() {
+  const [rootTagContainer, setRootTagContainer] = React.useState(undefined);
+
+  function openWindow() {
+    const childWindow = window.open('', 'Child window', 'left=100,top=100,width=640,height=480');
+
+    const title = childWindow.document.createElement('title');
+    title.innerText = 'Child Window';
+    childWindow.document.head.appendChild(title);
+
+    const rootTag = childWindow.document.createElement('div');
+    rootTag.style.width = '100%';
+    rootTag.style.height = '100%';
+    rootTag.style.display = 'flex';
+    rootTag.style.margin = '0';
+    rootTag.style.padding = '0';
+    childWindow.document.body.appendChild(rootTag);
+
+    setRootTagContainer(rootTag);
+  }
+
+  function closeWindow() {
+    setRootTagContainer(undefined);
+  }
+
+  return (
+    <Example title="Multi root">
+      <View>
+        <Text>Child Window example</Text>
+        <View style={styles.buttons}>
+          <Button onPress={openWindow} title="Open window" />
+          <Button onPress={closeWindow} title="Close window" />
+        </View>
+        {rootTagContainer ? (
+          <PortalContainer rootTag={rootTagContainer}>
+            <ChildWindowPage />
+          </PortalContainer>
+        ) : undefined}
+      </View>
+    </Example>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    gap: '5px'
+  },
+  childItems: {
+    gap: '100px'
+  }
+});
diff --git a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js b/packages/react-native-web/src/exports/AppRegistry/AppContainer.js
index 952c14c808..2fd5fa4710 100644
--- a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js
+++ b/packages/react-native-web/src/exports/AppRegistry/AppContainer.js
@@ -9,7 +9,7 @@
  */
 
 import * as React from 'react';
-import RootContext from './rootContext';
+import RootContext from './RootContext';
 import StyleResolver from '../StyleSheet/StyleResolver';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
@@ -18,13 +18,18 @@ type Props = {
   WrapperComponent?: ?React.ComponentType<*>,
   // $FlowFixMe
   children?: React.Children,
-  rootTag: any,
-  styleResolver: typeof StyleResolver
+  rootTag: HTMLElement,
+  styleResolver?: StyleResolver
 };
 
 export default function AppContainer(props: Props): React.Node {
   const { children, WrapperComponent } = props;
 
+  const styleResolver = React.useRef(props.styleResolver ?? new StyleResolver(props.rootTag), [
+    props.rootTag,
+    props.styleResolver
+  ]);
+
   let innerView = (
     <View children={children} key={1} pointerEvents="box-none" style={styles.appContainer} />
   );
@@ -32,7 +37,7 @@ export default function AppContainer(props: Props): React.Node {
   if (WrapperComponent) {
     innerView = <WrapperComponent>{innerView}</WrapperComponent>;
   }
-  const rootContext = { rootTag: props.rootTag, styleResolver: props.styleResolver };
+  const rootContext = { rootTag: props.rootTag, styleResolver: styleResolver.current };
   return (
     <RootContext.Provider value={rootContext}>
       <View pointerEvents="box-none" style={styles.appContainer}>
diff --git a/packages/react-native-web/src/exports/AppRegistry/PortalContainer.js b/packages/react-native-web/src/exports/AppRegistry/PortalContainer.js
new file mode 100644
index 0000000000..ea4b5f331e
--- /dev/null
+++ b/packages/react-native-web/src/exports/AppRegistry/PortalContainer.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Ondrej Zaruba.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import StyleResolver from '../StyleSheet/StyleResolver';
+import RootContext from './RootContext';
+
+type Props = {
+  rootTag: HTMLElement,
+  children?: React.Children
+};
+
+// maybe use https://styled-components.com/docs/api#stylesheetmanager
+
+export function PortalContainer(props: Props): React.Node {
+  const styleResolver = React.useRef(props.styleResolver ?? new StyleResolver(props.rootTag), [
+    props.rootTag,
+    props
+  ]);
+  const rootContext = { rootTag: props.rootTag, styleResolver: styleResolver.current };
+  React.useEffect(() => {
+    return () => {
+      styleResolver.current.clear();
+    };
+  }, [styleResolver]);
+
+  return ReactDOM.createPortal(
+    <RootContext.Provider value={rootContext}>{props.children}</RootContext.Provider>,
+    props.rootTag
+  );
+}
diff --git a/packages/react-native-web/src/exports/AppRegistry/rootContext.js b/packages/react-native-web/src/exports/AppRegistry/RootContext.js
similarity index 59%
rename from packages/react-native-web/src/exports/AppRegistry/rootContext.js
rename to packages/react-native-web/src/exports/AppRegistry/RootContext.js
index d217b7e76b..bd00002411 100644
--- a/packages/react-native-web/src/exports/AppRegistry/rootContext.js
+++ b/packages/react-native-web/src/exports/AppRegistry/RootContext.js
@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import StyleResolver from '../../exports/StyleSheet/StyleResolver';
+import StyleResolver from '../StyleSheet/StyleResolver';
 
-const RootContext: { styleResoler: StyleResolver, rootTag: Node } = React.createContext(null);
+const RootContext = React.createContext<{ styleResoler: StyleResolver, rootTag?: Node }>(null);
 export default RootContext;
diff --git a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
index da6613faeb..15295d98bf 100644
--- a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
+++ b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
@@ -29,15 +29,10 @@ export default function renderApplication<Props: Object>(
   const { hydrate: shouldHydrate, initialProps, rootTag } = options;
   const renderFn = shouldHydrate ? hydrate : render;
 
-  const styleResolver = new StyleResolver(options.rootTag);
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
   renderFn(
-    <AppContainer
-      WrapperComponent={WrapperComponent}
-      rootTag={rootTag}
-      styleResolver={styleResolver}
-    >
+    <AppContainer WrapperComponent={WrapperComponent} rootTag={rootTag}>
       <RootComponent {...initialProps} />
     </AppContainer>,
     rootTag,
@@ -52,7 +47,7 @@ export function getApplication(
 ): {| element: Node, getStyleElement: (Object) => Node |} {
   const styleResolver = new StyleResolver();
   const element = (
-    <AppContainer WrapperComponent={WrapperComponent} rootTag={{}} styleResolver={styleResolver}>
+    <AppContainer WrapperComponent={WrapperComponent} rootTag={null} styleResolver={styleResolver}>
       <RootComponent {...initialProps} />
     </AppContainer>
   );
diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index 7b3aeebc31..4bb104f9a2 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -20,7 +20,7 @@ import PixelRatio from '../PixelRatio';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
 import View from '../View';
-import RootContext from '../AppRegistry/rootContext';
+import RootContext from '../AppRegistry/RootContext';
 
 export type { ImageProps };
 
diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
index 34bc4b1a98..13d92f5021 100644
--- a/packages/react-native-web/src/exports/Text/index.js
+++ b/packages/react-native-web/src/exports/Text/index.js
@@ -22,7 +22,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from './TextAncestorContext';
-import RootContext from '../AppRegistry/rootContext';
+import RootContext from '../AppRegistry/RootContext';
 
 const forwardPropsList = {
   ...forwardedProps.defaultProps,
diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js
index cff153ac72..47e58388ba 100644
--- a/packages/react-native-web/src/exports/View/index.js
+++ b/packages/react-native-web/src/exports/View/index.js
@@ -22,7 +22,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
-import RootContext from '../AppRegistry/rootContext';
+import RootContext from '../AppRegistry/RootContext';
 
 const forwardPropsList = {
   ...forwardedProps.defaultProps,
diff --git a/packages/react-native-web/src/modules/usePlatformMethods/index.js b/packages/react-native-web/src/modules/usePlatformMethods/index.js
index dabf2a01da..e0569f6271 100644
--- a/packages/react-native-web/src/modules/usePlatformMethods/index.js
+++ b/packages/react-native-web/src/modules/usePlatformMethods/index.js
@@ -14,8 +14,7 @@ import UIManager from '../../exports/UIManager';
 import createDOMProps from '../createDOMProps';
 import useStable from '../useStable';
 import { useContext, useRef } from 'react';
-import RootContext from '../../exports/AppRegistry/rootContext';
-import StyleResolver from '../../exports/StyleSheet/StyleResolver';
+import RootContext from '../../exports/AppRegistry/RootContext';
 
 const emptyObject = {};
 
@@ -73,13 +72,6 @@ export default function usePlatformMethods({
   const rootContext = useContext(RootContext);
   setNativePropsArgsRef.current = { classList, pointerEvents, style };
 
-  let resolver;
-  if (rootContext?.styleResolver) {
-    resolver = rootContext.styleResolver;
-  } else {
-    resolver = new StyleResolver();
-  }
-
   // Avoid creating a new ref on every render. The props only need to be
   // available to 'setNativeProps' when it is called.
   const ref = useStable(() => (hostNode: any) => {
@@ -92,7 +84,7 @@ export default function usePlatformMethods({
         const { classList, style, pointerEvents } = setNativePropsArgsRef.current || emptyObject;
         setNativeProps(
           hostNode,
-          resolver,
+          rootContext.styleResolver,
           nativeProps,
           classList,
           pointerEvents,

From a9da7b55bacd50fa052df83013518c4d61a0854e Mon Sep 17 00:00:00 2001
From: Ondrej Zaruba <onzruba@microsoft.com>
Date: Thu, 30 Dec 2021 11:26:11 +0100
Subject: [PATCH 3/5] More fixes

---
 packages/examples/pages/_app.js               |   6 +-
 packages/examples/pages/multi-root/index.js   |  24 +-
 .../src/exports/AppRegistry/AppContainer.js   |  21 +-
 .../exports/AppRegistry/PortalContainer.js    |  38 -
 .../src/exports/AppRegistry/RootContext.js    |  14 -
 .../__snapshots__/index-test.js.snap          |  26 +-
 .../exports/AppRegistry/renderApplication.js  |  30 +-
 .../src/exports/CheckBox/index.js             |   6 +-
 .../__snapshots__/index-test.js.snap          |   8 +-
 .../src/exports/Image/index.js                |   6 +-
 .../src/exports/Modal/ModalAnimation.js       |   6 +-
 .../src/exports/Modal/ModalContent.js         |   5 +-
 .../src/exports/Modal/ModalFocusTrap.js       |  48 +-
 .../src/exports/Modal/ModalPortal.js          |   6 +-
 .../src/exports/Picker/PickerItem.js          |   6 +-
 .../src/exports/Picker/index.js               |  80 +-
 .../src/exports/StyleSheet/StyleResolver.js   |   2 +-
 .../exports/StyleSheet/StyleSheetContext.js   |  19 +
 .../exports/StyleSheet/StyleSheetManager.js   |  48 ++
 .../src/exports/StyleSheet/modality.js        |   4 +-
 .../src/exports/Switch/index.js               |   6 +-
 .../src/exports/Text/index.js                 |   6 +-
 .../src/exports/TextInput/index.js            | 510 ++++++------
 .../src/exports/View/index.js                 |   6 +-
 .../src/modules/usePlatformMethods/index.js   |   6 +-
 .../modules/usePressEvents/PressResponder.js  |  18 +-
 .../src/modules/usePressEvents/index.js       |  10 +-
 .../useResponderEvents/ResponderSystem.js     | 772 +++++++++---------
 .../ResponderTouchHistoryStore.js             | 167 ++--
 .../__tests__/index-test.js                   | 148 ++--
 .../createResponderEvent.js                   |   7 +-
 .../src/modules/useResponderEvents/index.js   |  19 +-
 .../src/vendor/renderRootContext.js           |  22 +-
 33 files changed, 1087 insertions(+), 1013 deletions(-)
 delete mode 100644 packages/react-native-web/src/exports/AppRegistry/PortalContainer.js
 delete mode 100644 packages/react-native-web/src/exports/AppRegistry/RootContext.js
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/StyleSheetContext.js
 create mode 100644 packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js

diff --git a/packages/examples/pages/_app.js b/packages/examples/pages/_app.js
index 536c60d71b..a72cc70a16 100644
--- a/packages/examples/pages/_app.js
+++ b/packages/examples/pages/_app.js
@@ -1,7 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 
-import AppContainer from 'react-native-web/dist/cjs/exports/AppRegistry/AppContainer';
+import StyleSheetManager from 'react-native-web/dist/cjs/exports/StyleSheet/StyleSheetManager';
 
 export default function Application({ Component, pageProps }) {
-  return <AppContainer WrapperComponent={Component} WrapperComponentProps={pageProps} />;
+  return <StyleSheetManager>{<Component {...pageProps} />}</StyleSheetManager>;
 }
diff --git a/packages/examples/pages/multi-root/index.js b/packages/examples/pages/multi-root/index.js
index 7e228b5406..821682e374 100644
--- a/packages/examples/pages/multi-root/index.js
+++ b/packages/examples/pages/multi-root/index.js
@@ -1,8 +1,9 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { Button, StyleSheet, Text, View } from 'react-native';
-import React from 'react';
-import Example from '../../shared/example';
+import StyleSheetManager from 'react-native-web/dist/cjs/exports/StyleSheet/StyleSheetManager';
 
-import { PortalContainer } from '../../../react-native-web/dist/cjs/exports/AppRegistry/PortalContainer';
+import Example from '../../shared/example';
 
 export function ChildWindowPage() {
   const [clicked, setClicked] = React.useState(false);
@@ -13,6 +14,7 @@ export function ChildWindowPage() {
 
   return (
     <View style={styles.childItems}>
+      <Button onPress={onClick} title="Click" />
       <Button onPress={onClick} title="Click" />
       <Text>{clicked ? 'Clicked!' : 'Click this button!'}</Text>
     </View>
@@ -52,11 +54,14 @@ export default function MultiRootPage() {
           <Button onPress={openWindow} title="Open window" />
           <Button onPress={closeWindow} title="Close window" />
         </View>
-        {rootTagContainer ? (
-          <PortalContainer rootTag={rootTagContainer}>
-            <ChildWindowPage />
-          </PortalContainer>
-        ) : undefined}
+        {rootTagContainer
+          ? ReactDOM.createPortal(
+              <StyleSheetManager rootTag={rootTagContainer}>
+                <ChildWindowPage />
+              </StyleSheetManager>,
+              rootTagContainer
+            )
+          : undefined}
       </View>
     </Example>
   );
@@ -68,6 +73,7 @@ const styles = StyleSheet.create({
     gap: '5px'
   },
   childItems: {
-    gap: '100px'
+    gap: '100px',
+    flexGrow: 1
   }
 });
diff --git a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js b/packages/react-native-web/src/exports/AppRegistry/AppContainer.js
index 2fd5fa4710..1e89817870 100644
--- a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js
+++ b/packages/react-native-web/src/exports/AppRegistry/AppContainer.js
@@ -9,27 +9,18 @@
  */
 
 import * as React from 'react';
-import RootContext from './RootContext';
-import StyleResolver from '../StyleSheet/StyleResolver';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
 
 type Props = {
   WrapperComponent?: ?React.ComponentType<*>,
   // $FlowFixMe
-  children?: React.Children,
-  rootTag: HTMLElement,
-  styleResolver?: StyleResolver
+  children?: React.Children
 };
 
 export default function AppContainer(props: Props): React.Node {
   const { children, WrapperComponent } = props;
 
-  const styleResolver = React.useRef(props.styleResolver ?? new StyleResolver(props.rootTag), [
-    props.rootTag,
-    props.styleResolver
-  ]);
-
   let innerView = (
     <View children={children} key={1} pointerEvents="box-none" style={styles.appContainer} />
   );
@@ -37,13 +28,11 @@ export default function AppContainer(props: Props): React.Node {
   if (WrapperComponent) {
     innerView = <WrapperComponent>{innerView}</WrapperComponent>;
   }
-  const rootContext = { rootTag: props.rootTag, styleResolver: styleResolver.current };
+
   return (
-    <RootContext.Provider value={rootContext}>
-      <View pointerEvents="box-none" style={styles.appContainer}>
-        {innerView}
-      </View>
-    </RootContext.Provider>
+    <View pointerEvents="box-none" style={styles.appContainer}>
+      {innerView}
+    </View>
   );
 }
 
diff --git a/packages/react-native-web/src/exports/AppRegistry/PortalContainer.js b/packages/react-native-web/src/exports/AppRegistry/PortalContainer.js
deleted file mode 100644
index ea4b5f331e..0000000000
--- a/packages/react-native-web/src/exports/AppRegistry/PortalContainer.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright (c) Ondrej Zaruba.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import StyleResolver from '../StyleSheet/StyleResolver';
-import RootContext from './RootContext';
-
-type Props = {
-  rootTag: HTMLElement,
-  children?: React.Children
-};
-
-// maybe use https://styled-components.com/docs/api#stylesheetmanager
-
-export function PortalContainer(props: Props): React.Node {
-  const styleResolver = React.useRef(props.styleResolver ?? new StyleResolver(props.rootTag), [
-    props.rootTag,
-    props
-  ]);
-  const rootContext = { rootTag: props.rootTag, styleResolver: styleResolver.current };
-  React.useEffect(() => {
-    return () => {
-      styleResolver.current.clear();
-    };
-  }, [styleResolver]);
-
-  return ReactDOM.createPortal(
-    <RootContext.Provider value={rootContext}>{props.children}</RootContext.Provider>,
-    props.rootTag
-  );
-}
diff --git a/packages/react-native-web/src/exports/AppRegistry/RootContext.js b/packages/react-native-web/src/exports/AppRegistry/RootContext.js
deleted file mode 100644
index bd00002411..0000000000
--- a/packages/react-native-web/src/exports/AppRegistry/RootContext.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright (c) Ondrej Zaruba.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-import StyleResolver from '../StyleSheet/StyleResolver';
-
-const RootContext = React.createContext<{ styleResoler: StyleResolver, rootTag?: Node }>(null);
-export default RootContext;
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
index 20f919caf7..e810261203 100644
--- a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
@@ -18,11 +18,29 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
 `;
 
 exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = `
-<AppContainer
-  rootTag={Object {}}
+<StyleSheetManager
+  _styleResolver={
+    StyleResolver {
+      "_sheet": Object {
+        "clear": [Function],
+        "getTextContent": [Function],
+        "insert": [Function],
+      },
+      "cache": Object {},
+      "inserted": Object {
+        "css": Object {},
+        "ltr": Object {},
+        "rtl": Object {},
+        "rtlNoSwap": Object {},
+      },
+    }
+  }
+  rootTag={<body />}
 >
-  <NoopComponent />
-</AppContainer>
+  <AppContainer>
+    <NoopComponent />
+  </AppContainer>
+</StyleSheetManager>
 `;
 
 exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = `
diff --git a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
index 15295d98bf..94ca0cd50d 100644
--- a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
+++ b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
@@ -8,17 +8,17 @@
  * @flow
  */
 
-import type { ComponentType, Node } from 'react';
+import * as React from 'react';
 
 import AppContainer from './AppContainer';
 import invariant from 'fbjs/lib/invariant';
 import render, { hydrate } from '../render';
 import StyleResolver from '../StyleSheet/StyleResolver';
-import React from 'react';
+import StyleSheetManager from '../StyleSheet/StyleSheetManager';
 
 export default function renderApplication<Props: Object>(
-  RootComponent: ComponentType<Props>,
-  WrapperComponent?: ?ComponentType<*>,
+  RootComponent: React.ComponentType<Props>,
+  WrapperComponent?: ?React.ComponentType<*>,
   callback?: () => void,
   options: {
     hydrate: boolean,
@@ -32,24 +32,28 @@ export default function renderApplication<Props: Object>(
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
   renderFn(
-    <AppContainer WrapperComponent={WrapperComponent} rootTag={rootTag}>
-      <RootComponent {...initialProps} />
-    </AppContainer>,
+    <StyleSheetManager rootTag={rootTag}>
+      <AppContainer WrapperComponent={WrapperComponent}>
+        <RootComponent {...initialProps} />
+      </AppContainer>
+    </StyleSheetManager>,
     rootTag,
     callback
   );
 }
 
 export function getApplication(
-  RootComponent: ComponentType<Object>,
+  RootComponent: React.ComponentType<Object>,
   initialProps: Object,
-  WrapperComponent?: ?ComponentType<*>
-): {| element: Node, getStyleElement: (Object) => Node |} {
+  WrapperComponent?: ?React.ComponentType<*>
+): {| element: React.Node, getStyleElement: (Object) => React.Node |} {
   const styleResolver = new StyleResolver();
   const element = (
-    <AppContainer WrapperComponent={WrapperComponent} rootTag={null} styleResolver={styleResolver}>
-      <RootComponent {...initialProps} />
-    </AppContainer>
+    <StyleSheetManager _styleResolver={styleResolver} rootTag={document.body}>
+      <AppContainer WrapperComponent={WrapperComponent}>
+        <RootComponent {...initialProps} />
+      </AppContainer>
+    </StyleSheetManager>
   );
   // Don't escape CSS text
   const getStyleElement = (props) => {
diff --git a/packages/react-native-web/src/exports/CheckBox/index.js b/packages/react-native-web/src/exports/CheckBox/index.js
index 0d195e2af5..6658c559a3 100644
--- a/packages/react-native-web/src/exports/CheckBox/index.js
+++ b/packages/react-native-web/src/exports/CheckBox/index.js
@@ -15,7 +15,7 @@ import * as React from 'react';
 import createElement from '../createElement';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
-import RootContext from '../AppRegistry/rootContext';
+import StyleSheetContext from '../StyleSheet/StyleSheetContext';
 
 type CheckBoxProps = {
   ...ViewProps,
@@ -32,7 +32,7 @@ const CheckBox: React.AbstractComponent<
 > = React.forwardRef((props, forwardedRef) => {
   const { color, disabled, onChange, onValueChange, style, value, ...other } = props;
 
-  const rootContext = React.useContext(RootContext);
+  const styleContext = React.useContext(StyleSheetContext);
 
   function handleChange(event: Object) {
     const value = event.nativeEvent.target.checked;
@@ -64,7 +64,7 @@ const CheckBox: React.AbstractComponent<
       style: [styles.nativeControl, styles.cursorInherit],
       type: 'checkbox'
     },
-    rootContext.styleResolver
+    styleContext.styleResolver
   );
 
   return (
diff --git a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
index bf1367a016..aebbf83bea 100644
--- a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
@@ -329,14 +329,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 >
   <div
     class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="filter: url(#tint-57);"
+    style="filter: url(#tint-58);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-57"
+        id="tint-58"
       >
         <feflood
           flood-color="blue"
@@ -378,7 +378,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
 >
   <div
     class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-56);"
+    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-57);"
   />
   <img
     alt=""
@@ -391,7 +391,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
   >
     <defs>
       <filter
-        id="tint-56"
+        id="tint-57"
       >
         <feflood
           flood-color="red"
diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index 4bb104f9a2..18d8c0b93d 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -20,7 +20,7 @@ import PixelRatio from '../PixelRatio';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
 import View from '../View';
-import RootContext from '../AppRegistry/RootContext';
+import StyleSheetContext from '../StyleSheet/StyleSheetContext';
 
 export type { ImageProps };
 
@@ -185,7 +185,7 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
     const hiddenImageRef = React.useRef(null);
     const filterRef = React.useRef(_filterId++);
     const requestRef = React.useRef(null);
-    const rootContext = React.useContext(RootContext);
+    const styleContext = React.useContext(StyleSheetContext);
     const shouldDisplaySource = state === LOADED || (state === LOADING && defaultSource == null);
     const [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle(
       style,
@@ -210,7 +210,7 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
             ref: hiddenImageRef,
             src: displayImageUri
           },
-          rootContext.styleResolver
+          styleContext.styleResolver
         )
       : null;
 
diff --git a/packages/react-native-web/src/exports/Modal/ModalAnimation.js b/packages/react-native-web/src/exports/Modal/ModalAnimation.js
index e79b8a9438..ef5e44c12d 100644
--- a/packages/react-native-web/src/exports/Modal/ModalAnimation.js
+++ b/packages/react-native-web/src/exports/Modal/ModalAnimation.js
@@ -11,7 +11,7 @@
 import * as React from 'react';
 import StyleSheet from '../StyleSheet';
 import createElement from '../createElement';
-import RootContext from '../AppRegistry/rootContext';
+import StyleSheetContext from '../StyleSheet/StyleSheetContext';
 
 const ANIMATION_DURATION = 300;
 
@@ -38,7 +38,7 @@ function ModalAnimation(props: ModalAnimationProps): React.Node {
 
   const [isRendering, setIsRendering] = React.useState(false);
   const wasVisible = React.useRef(false);
-  const rootContext = React.useContext(RootContext);
+  const styleContext = React.useContext(StyleSheetContext);
 
   const isAnimated = animationType && animationType !== 'none';
 
@@ -83,7 +83,7 @@ function ModalAnimation(props: ModalAnimationProps): React.Node {
           onAnimationEnd: animationEndCallback,
           children
         },
-        rootContext.styleResolver
+        styleContext.styleResolver
       )
     : null;
 }
diff --git a/packages/react-native-web/src/exports/Modal/ModalContent.js b/packages/react-native-web/src/exports/Modal/ModalContent.js
index ee11e7af8f..4044dae490 100644
--- a/packages/react-native-web/src/exports/Modal/ModalContent.js
+++ b/packages/react-native-web/src/exports/Modal/ModalContent.js
@@ -12,6 +12,7 @@ import * as React from 'react';
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import View from '../View';
 import StyleSheet from '../StyleSheet';
+import StyleSheetContext from '../StyleSheet/StyleSheetContext';
 
 export type ModalContentProps = {|
   active?: ?(boolean | (() => boolean)),
@@ -25,9 +26,11 @@ const ModalContent: React.AbstractComponent<
   React.ElementRef<typeof View>
 > = React.forwardRef((props, forwardedRef) => {
   const { active, children, onRequestClose, transparent } = props;
+  const styleContext = React.useContext(StyleSheetContext);
 
   React.useEffect(() => {
     if (canUseDOM) {
+      const document = styleContext.rootTag?.ownerDocument ?? window.document;
       const closeOnEscape = (e: KeyboardEvent) => {
         if (active && e.key === 'Escape') {
           e.stopPropagation();
@@ -39,7 +42,7 @@ const ModalContent: React.AbstractComponent<
       document.addEventListener('keyup', closeOnEscape, false);
       return () => document.removeEventListener('keyup', closeOnEscape, false);
     }
-  }, [active, onRequestClose]);
+  }, [active, onRequestClose, styleContext.rootTag]);
 
   const style = React.useMemo(() => {
     return [styles.modal, transparent ? styles.modalTransparent : styles.modalOpaque];
diff --git a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
index 04a255d03f..b8af684666 100644
--- a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
+++ b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
@@ -14,7 +14,7 @@ import View from '../View';
 import createElement from '../createElement';
 import StyleSheet from '../StyleSheet';
 import UIManager from '../UIManager';
-import RootContext from '../AppRegistry/rootContext';
+import StyleSheetContext from '../StyleSheet/StyleSheetContext';
 
 /**
  * This Component is used to "wrap" the modal we're opening
@@ -25,7 +25,7 @@ import RootContext from '../AppRegistry/rootContext';
  */
 
 const FocusBracket = () => {
-  const rootContext = React.useContext(RootContext);
+  const styleContext = React.useContext(StyleSheetContext);
   return createElement(
     'div',
     {
@@ -33,11 +33,11 @@ const FocusBracket = () => {
       tabIndex: 0,
       style: styles.focusBracket
     },
-    rootContext.styleResolver
+    styleContext.styleResolver
   );
 };
 
-function attemptFocus(element: any) {
+function attemptFocus(element: any, document: Document) {
   if (!canUseDOM) {
     return false;
   }
@@ -51,20 +51,20 @@ function attemptFocus(element: any) {
   return document.activeElement === element;
 }
 
-function focusFirstDescendant(element: any) {
+function focusFirstDescendant(element: any, document: Document) {
   for (let i = 0; i < element.childNodes.length; i++) {
     const child = element.childNodes[i];
-    if (attemptFocus(child) || focusFirstDescendant(child)) {
+    if (attemptFocus(child, document) || focusFirstDescendant(child, document)) {
       return true;
     }
   }
   return false;
 }
 
-function focusLastDescendant(element: any) {
+function focusLastDescendant(element: any, document: Document) {
   for (let i = element.childNodes.length - 1; i >= 0; i--) {
     const child = element.childNodes[i];
-    if (attemptFocus(child) || focusLastDescendant(child)) {
+    if (attemptFocus(child, document) || focusLastDescendant(child, document)) {
       return true;
     }
   }
@@ -78,6 +78,7 @@ export type ModalFocusTrapProps = {|
 
 const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps): React.Node => {
   const trapElementRef = React.useRef<?HTMLElement>();
+  const styleContext = React.useContext(StyleSheetContext);
   const focusRef = React.useRef<{ trapFocusInProgress: boolean, lastFocusedElement: ?HTMLElement }>(
     {
       trapFocusInProgress: false,
@@ -87,6 +88,7 @@ const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps): React.Node =
 
   React.useEffect(() => {
     if (canUseDOM) {
+      const document = styleContext.rootTag?.ownerDocument ?? window.document;
       const trapFocus = () => {
         // We should not trap focus if:
         // - The modal hasn't fully initialized with an HTMLElement ref
@@ -108,9 +110,9 @@ const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps): React.Node =
             // If the previously selected element is the "first" descendant
             // and we're leaving it - this means that we should be looping
             // around to the other side of the modal.
-            let hasFocused = focusFirstDescendant(trapElementRef.current);
+            let hasFocused = focusFirstDescendant(trapElementRef.current, document);
             if (focusRef.current.lastFocusedElement === document.activeElement) {
-              hasFocused = focusLastDescendant(trapElementRef.current);
+              hasFocused = focusLastDescendant(trapElementRef.current, document);
             }
             // If we couldn't focus a new element then we need to focus onto the trap target
             if (!hasFocused && trapElementRef.current != null && document.activeElement) {
@@ -129,20 +131,24 @@ const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps): React.Node =
       document.addEventListener('focus', trapFocus, true);
       return () => document.removeEventListener('focus', trapFocus, true);
     }
-  }, [active]);
+  }, [active, styleContext.rootTag]);
 
   // To be fully compliant with WCAG we need to refocus element that triggered opening modal
   // after closing it
-  React.useEffect(function () {
-    if (canUseDOM) {
-      const lastFocusedElementOutsideTrap = document.activeElement;
-      return function () {
-        if (lastFocusedElementOutsideTrap && document.contains(lastFocusedElementOutsideTrap)) {
-          UIManager.focus(lastFocusedElementOutsideTrap);
-        }
-      };
-    }
-  }, []);
+  React.useEffect(
+    function () {
+      if (canUseDOM) {
+        const document = styleContext.rootTag?.ownerDocument ?? window.document;
+        const lastFocusedElementOutsideTrap = document.activeElement;
+        return function () {
+          if (lastFocusedElementOutsideTrap && document.contains(lastFocusedElementOutsideTrap)) {
+            UIManager.focus(lastFocusedElementOutsideTrap);
+          }
+        };
+      }
+    },
+    [styleContext.rootTag]
+  );
 
   return (
     <>
diff --git a/packages/react-native-web/src/exports/Modal/ModalPortal.js b/packages/react-native-web/src/exports/Modal/ModalPortal.js
index 10fc4c2b49..7c2de7599e 100644
--- a/packages/react-native-web/src/exports/Modal/ModalPortal.js
+++ b/packages/react-native-web/src/exports/Modal/ModalPortal.js
@@ -11,6 +11,7 @@
 import * as React from 'react';
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import ReactDOM from 'react-dom';
+import StyleSheetContext from '../StyleSheet/StyleSheetContext';
 
 export type ModalPortalProps = {|
   children: any
@@ -19,8 +20,10 @@ export type ModalPortalProps = {|
 function ModalPortal(props: ModalPortalProps): React.Node {
   const { children } = props;
   const elementRef = React.useRef(null);
+  const styleContext = React.useContext(StyleSheetContext);
 
   if (canUseDOM && !elementRef.current) {
+    const document = styleContext.rootTag?.ownerDocument ?? window.document;
     const element = document.createElement('div');
 
     if (element && document.body) {
@@ -32,13 +35,14 @@ function ModalPortal(props: ModalPortalProps): React.Node {
   React.useEffect(() => {
     if (canUseDOM) {
       return () => {
+        const document = styleContext.rootTag?.ownerDocument ?? window.document;
         if (document.body && elementRef.current) {
           document.body.removeChild(elementRef.current);
           elementRef.current = null;
         }
       };
     }
-  }, []);
+  }, [styleContext.rootTag]);
 
   return elementRef.current && canUseDOM
     ? ReactDOM.createPortal(children, elementRef.current)
diff --git a/packages/react-native-web/src/exports/Picker/PickerItem.js b/packages/react-native-web/src/exports/Picker/PickerItem.js
index 0642e4dce1..020c3250f2 100644
--- a/packages/react-native-web/src/exports/Picker/PickerItem.js
+++ b/packages/react-native-web/src/exports/Picker/PickerItem.js
@@ -10,7 +10,7 @@
 
 import { useContext } from 'react';
 import type { ColorValue } from '../../types';
-import RootContext from '../AppRegistry/rootContext';
+import StyleSheetContext from '../StyleSheet/StyleSheetContext';
 
 import createElement from '../createElement';
 
@@ -24,7 +24,7 @@ type Props = {
 export default function PickerItem(props: Props) {
   const { color, label, testID, value } = props;
   const style = { color };
-  const rootContext = useContext(RootContext);
+  const styleContext = useContext(StyleSheetContext);
 
-  return createElement('option', { style, testID, value }, rootContext.styleResolver, label);
+  return createElement('option', { style, testID, value }, styleContext.styleResolver, label);
 }
diff --git a/packages/react-native-web/src/exports/Picker/index.js b/packages/react-native-web/src/exports/Picker/index.js
index 015aef7ab9..945aa7e3ff 100644
--- a/packages/react-native-web/src/exports/Picker/index.js
+++ b/packages/react-native-web/src/exports/Picker/index.js
@@ -17,7 +17,7 @@ import useMergeRefs from '../../modules/useMergeRefs';
 import usePlatformMethods from '../../modules/usePlatformMethods';
 import PickerItem from './PickerItem';
 import StyleSheet from '../StyleSheet';
-import RootContext from '../AppRegistry/rootContext';
+import StyleSheetContext from '../StyleSheet/StyleSheetContext';
 
 type PickerProps = {
   ...ViewProps,
@@ -32,52 +32,54 @@ type PickerProps = {
   prompt?: string
 };
 
-const Picker: React.AbstractComponent<PickerProps, HTMLElement & PlatformMethods> =
-  React.forwardRef((props, forwardedRef) => {
-    const {
-      children,
-      enabled,
-      onValueChange,
-      selectedValue,
-      style,
-      testID,
-      /* eslint-disable */
-      itemStyle,
-      mode,
-      prompt,
-      /* eslint-enable */
-      ...other
-    } = props;
+const Picker: React.AbstractComponent<
+  PickerProps,
+  HTMLElement & PlatformMethods
+> = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    enabled,
+    onValueChange,
+    selectedValue,
+    style,
+    testID,
+    /* eslint-disable */
+    itemStyle,
+    mode,
+    prompt,
+    /* eslint-enable */
+    ...other
+  } = props;
 
-    const hostRef = React.useRef(null);
-    const rootContext = React.useContext(RootContext);
+  const hostRef = React.useRef(null);
+  const styleContext = React.useContext(StyleSheetContext);
 
-    function handleChange(e: Object) {
-      const { selectedIndex, value } = e.target;
-      if (onValueChange) {
-        onValueChange(value, selectedIndex);
-      }
+  function handleChange(e: Object) {
+    const { selectedIndex, value } = e.target;
+    if (onValueChange) {
+      onValueChange(value, selectedIndex);
     }
+  }
 
-    // $FlowFixMe
-    const supportedProps: any = {
-      children,
-      disabled: enabled === false ? true : undefined,
-      onChange: handleChange,
-      style: [styles.initial, style],
-      testID,
-      value: selectedValue,
-      ...other
-    };
+  // $FlowFixMe
+  const supportedProps: any = {
+    children,
+    disabled: enabled === false ? true : undefined,
+    onChange: handleChange,
+    style: [styles.initial, style],
+    testID,
+    value: selectedValue,
+    ...other
+  };
 
-    const platformMethodsRef = usePlatformMethods(supportedProps);
+  const platformMethodsRef = usePlatformMethods(supportedProps);
 
-    const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+  const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
 
-    supportedProps.ref = setRef;
+  supportedProps.ref = setRef;
 
-    return createElement('select', supportedProps, rootContext.styleResolver);
-  });
+  return createElement('select', supportedProps, styleContext.styleResolver);
+});
 
 // $FlowFixMe
 Picker.Item = PickerItem;
diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleResolver.js b/packages/react-native-web/src/exports/StyleSheet/StyleResolver.js
index 005a37ceb2..22ebaf2afc 100644
--- a/packages/react-native-web/src/exports/StyleSheet/StyleResolver.js
+++ b/packages/react-native-web/src/exports/StyleSheet/StyleResolver.js
@@ -38,7 +38,7 @@ export default class StyleResolver {
     this._sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(STYLE_ELEMENT_ID, rootTag));
     this.cache = {};
 
-    modality((rule) => this.sheet.insert(rule, STYLE_GROUPS.modality));
+    modality((rule) => this.sheet.insert(rule, STYLE_GROUPS.modality), rootTag?.ownerDocument);
     initialRules.forEach((rule) => {
       this.sheet.insert(rule, STYLE_GROUPS.reset);
     });
diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheetContext.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheetContext.js
new file mode 100644
index 0000000000..b7e974f85b
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/StyleSheetContext.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Ondrej Zaruba.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import ResponderSystem from '../../modules/useResponderEvents/ResponderSystem';
+import StyleResolver from './StyleResolver';
+
+const StyleSheetContext = React.createContext<{
+  styleResoler: StyleResolver,
+  responderSystem: ResponderSystem,
+  rootTag?: Node
+}>(null);
+export default StyleSheetContext;
diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
new file mode 100644
index 0000000000..0461ce9276
--- /dev/null
+++ b/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Ondrej Zaruba.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import StyleContext from './StyleSheetContext';
+import StyleResolver from './StyleResolver';
+import ResponderSystem from '../../modules/useResponderEvents/ResponderSystem';
+
+type Props = {
+  rootTag?: HTMLElement,
+  children?: React.Children,
+  _styleResolver?: StyleResolver,
+  _responderSystem?: ResponderSystem
+};
+
+export default function StyleSheetManager(props: Props): React.Node {
+  const styleResolver = React.useRef<StyleResolver>();
+  if (!styleResolver.current) {
+    styleResolver.current = props._styleResolver ?? new StyleResolver(props.rootTag);
+  }
+
+  React.useEffect(() => {
+    return () => {
+      styleResolver.current.clear();
+      responderSystem.current.terminateResponder();
+    };
+  }, []);
+
+  const responderSystem = React.useRef<ResponderSystem>();
+  if (!responderSystem.current) {
+    responderSystem.current =
+      props._responderSystem ?? new ResponderSystem(props.rootTag?.ownerDocument?.defaultView);
+  }
+
+  const styleContext = {
+    rootTag: props.rootTag,
+    styleResolver: styleResolver.current,
+    responderSystem: responderSystem.current
+  };
+
+  return <StyleContext.Provider value={styleContext}>{props.children}</StyleContext.Provider>;
+}
diff --git a/packages/react-native-web/src/exports/StyleSheet/modality.js b/packages/react-native-web/src/exports/StyleSheet/modality.js
index eb9b2040dd..20ff15ccca 100644
--- a/packages/react-native-web/src/exports/StyleSheet/modality.js
+++ b/packages/react-native-web/src/exports/StyleSheet/modality.js
@@ -24,13 +24,15 @@ const focusVisibleAttributeName = 'data-focusvisible-polyfill';
 
 const rule = `:focus:not([${focusVisibleAttributeName}]){outline: none;}`;
 
-const modality = (insertRule) => {
+const modality = (insertRule, doc: ?Document) => {
   insertRule(rule);
 
   if (!canUseDOM) {
     return;
   }
 
+  const document = doc ?? window.document;
+
   let hadKeyboardEvent = true;
   let hadFocusVisibleRecently = false;
   let hadFocusVisibleRecentlyTimeout = null;
diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js
index 99c1c63add..6a9410fcb8 100644
--- a/packages/react-native-web/src/exports/Switch/index.js
+++ b/packages/react-native-web/src/exports/Switch/index.js
@@ -15,7 +15,7 @@ import createElement from '../createElement';
 import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
-import RootContext from '../AppRegistry/rootContext';
+import StyleSheetContext from '../StyleSheet/StyleSheetContext';
 
 type SwitchProps = {
   ...ViewProps,
@@ -50,7 +50,7 @@ const Switch: React.AbstractComponent<
   } = props;
 
   const thumbRef = React.useRef(null);
-  const rootContext = React.useContext(RootContext);
+  const styleContext = React.useContext(StyleSheetContext);
 
   function handleChange(event: Object) {
     if (onValueChange != null) {
@@ -125,7 +125,7 @@ const Switch: React.AbstractComponent<
       type: 'checkbox',
       role: 'switch'
     },
-    rootContext.styleResolver
+    styleContext.styleResolver
   );
 
   return (
diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
index 13d92f5021..e50ac60f23 100644
--- a/packages/react-native-web/src/exports/Text/index.js
+++ b/packages/react-native-web/src/exports/Text/index.js
@@ -22,7 +22,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from './TextAncestorContext';
-import RootContext from '../AppRegistry/RootContext';
+import StyleSheetContext from '../../exports/StyleSheet/StyleSheetContext';
 
 const forwardPropsList = {
   ...forwardedProps.defaultProps,
@@ -70,7 +70,7 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
 
     const hasTextAncestor = React.useContext(TextAncestorContext);
     const hostRef = React.useRef(null);
-    const rootContext = React.useContext(RootContext);
+    const styleContext = React.useContext(StyleSheetContext);
 
     const classList = [
       classes.text,
@@ -152,7 +152,7 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
 
     supportedProps.ref = setRef;
 
-    const element = createElement(component, supportedProps, rootContext.styleResolver);
+    const element = createElement(component, supportedProps, styleContext.styleResolver);
 
     return hasTextAncestor ? (
       element
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index 58951d4121..4f13dec16b 100644
--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/packages/react-native-web/src/exports/TextInput/index.js
@@ -23,7 +23,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextInputState from '../../modules/TextInputState';
-import RootContext from '../AppRegistry/rootContext';
+import StyleSheetContext from '../StyleSheet/StyleSheetContext';
 
 /**
  * Determines whether a 'selection' prop differs from a node's existing
@@ -84,284 +84,286 @@ function isEventComposing(nativeEvent) {
   return nativeEvent.isComposing || nativeEvent.keyCode === 229;
 }
 
-const TextInput: React.AbstractComponent<TextInputProps, HTMLElement & PlatformMethods> =
-  React.forwardRef((props, forwardedRef) => {
-    const {
-      autoCapitalize = 'sentences',
-      autoComplete,
-      autoCompleteType,
-      autoCorrect = true,
-      blurOnSubmit,
-      clearTextOnFocus,
-      dir,
-      editable = true,
-      keyboardType = 'default',
-      multiline = false,
-      numberOfLines = 1,
-      onBlur,
-      onChange,
-      onChangeText,
-      onContentSizeChange,
-      onFocus,
-      onKeyPress,
-      onLayout,
-      onMoveShouldSetResponder,
-      onMoveShouldSetResponderCapture,
-      onResponderEnd,
-      onResponderGrant,
-      onResponderMove,
-      onResponderReject,
-      onResponderRelease,
-      onResponderStart,
-      onResponderTerminate,
-      onResponderTerminationRequest,
-      onScrollShouldSetResponder,
-      onScrollShouldSetResponderCapture,
-      onSelectionChange,
-      onSelectionChangeShouldSetResponder,
-      onSelectionChangeShouldSetResponderCapture,
-      onStartShouldSetResponder,
-      onStartShouldSetResponderCapture,
-      onSubmitEditing,
-      placeholderTextColor,
-      returnKeyType,
-      secureTextEntry = false,
-      selection,
-      selectTextOnFocus,
-      spellCheck
-    } = props;
-
-    let type;
-    let inputMode;
-
-    switch (keyboardType) {
-      case 'email-address':
-        type = 'email';
-        break;
-      case 'number-pad':
-      case 'numeric':
-        inputMode = 'numeric';
-        break;
-      case 'decimal-pad':
-        inputMode = 'decimal';
-        break;
-      case 'phone-pad':
-        type = 'tel';
-        break;
-      case 'search':
-      case 'web-search':
-        type = 'search';
-        break;
-      case 'url':
-        type = 'url';
-        break;
-      default:
-        type = 'text';
-    }
+const TextInput: React.AbstractComponent<
+  TextInputProps,
+  HTMLElement & PlatformMethods
+> = React.forwardRef((props, forwardedRef) => {
+  const {
+    autoCapitalize = 'sentences',
+    autoComplete,
+    autoCompleteType,
+    autoCorrect = true,
+    blurOnSubmit,
+    clearTextOnFocus,
+    dir,
+    editable = true,
+    keyboardType = 'default',
+    multiline = false,
+    numberOfLines = 1,
+    onBlur,
+    onChange,
+    onChangeText,
+    onContentSizeChange,
+    onFocus,
+    onKeyPress,
+    onLayout,
+    onMoveShouldSetResponder,
+    onMoveShouldSetResponderCapture,
+    onResponderEnd,
+    onResponderGrant,
+    onResponderMove,
+    onResponderReject,
+    onResponderRelease,
+    onResponderStart,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onScrollShouldSetResponder,
+    onScrollShouldSetResponderCapture,
+    onSelectionChange,
+    onSelectionChangeShouldSetResponder,
+    onSelectionChangeShouldSetResponderCapture,
+    onStartShouldSetResponder,
+    onStartShouldSetResponderCapture,
+    onSubmitEditing,
+    placeholderTextColor,
+    returnKeyType,
+    secureTextEntry = false,
+    selection,
+    selectTextOnFocus,
+    spellCheck
+  } = props;
+
+  let type;
+  let inputMode;
+
+  switch (keyboardType) {
+    case 'email-address':
+      type = 'email';
+      break;
+    case 'number-pad':
+    case 'numeric':
+      inputMode = 'numeric';
+      break;
+    case 'decimal-pad':
+      inputMode = 'decimal';
+      break;
+    case 'phone-pad':
+      type = 'tel';
+      break;
+    case 'search':
+    case 'web-search':
+      type = 'search';
+      break;
+    case 'url':
+      type = 'url';
+      break;
+    default:
+      type = 'text';
+  }
 
-    if (secureTextEntry) {
-      type = 'password';
-    }
+  if (secureTextEntry) {
+    type = 'password';
+  }
 
-    const dimensions = React.useRef({ height: null, width: null });
-    const hostRef = React.useRef(null);
-    const rootContext = React.useContext(RootContext);
-
-    const handleContentSizeChange = React.useCallback(
-      (hostNode) => {
-        if (multiline && onContentSizeChange && hostNode != null) {
-          const newHeight = hostNode.scrollHeight;
-          const newWidth = hostNode.scrollWidth;
-          if (newHeight !== dimensions.current.height || newWidth !== dimensions.current.width) {
-            dimensions.current.height = newHeight;
-            dimensions.current.width = newWidth;
-            onContentSizeChange({
-              nativeEvent: {
-                contentSize: {
-                  height: dimensions.current.height,
-                  width: dimensions.current.width
-                }
+  const dimensions = React.useRef({ height: null, width: null });
+  const hostRef = React.useRef(null);
+  const styleContext = React.useContext(StyleSheetContext);
+
+  const handleContentSizeChange = React.useCallback(
+    (hostNode) => {
+      if (multiline && onContentSizeChange && hostNode != null) {
+        const newHeight = hostNode.scrollHeight;
+        const newWidth = hostNode.scrollWidth;
+        if (newHeight !== dimensions.current.height || newWidth !== dimensions.current.width) {
+          dimensions.current.height = newHeight;
+          dimensions.current.width = newWidth;
+          onContentSizeChange({
+            nativeEvent: {
+              contentSize: {
+                height: dimensions.current.height,
+                width: dimensions.current.width
               }
-            });
-          }
-        }
-      },
-      [multiline, onContentSizeChange]
-    );
-
-    const imperativeRef = React.useMemo(
-      () => (hostNode) => {
-        // TextInput needs to add more methods to the hostNode in addition to those
-        // added by `usePlatformMethods`. This is temporarily until an API like
-        // `TextInput.clear(hostRef)` is added to React Native.
-        if (hostNode != null) {
-          hostNode.clear = function () {
-            if (hostNode != null) {
-              hostNode.value = '';
             }
-          };
-          hostNode.isFocused = function () {
-            return hostNode != null && TextInputState.currentlyFocusedField() === hostNode;
-          };
-          handleContentSizeChange(hostNode);
+          });
         }
-      },
-      [handleContentSizeChange]
-    );
-
-    function handleBlur(e) {
-      TextInputState._currentlyFocusedNode = null;
-      if (onBlur) {
-        e.nativeEvent.text = e.target.value;
-        onBlur(e);
       }
+    },
+    [multiline, onContentSizeChange]
+  );
+
+  const imperativeRef = React.useMemo(
+    () => (hostNode) => {
+      // TextInput needs to add more methods to the hostNode in addition to those
+      // added by `usePlatformMethods`. This is temporarily until an API like
+      // `TextInput.clear(hostRef)` is added to React Native.
+      if (hostNode != null) {
+        hostNode.clear = function () {
+          if (hostNode != null) {
+            hostNode.value = '';
+          }
+        };
+        hostNode.isFocused = function () {
+          return hostNode != null && TextInputState.currentlyFocusedField() === hostNode;
+        };
+        handleContentSizeChange(hostNode);
+      }
+    },
+    [handleContentSizeChange]
+  );
+
+  function handleBlur(e) {
+    TextInputState._currentlyFocusedNode = null;
+    if (onBlur) {
+      e.nativeEvent.text = e.target.value;
+      onBlur(e);
     }
+  }
 
-    function handleChange(e) {
-      const hostNode = e.target;
-      const text = hostNode.value;
-      e.nativeEvent.text = text;
-      handleContentSizeChange(hostNode);
-      if (onChange) {
-        onChange(e);
-      }
-      if (onChangeText) {
-        onChangeText(text);
-      }
+  function handleChange(e) {
+    const hostNode = e.target;
+    const text = hostNode.value;
+    e.nativeEvent.text = text;
+    handleContentSizeChange(hostNode);
+    if (onChange) {
+      onChange(e);
     }
+    if (onChangeText) {
+      onChangeText(text);
+    }
+  }
 
-    function handleFocus(e) {
-      const hostNode = e.target;
-      if (onFocus) {
-        e.nativeEvent.text = hostNode.value;
-        onFocus(e);
+  function handleFocus(e) {
+    const hostNode = e.target;
+    if (onFocus) {
+      e.nativeEvent.text = hostNode.value;
+      onFocus(e);
+    }
+    if (hostNode != null) {
+      TextInputState._currentlyFocusedNode = hostNode;
+      if (clearTextOnFocus) {
+        hostNode.value = '';
       }
-      if (hostNode != null) {
-        TextInputState._currentlyFocusedNode = hostNode;
-        if (clearTextOnFocus) {
-          hostNode.value = '';
-        }
-        if (selectTextOnFocus) {
-          // Safari requires selection to occur in a setTimeout
-          setTimeout(() => {
-            hostNode.select();
-          }, 0);
-        }
+      if (selectTextOnFocus) {
+        // Safari requires selection to occur in a setTimeout
+        setTimeout(() => {
+          hostNode.select();
+        }, 0);
       }
     }
+  }
 
-    function handleKeyDown(e) {
-      const hostNode = e.target;
-      // Prevent key events bubbling (see #612)
-      e.stopPropagation();
+  function handleKeyDown(e) {
+    const hostNode = e.target;
+    // Prevent key events bubbling (see #612)
+    e.stopPropagation();
 
-      const blurOnSubmitDefault = !multiline;
-      const shouldBlurOnSubmit = blurOnSubmit == null ? blurOnSubmitDefault : blurOnSubmit;
+    const blurOnSubmitDefault = !multiline;
+    const shouldBlurOnSubmit = blurOnSubmit == null ? blurOnSubmitDefault : blurOnSubmit;
 
-      const nativeEvent = e.nativeEvent;
-      const isComposing = isEventComposing(nativeEvent);
+    const nativeEvent = e.nativeEvent;
+    const isComposing = isEventComposing(nativeEvent);
 
-      if (onKeyPress) {
-        onKeyPress(e);
-      }
+    if (onKeyPress) {
+      onKeyPress(e);
+    }
 
-      if (
-        e.key === 'Enter' &&
-        !e.shiftKey &&
-        // Do not call submit if composition is occuring.
-        !isComposing &&
-        !e.isDefaultPrevented()
-      ) {
-        if ((blurOnSubmit || !multiline) && onSubmitEditing) {
-          // prevent "Enter" from inserting a newline or submitting a form
-          e.preventDefault();
-          nativeEvent.text = e.target.value;
-          onSubmitEditing(e);
-        }
-        if (shouldBlurOnSubmit && hostNode != null) {
-          hostNode.blur();
-        }
+    if (
+      e.key === 'Enter' &&
+      !e.shiftKey &&
+      // Do not call submit if composition is occuring.
+      !isComposing &&
+      !e.isDefaultPrevented()
+    ) {
+      if ((blurOnSubmit || !multiline) && onSubmitEditing) {
+        // prevent "Enter" from inserting a newline or submitting a form
+        e.preventDefault();
+        nativeEvent.text = e.target.value;
+        onSubmitEditing(e);
+      }
+      if (shouldBlurOnSubmit && hostNode != null) {
+        hostNode.blur();
       }
     }
+  }
 
-    function handleSelectionChange(e) {
-      if (onSelectionChange) {
-        try {
-          const node = e.target;
-          const { selectionStart, selectionEnd } = node;
-          e.nativeEvent.selection = {
-            start: selectionStart,
-            end: selectionEnd
-          };
-          e.nativeEvent.text = e.target.value;
-          onSelectionChange(e);
-        } catch (e) {}
-      }
+  function handleSelectionChange(e) {
+    if (onSelectionChange) {
+      try {
+        const node = e.target;
+        const { selectionStart, selectionEnd } = node;
+        e.nativeEvent.selection = {
+          start: selectionStart,
+          end: selectionEnd
+        };
+        e.nativeEvent.text = e.target.value;
+        onSelectionChange(e);
+      } catch (e) {}
     }
+  }
 
-    useLayoutEffect(() => {
-      const node = hostRef.current;
-      if (node != null && selection != null) {
-        setSelection(node, selection);
-      }
-      if (document.activeElement === node) {
-        TextInputState._currentlyFocusedNode = node;
-      }
-    }, [hostRef, selection]);
-
-    const component = multiline ? 'textarea' : 'input';
-    const classList = [classes.textinput];
-    const style = StyleSheet.compose(props.style, placeholderTextColor && { placeholderTextColor });
-
-    useElementLayout(hostRef, onLayout);
-    useResponderEvents(hostRef, {
-      onMoveShouldSetResponder,
-      onMoveShouldSetResponderCapture,
-      onResponderEnd,
-      onResponderGrant,
-      onResponderMove,
-      onResponderReject,
-      onResponderRelease,
-      onResponderStart,
-      onResponderTerminate,
-      onResponderTerminationRequest,
-      onScrollShouldSetResponder,
-      onScrollShouldSetResponderCapture,
-      onSelectionChangeShouldSetResponder,
-      onSelectionChangeShouldSetResponderCapture,
-      onStartShouldSetResponder,
-      onStartShouldSetResponderCapture
-    });
-
-    const supportedProps = pickProps(props);
-    supportedProps.autoCapitalize = autoCapitalize;
-    supportedProps.autoComplete = autoComplete || autoCompleteType || 'on';
-    supportedProps.autoCorrect = autoCorrect ? 'on' : 'off';
-    supportedProps.classList = classList;
-    // 'auto' by default allows browsers to infer writing direction
-    supportedProps.dir = dir !== undefined ? dir : 'auto';
-    supportedProps.enterKeyHint = returnKeyType;
-    supportedProps.onBlur = handleBlur;
-    supportedProps.onChange = handleChange;
-    supportedProps.onFocus = handleFocus;
-    supportedProps.onKeyDown = handleKeyDown;
-    supportedProps.onSelect = handleSelectionChange;
-    supportedProps.readOnly = !editable;
-    supportedProps.rows = multiline ? numberOfLines : undefined;
-    supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect;
-    supportedProps.style = style;
-    supportedProps.type = multiline ? undefined : type;
-    supportedProps.inputMode = inputMode;
-
-    const platformMethodsRef = usePlatformMethods(supportedProps);
-
-    const setRef = useMergeRefs(hostRef, platformMethodsRef, imperativeRef, forwardedRef);
-
-    supportedProps.ref = setRef;
-
-    return createElement(component, supportedProps, rootContext.styleResolver);
+  useLayoutEffect(() => {
+    const node = hostRef.current;
+    if (node != null && selection != null) {
+      setSelection(node, selection);
+    }
+    if (document.activeElement === node) {
+      TextInputState._currentlyFocusedNode = node;
+    }
+  }, [hostRef, selection]);
+
+  const component = multiline ? 'textarea' : 'input';
+  const classList = [classes.textinput];
+  const style = StyleSheet.compose(props.style, placeholderTextColor && { placeholderTextColor });
+
+  useElementLayout(hostRef, onLayout);
+  useResponderEvents(hostRef, {
+    onMoveShouldSetResponder,
+    onMoveShouldSetResponderCapture,
+    onResponderEnd,
+    onResponderGrant,
+    onResponderMove,
+    onResponderReject,
+    onResponderRelease,
+    onResponderStart,
+    onResponderTerminate,
+    onResponderTerminationRequest,
+    onScrollShouldSetResponder,
+    onScrollShouldSetResponderCapture,
+    onSelectionChangeShouldSetResponder,
+    onSelectionChangeShouldSetResponderCapture,
+    onStartShouldSetResponder,
+    onStartShouldSetResponderCapture
   });
 
+  const supportedProps = pickProps(props);
+  supportedProps.autoCapitalize = autoCapitalize;
+  supportedProps.autoComplete = autoComplete || autoCompleteType || 'on';
+  supportedProps.autoCorrect = autoCorrect ? 'on' : 'off';
+  supportedProps.classList = classList;
+  // 'auto' by default allows browsers to infer writing direction
+  supportedProps.dir = dir !== undefined ? dir : 'auto';
+  supportedProps.enterKeyHint = returnKeyType;
+  supportedProps.onBlur = handleBlur;
+  supportedProps.onChange = handleChange;
+  supportedProps.onFocus = handleFocus;
+  supportedProps.onKeyDown = handleKeyDown;
+  supportedProps.onSelect = handleSelectionChange;
+  supportedProps.readOnly = !editable;
+  supportedProps.rows = multiline ? numberOfLines : undefined;
+  supportedProps.spellCheck = spellCheck != null ? spellCheck : autoCorrect;
+  supportedProps.style = style;
+  supportedProps.type = multiline ? undefined : type;
+  supportedProps.inputMode = inputMode;
+
+  const platformMethodsRef = usePlatformMethods(supportedProps);
+
+  const setRef = useMergeRefs(hostRef, platformMethodsRef, imperativeRef, forwardedRef);
+
+  supportedProps.ref = setRef;
+
+  return createElement(component, supportedProps, styleContext.styleResolver);
+});
+
 TextInput.displayName = 'TextInput';
 // $FlowFixMe
 TextInput.State = TextInputState;
diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js
index 47e58388ba..a4447ad879 100644
--- a/packages/react-native-web/src/exports/View/index.js
+++ b/packages/react-native-web/src/exports/View/index.js
@@ -22,7 +22,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
-import RootContext from '../AppRegistry/RootContext';
+import StyleSheetContext from '../StyleSheet/StyleSheetContext';
 
 const forwardPropsList = {
   ...forwardedProps.defaultProps,
@@ -76,7 +76,7 @@ const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods> =
     }
 
     const hasTextAncestor = React.useContext(TextAncestorContext);
-    const rootContext = React.useContext(RootContext);
+    const styleContext = React.useContext(StyleSheetContext);
     const hostRef = React.useRef(null);
 
     useElementLayout(hostRef, onLayout);
@@ -126,7 +126,7 @@ const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods> =
 
     supportedProps.ref = setRef;
 
-    return createElement(component, supportedProps, rootContext.styleResolver);
+    return createElement(component, supportedProps, styleContext.styleResolver);
   }
 );
 
diff --git a/packages/react-native-web/src/modules/usePlatformMethods/index.js b/packages/react-native-web/src/modules/usePlatformMethods/index.js
index e0569f6271..e3880e1627 100644
--- a/packages/react-native-web/src/modules/usePlatformMethods/index.js
+++ b/packages/react-native-web/src/modules/usePlatformMethods/index.js
@@ -14,7 +14,7 @@ import UIManager from '../../exports/UIManager';
 import createDOMProps from '../createDOMProps';
 import useStable from '../useStable';
 import { useContext, useRef } from 'react';
-import RootContext from '../../exports/AppRegistry/RootContext';
+import StyleSheetContext from '../../exports/StyleSheet/StyleSheetContext';
 
 const emptyObject = {};
 
@@ -69,7 +69,7 @@ export default function usePlatformMethods({
 }): (hostNode: any) => void {
   const previousStyleRef = useRef(null);
   const setNativePropsArgsRef = useRef(null);
-  const rootContext = useContext(RootContext);
+  const styleContext = useContext(StyleSheetContext);
   setNativePropsArgsRef.current = { classList, pointerEvents, style };
 
   // Avoid creating a new ref on every render. The props only need to be
@@ -84,7 +84,7 @@ export default function usePlatformMethods({
         const { classList, style, pointerEvents } = setNativePropsArgsRef.current || emptyObject;
         setNativeProps(
           hostNode,
-          rootContext.styleResolver,
+          styleContext.styleResolver,
           nativeProps,
           classList,
           pointerEvents,
diff --git a/packages/react-native-web/src/modules/usePressEvents/PressResponder.js b/packages/react-native-web/src/modules/usePressEvents/PressResponder.js
index 1de4323bd5..e3898db464 100644
--- a/packages/react-native-web/src/modules/usePressEvents/PressResponder.js
+++ b/packages/react-native-web/src/modules/usePressEvents/PressResponder.js
@@ -10,6 +10,8 @@
 
 'use strict';
 
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+
 type ClickEvent = any;
 type KeyboardEvent = any;
 type ResponderEvent = any;
@@ -205,7 +207,7 @@ const DEFAULT_PRESS_DELAY_MS = 50;
  *     ▼
  * ┌─────────────────────┐          ┌───────────────────┐              ┌───────────────────┐
  * │ RESPONDER_INACTIVE_ │  DELAY   │ RESPONDER_ACTIVE_ │  T + DELAY   │ RESPONDER_ACTIVE_ │
- * │ PRESS_START         ├────────▶ │ PRESS_START       ├────────────▶ │ LONG_PRESS_START  │
+ * │ PRESS_START         ├────────▶│ PRESS_START       ├────────────▶│ LONG_PRESS_START  │
  * └─────────────────────┘          └───────────────────┘              └───────────────────┘
  *
  * T + DELAY => LONG_PRESS_DELAY + DELAY
@@ -228,13 +230,17 @@ export default class PressResponder {
     pageY: number
   |}>;
   _touchState: TouchState = NOT_RESPONDER;
+  _document: ?Document;
 
-  constructor(config: PressResponderConfig) {
-    this.configure(config);
+  constructor(config: PressResponderConfig, doc?: Document) {
+    this.configure(config, doc);
   }
 
-  configure(config: PressResponderConfig): void {
+  configure(config: PressResponderConfig, doc?: Document): void {
     this._config = config;
+    if (canUseDOM) {
+      this._document = doc ?? document;
+    }
   }
 
   /**
@@ -303,7 +309,7 @@ export default class PressResponder {
 
       if (this._touchState !== NOT_RESPONDER && isValidKeyPress(event)) {
         end(event);
-        document.removeEventListener('keyup', keyupHandler);
+        this._document.removeEventListener('keyup', keyupHandler);
 
         const role = target.getAttribute('role');
         const elementType = target.tagName.toLowerCase();
@@ -342,7 +348,7 @@ export default class PressResponder {
             start(event, false);
             // Listen to 'keyup' on document to account for situations where
             // focus is moved to another element during 'keydown'.
-            document.addEventListener('keyup', keyupHandler);
+            this._document.addEventListener('keyup', keyupHandler);
           }
           const role = target.getAttribute('role');
           const isSpacebarKey = key === ' ' || key === 'Spacebar';
diff --git a/packages/react-native-web/src/modules/usePressEvents/index.js b/packages/react-native-web/src/modules/usePressEvents/index.js
index 6555be62fc..b1a0661247 100644
--- a/packages/react-native-web/src/modules/usePressEvents/index.js
+++ b/packages/react-native-web/src/modules/usePressEvents/index.js
@@ -11,21 +11,23 @@
 'use strict';
 
 import type { EventHandlers, PressResponderConfig } from './PressResponder';
+import StyleSheetContext from '../../exports/StyleSheet/StyleSheetContext';
 
 import PressResponder from './PressResponder';
-import { useDebugValue, useEffect, useRef } from 'react';
+import { useContext, useDebugValue, useEffect, useRef } from 'react';
 
 export default function usePressEvents(hostRef: any, config: PressResponderConfig): EventHandlers {
   const pressResponderRef = useRef<?PressResponder>(null);
+  const styleContext = useContext(StyleSheetContext);
   if (pressResponderRef.current == null) {
-    pressResponderRef.current = new PressResponder(config);
+    pressResponderRef.current = new PressResponder(config, styleContext.rootTag?.ownerDocument);
   }
   const pressResponder = pressResponderRef.current;
 
   // Re-configure to use the current node and configuration.
   useEffect(() => {
-    pressResponder.configure(config);
-  }, [config, pressResponder]);
+    pressResponder.configure(config, styleContext.rootTag?.ownerDocument);
+  }, [config, pressResponder, styleContext.rootTag]);
 
   // Reset the `pressResponder` when cleanup needs to occur. This is
   // a separate effect because we do not want to rest the responder when `config` changes.
diff --git a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js
index b9aaad7036..bdfff5f00c 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js
@@ -10,7 +10,7 @@
 /**
  * RESPONDER EVENT SYSTEM
  *
- * A single, global "interaction lock" on views. For a view to be the "responder" means
+ * A single, global window "interaction lock" on views. For a view to be the "responder" means
  * that pointer interactions are exclusive to that view and none other. The "interaction
  * lock" can be transferred (only) to ancestors of the current "responder" as long as
  * pointers continue to be active.
@@ -222,444 +222,458 @@ const shouldSetResponderEvents = {
   scroll: scrollRegistration
 };
 
-const emptyResponder = { id: null, idPath: null, node: null };
-const responderListenersMap = new Map();
+const emptyResponder: ResponderInstance = { id: null, idPath: null, node: null };
 
-let isEmulatingMouseEvents = false;
-let trackedTouchCount = 0;
-let currentResponder: ResponderInstance = {
-  id: null,
-  node: null,
-  idPath: null
-};
-
-function changeCurrentResponder(responder: ResponderInstance) {
-  currentResponder = responder;
-}
-
-function getResponderConfig(id: ResponderId): ResponderConfig | Object {
-  const config = responderListenersMap.get(id);
-  return config != null ? config : emptyObject;
-}
+/* ------------ PUBLIC API ------------ */
 
 /**
- * Process native events
+ * Attach Listeners
  *
- * A single event listener is used to manage the responder system.
- * All pointers are tracked in the ResponderTouchHistoryStore. Native events
- * are interpreted in terms of the Responder System and checked to see if
- * the responder should be transferred. Each host node that is attached to
- * the Responder System has an ID, which is used to look up its associated
- * callbacks.
+ * Use native events as ReactDOM doesn't have a non-plugin API to implement
+ * this system.
  */
-function eventListener(domEvent: any) {
-  const eventType = domEvent.type;
-  const eventTarget = domEvent.target;
-
-  /**
-   * Manage emulated events and early bailout.
-   * Since PointerEvent is not used yet (lack of support in older Safari), it's
-   * necessary to manually manage the mess of browser touch/mouse events.
-   * And bailout early for termination events when there is no active responder.
-   */
+const documentEventsCapturePhase = ['blur', 'scroll'];
+const documentEventsBubblePhase = [
+  // mouse
+  'mousedown',
+  'mousemove',
+  'mouseup',
+  'dragstart',
+  // touch
+  'touchstart',
+  'touchmove',
+  'touchend',
+  'touchcancel',
+  // other
+  'contextmenu',
+  'select',
+  'selectionchange'
+];
 
-  // Flag when browser may produce emulated events
-  if (eventType === 'touchstart') {
-    isEmulatingMouseEvents = true;
-  }
-  // Remove flag when browser will not produce emulated events
-  if (eventType === 'touchmove' || trackedTouchCount > 1) {
-    isEmulatingMouseEvents = false;
-  }
-  // Ignore various events in particular circumstances
-  if (
-    // Ignore browser emulated mouse events
-    (eventType === 'mousedown' && isEmulatingMouseEvents) ||
-    (eventType === 'mousemove' && isEmulatingMouseEvents) ||
-    // Ignore mousemove if a mousedown didn't occur first
-    (eventType === 'mousemove' && trackedTouchCount < 1)
-  ) {
-    return;
-  }
-  // Remove flag after emulated events are finished
-  if (isEmulatingMouseEvents && eventType === 'mouseup') {
-    if (trackedTouchCount === 0) {
-      isEmulatingMouseEvents = false;
+export default class ResponderSystem {
+  _window: Window;
+  _responderListenersMap = new Map();
+  _isEmulatingMouseEvents = false;
+  _trackedTouchCount = 0;
+  _currentResponder: ResponderInstance = {
+    id: null,
+    node: null,
+    idPath: null
+  };
+  _responderTouchHistoryStore = new ResponderTouchHistoryStore();
+
+  constructor(win?: Window) {
+    if (canUseDOM) {
+      this._window = win ?? window;
     }
-    return;
   }
 
-  const isStartEvent = isStartish(eventType) && isPrimaryPointerDown(domEvent);
-  const isMoveEvent = isMoveish(eventType);
-  const isEndEvent = isEndish(eventType);
-  const isScrollEvent = isScroll(eventType);
-  const isSelectionChangeEvent = isSelectionChange(eventType);
-  const responderEvent = createResponderEvent(domEvent);
+  attachListeners() {
+    if (canUseDOM && this._window.__reactResponderSystemActive == null) {
+      this._window.addEventListener('blur', this._eventListener);
+      documentEventsBubblePhase.forEach((eventType) => {
+        this._window.document.addEventListener(eventType, this._eventListener);
+      });
+      documentEventsCapturePhase.forEach((eventType) => {
+        this._window.document.addEventListener(eventType, this._eventListener, true);
+      });
+      this._window.__reactResponderSystemActive = true;
+    }
+  }
 
   /**
-   * Record the state of active pointers
+   * Register a node with the ResponderSystem.
    */
+  addNode(id: ResponderId, node: any, config: ResponderConfig) {
+    setResponderId(node, id);
+    this._responderListenersMap.set(id, config);
+  }
 
-  if (isStartEvent || isMoveEvent || isEndEvent) {
-    if (domEvent.touches) {
-      trackedTouchCount = domEvent.touches.length;
-    } else {
-      if (isStartEvent) {
-        trackedTouchCount = 1;
-      } else if (isEndEvent) {
-        trackedTouchCount = 0;
-      }
+  /**
+   * Unregister a node with the ResponderSystem.
+   */
+  removeNode(id: ResponderId) {
+    if (this._currentResponder.id === id) {
+      this.terminateResponder();
+    }
+    if (this._responderListenersMap.has(id)) {
+      this._responderListenersMap.delete(id);
     }
-    ResponderTouchHistoryStore.recordTouchTrack(eventType, responderEvent.nativeEvent);
   }
 
   /**
-   * Responder System logic
+   * Allow the current responder to be terminated from within components to support
+   * more complex requirements, such as use with other React libraries for working
+   * with scroll views, input views, etc.
    */
-
-  let eventPaths = getResponderPaths(domEvent);
-  let wasNegotiated = false;
-  let wantsResponder;
-
-  // If an event occured that might change the current responder...
-  if (isStartEvent || isMoveEvent || (isScrollEvent && trackedTouchCount > 0)) {
-    // If there is already a responder, prune the event paths to the lowest common ancestor
-    // of the existing responder and deepest target of the event.
-    const currentResponderIdPath = currentResponder.idPath;
-    const eventIdPath = eventPaths.idPath;
-
-    if (currentResponderIdPath != null && eventIdPath != null) {
-      const lowestCommonAncestor = getLowestCommonAncestor(currentResponderIdPath, eventIdPath);
-      if (lowestCommonAncestor != null) {
-        const indexOfLowestCommonAncestor = eventIdPath.indexOf(lowestCommonAncestor);
-        // Skip the current responder so it doesn't receive unexpected "shouldSet" events.
-        const index =
-          indexOfLowestCommonAncestor + (lowestCommonAncestor === currentResponder.id ? 1 : 0);
-        eventPaths = {
-          idPath: eventIdPath.slice(index),
-          nodePath: eventPaths.nodePath.slice(index)
-        };
-      } else {
-        eventPaths = null;
+  terminateResponder() {
+    const { id, node } = this._currentResponder;
+    if (id != null && node != null) {
+      const { onResponderTerminate } = this._getResponderConfig(id);
+      if (onResponderTerminate != null) {
+        const event = createResponderEvent({}, this._responderTouchHistoryStore);
+        event.currentTarget = node;
+        onResponderTerminate(event);
       }
+      this._changeCurrentResponder(emptyResponder);
     }
+    this._isEmulatingMouseEvents = false;
+    this._trackedTouchCount = 0;
+  }
 
-    if (eventPaths != null) {
-      // If a node wants to become the responder, attempt to transfer.
-      wantsResponder = findWantsResponder(eventPaths, domEvent, responderEvent);
-      if (wantsResponder != null) {
-        // Sets responder if none exists, or negotates with existing responder.
-        attemptTransfer(responderEvent, wantsResponder);
-        wasNegotiated = true;
-      }
-    }
+  /**
+   * Allow unit tests to inspect the current responder in the system.
+   * FOR TESTING ONLY.
+   */
+  getResponderNode(): any {
+    return this._currentResponder.node;
   }
 
-  // If there is now a responder, invoke its callbacks for the lifecycle of the gesture.
-  if (currentResponder.id != null && currentResponder.node != null) {
-    const { id, node } = currentResponder;
-    const {
-      onResponderStart,
-      onResponderMove,
-      onResponderEnd,
-      onResponderRelease,
-      onResponderTerminate,
-      onResponderTerminationRequest
-    } = getResponderConfig(id);
+  _changeCurrentResponder(responder: ResponderInstance) {
+    this._currentResponder = responder;
+  }
 
-    responderEvent.bubbles = false;
-    responderEvent.cancelable = false;
-    responderEvent.currentTarget = node;
+  _getResponderConfig(id: ResponderId): ResponderConfig | Object {
+    const config = this._responderListenersMap.get(id);
+    return config != null ? config : emptyObject;
+  }
 
-    // Start
-    if (isStartEvent) {
-      if (onResponderStart != null) {
-        responderEvent.dispatchConfig.registrationName = 'onResponderStart';
-        onResponderStart(responderEvent);
-      }
-    }
-    // Move
-    else if (isMoveEvent) {
-      if (onResponderMove != null) {
-        responderEvent.dispatchConfig.registrationName = 'onResponderMove';
-        onResponderMove(responderEvent);
-      }
-    } else {
-      const isTerminateEvent =
-        isCancelish(eventType) ||
-        // native context menu
-        eventType === 'contextmenu' ||
-        // window blur
-        (eventType === 'blur' && eventTarget === window) ||
-        // responder (or ancestors) blur
-        (eventType === 'blur' && eventTarget.contains(node) && domEvent.relatedTarget !== node) ||
-        // native scroll without using a pointer
-        (isScrollEvent && trackedTouchCount === 0) ||
-        // native scroll on node that is parent of the responder (allow siblings to scroll)
-        (isScrollEvent && eventTarget.contains(node) && eventTarget !== node) ||
-        // native select/selectionchange on node
-        (isSelectionChangeEvent && hasValidSelection(domEvent));
-
-      const isReleaseEvent =
-        isEndEvent && !isTerminateEvent && !hasTargetTouches(node, domEvent.touches);
-
-      // End
-      if (isEndEvent) {
-        if (onResponderEnd != null) {
-          responderEvent.dispatchConfig.registrationName = 'onResponderEnd';
-          onResponderEnd(responderEvent);
+  /**
+   * Walk the event path to/from the target node. At each node, stop and call the
+   * relevant "shouldSet" functions for the given event type. If any of those functions
+   * call "stopPropagation" on the event, stop searching for a responder.
+   */
+  _findWantsResponder(eventPaths, domEvent, responderEvent) {
+    const shouldSetCallbacks = shouldSetResponderEvents[(domEvent.type: any)]; // for Flow
+
+    if (shouldSetCallbacks != null) {
+      const { idPath, nodePath } = eventPaths;
+
+      const shouldSetCallbackCaptureName = shouldSetCallbacks[0];
+      const shouldSetCallbackBubbleName = shouldSetCallbacks[1];
+      const { bubbles } = shouldSetCallbacks[2];
+
+      const check = (id, node, callbackName) => {
+        const config = this._getResponderConfig(id);
+        const shouldSetCallback = config[callbackName];
+        if (shouldSetCallback != null) {
+          responderEvent.currentTarget = node;
+          if (shouldSetCallback(responderEvent) === true) {
+            // Start the path from the potential responder
+            const prunedIdPath = idPath.slice(idPath.indexOf(id));
+            return { id, node, idPath: prunedIdPath };
+          }
         }
-      }
-      // Release
-      if (isReleaseEvent) {
-        if (onResponderRelease != null) {
-          responderEvent.dispatchConfig.registrationName = 'onResponderRelease';
-          onResponderRelease(responderEvent);
+      };
+
+      // capture
+      for (let i = idPath.length - 1; i >= 0; i--) {
+        const id = idPath[i];
+        const node = nodePath[i];
+        const result = check(id, node, shouldSetCallbackCaptureName);
+        if (result != null) {
+          return result;
+        }
+        if (responderEvent.isPropagationStopped() === true) {
+          return;
         }
-        changeCurrentResponder(emptyResponder);
       }
-      // Terminate
-      if (isTerminateEvent) {
-        let shouldTerminate = true;
 
-        // Responders can still avoid termination but only for these events.
-        if (
-          eventType === 'contextmenu' ||
-          eventType === 'scroll' ||
-          eventType === 'selectionchange'
-        ) {
-          // Only call this function is it wasn't already called during negotiation.
-          if (wasNegotiated) {
-            shouldTerminate = false;
-          } else if (onResponderTerminationRequest != null) {
-            responderEvent.dispatchConfig.registrationName = 'onResponderTerminationRequest';
-            if (onResponderTerminationRequest(responderEvent) === false) {
-              shouldTerminate = false;
-            }
+      // bubble
+      if (bubbles) {
+        for (let i = 0; i < idPath.length; i++) {
+          const id = idPath[i];
+          const node = nodePath[i];
+          const result = check(id, node, shouldSetCallbackBubbleName);
+          if (result != null) {
+            return result;
           }
-        }
-
-        if (shouldTerminate) {
-          if (onResponderTerminate != null) {
-            responderEvent.dispatchConfig.registrationName = 'onResponderTerminate';
-            onResponderTerminate(responderEvent);
+          if (responderEvent.isPropagationStopped() === true) {
+            return;
           }
-          changeCurrentResponder(emptyResponder);
-          isEmulatingMouseEvents = false;
-          trackedTouchCount = 0;
+        }
+      } else {
+        const id = idPath[0];
+        const node = nodePath[0];
+        const target = domEvent.target;
+        if (target === node) {
+          return check(id, node, shouldSetCallbackBubbleName);
         }
       }
     }
   }
-}
 
-/**
- * Walk the event path to/from the target node. At each node, stop and call the
- * relevant "shouldSet" functions for the given event type. If any of those functions
- * call "stopPropagation" on the event, stop searching for a responder.
- */
-function findWantsResponder(eventPaths, domEvent, responderEvent) {
-  const shouldSetCallbacks = shouldSetResponderEvents[(domEvent.type: any)]; // for Flow
+  /**
+   * Process native events
+   *
+   * A single event listener is used to manage the responder system.
+   * All pointers are tracked in the ResponderTouchHistoryStore. Native events
+   * are interpreted in terms of the Responder System and checked to see if
+   * the responder should be transferred. Each host node that is attached to
+   * the Responder System has an ID, which is used to look up its associated
+   * callbacks.
+   */
+  _eventListener = (domEvent: any) => {
+    const eventType = domEvent.type;
+    const eventTarget = domEvent.target;
+
+    /**
+     * Manage emulated events and early bailout.
+     * Since PointerEvent is not used yet (lack of support in older Safari), it's
+     * necessary to manually manage the mess of browser touch/mouse events.
+     * And bailout early for termination events when there is no active responder.
+     */
+
+    // Flag when browser may produce emulated events
+    if (eventType === 'touchstart') {
+      this._isEmulatingMouseEvents = true;
+    }
+    // Remove flag when browser will not produce emulated events
+    if (eventType === 'touchmove' || this._trackedTouchCount > 1) {
+      this._isEmulatingMouseEvents = false;
+    }
+    // Ignore various events in particular circumstances
+    if (
+      // Ignore browser emulated mouse events
+      (eventType === 'mousedown' && this._isEmulatingMouseEvents) ||
+      (eventType === 'mousemove' && this._isEmulatingMouseEvents) ||
+      // Ignore mousemove if a mousedown didn't occur first
+      (eventType === 'mousemove' && this._trackedTouchCount < 1)
+    ) {
+      return;
+    }
+    // Remove flag after emulated events are finished
+    if (this._isEmulatingMouseEvents && eventType === 'mouseup') {
+      if (this._trackedTouchCount === 0) {
+        this._isEmulatingMouseEvents = false;
+      }
+      return;
+    }
 
-  if (shouldSetCallbacks != null) {
-    const { idPath, nodePath } = eventPaths;
+    const isStartEvent = isStartish(eventType) && isPrimaryPointerDown(domEvent);
+    const isMoveEvent = isMoveish(eventType);
+    const isEndEvent = isEndish(eventType);
+    const isScrollEvent = isScroll(eventType);
+    const isSelectionChangeEvent = isSelectionChange(eventType);
+    const responderEvent = createResponderEvent(domEvent, this._responderTouchHistoryStore);
 
-    const shouldSetCallbackCaptureName = shouldSetCallbacks[0];
-    const shouldSetCallbackBubbleName = shouldSetCallbacks[1];
-    const { bubbles } = shouldSetCallbacks[2];
+    /**
+     * Record the state of active pointers
+     */
 
-    const check = function (id, node, callbackName) {
-      const config = getResponderConfig(id);
-      const shouldSetCallback = config[callbackName];
-      if (shouldSetCallback != null) {
-        responderEvent.currentTarget = node;
-        if (shouldSetCallback(responderEvent) === true) {
-          // Start the path from the potential responder
-          const prunedIdPath = idPath.slice(idPath.indexOf(id));
-          return { id, node, idPath: prunedIdPath };
+    if (isStartEvent || isMoveEvent || isEndEvent) {
+      if (domEvent.touches) {
+        this._trackedTouchCount = domEvent.touches.length;
+      } else {
+        if (isStartEvent) {
+          this._trackedTouchCount = 1;
+        } else if (isEndEvent) {
+          this._trackedTouchCount = 0;
         }
       }
-    };
-
-    // capture
-    for (let i = idPath.length - 1; i >= 0; i--) {
-      const id = idPath[i];
-      const node = nodePath[i];
-      const result = check(id, node, shouldSetCallbackCaptureName);
-      if (result != null) {
-        return result;
-      }
-      if (responderEvent.isPropagationStopped() === true) {
-        return;
-      }
+      this._responderTouchHistoryStore.recordTouchTrack(eventType, responderEvent.nativeEvent);
     }
 
-    // bubble
-    if (bubbles) {
-      for (let i = 0; i < idPath.length; i++) {
-        const id = idPath[i];
-        const node = nodePath[i];
-        const result = check(id, node, shouldSetCallbackBubbleName);
-        if (result != null) {
-          return result;
-        }
-        if (responderEvent.isPropagationStopped() === true) {
-          return;
+    /**
+     * Responder System logic
+     */
+
+    let eventPaths = getResponderPaths(domEvent);
+    let wasNegotiated = false;
+    let wantsResponder;
+
+    // If an event occured that might change the current responder...
+    if (isStartEvent || isMoveEvent || (isScrollEvent && this._trackedTouchCount > 0)) {
+      // If there is already a responder, prune the event paths to the lowest common ancestor
+      // of the existing responder and deepest target of the event.
+      const currentResponderIdPath = this._currentResponder.idPath;
+      const eventIdPath = eventPaths.idPath;
+
+      if (currentResponderIdPath != null && eventIdPath != null) {
+        const lowestCommonAncestor = getLowestCommonAncestor(currentResponderIdPath, eventIdPath);
+        if (lowestCommonAncestor != null) {
+          const indexOfLowestCommonAncestor = eventIdPath.indexOf(lowestCommonAncestor);
+          // Skip the current responder so it doesn't receive unexpected "shouldSet" events.
+          const index =
+            indexOfLowestCommonAncestor +
+            (lowestCommonAncestor === this._currentResponder.id ? 1 : 0);
+          eventPaths = {
+            idPath: eventIdPath.slice(index),
+            nodePath: eventPaths.nodePath.slice(index)
+          };
+        } else {
+          eventPaths = null;
         }
       }
-    } else {
-      const id = idPath[0];
-      const node = nodePath[0];
-      const target = domEvent.target;
-      if (target === node) {
-        return check(id, node, shouldSetCallbackBubbleName);
+
+      if (eventPaths != null) {
+        // If a node wants to become the responder, attempt to transfer.
+        wantsResponder = this._findWantsResponder(eventPaths, domEvent, responderEvent);
+        if (wantsResponder != null) {
+          // Sets responder if none exists, or negotates with existing responder.
+          this._attemptTransfer(responderEvent, wantsResponder);
+          wasNegotiated = true;
+        }
       }
     }
-  }
-}
-
-/**
- * Attempt to transfer the responder.
- */
-function attemptTransfer(responderEvent: ResponderEvent, wantsResponder: ActiveResponderInstance) {
-  const { id: currentId, node: currentNode } = currentResponder;
-  const { id, node } = wantsResponder;
 
-  const { onResponderGrant, onResponderReject } = getResponderConfig(id);
+    // If there is now a responder, invoke its callbacks for the lifecycle of the gesture.
+    if (this._currentResponder.id != null && this._currentResponder.node != null) {
+      const { id, node } = this._currentResponder;
+      const {
+        onResponderStart,
+        onResponderMove,
+        onResponderEnd,
+        onResponderRelease,
+        onResponderTerminate,
+        onResponderTerminationRequest
+      } = this._getResponderConfig(id);
+
+      responderEvent.bubbles = false;
+      responderEvent.cancelable = false;
+      responderEvent.currentTarget = node;
 
-  responderEvent.bubbles = false;
-  responderEvent.cancelable = false;
-  responderEvent.currentTarget = node;
+      // Start
+      if (isStartEvent) {
+        if (onResponderStart != null) {
+          responderEvent.dispatchConfig.registrationName = 'onResponderStart';
+          onResponderStart(responderEvent);
+        }
+      }
+      // Move
+      else if (isMoveEvent) {
+        if (onResponderMove != null) {
+          responderEvent.dispatchConfig.registrationName = 'onResponderMove';
+          onResponderMove(responderEvent);
+        }
+      } else {
+        const isTerminateEvent =
+          isCancelish(eventType) ||
+          // native context menu
+          eventType === 'contextmenu' ||
+          // window blur
+          (eventType === 'blur' && eventTarget === window) ||
+          // responder (or ancestors) blur
+          (eventType === 'blur' && eventTarget.contains(node) && domEvent.relatedTarget !== node) ||
+          // native scroll without using a pointer
+          (isScrollEvent && this._trackedTouchCount === 0) ||
+          // native scroll on node that is parent of the responder (allow siblings to scroll)
+          (isScrollEvent && eventTarget.contains(node) && eventTarget !== node) ||
+          // native select/selectionchange on node
+          (isSelectionChangeEvent && hasValidSelection(domEvent));
+
+        const isReleaseEvent =
+          isEndEvent && !isTerminateEvent && !hasTargetTouches(node, domEvent.touches);
+
+        // End
+        if (isEndEvent) {
+          if (onResponderEnd != null) {
+            responderEvent.dispatchConfig.registrationName = 'onResponderEnd';
+            onResponderEnd(responderEvent);
+          }
+        }
+        // Release
+        if (isReleaseEvent) {
+          if (onResponderRelease != null) {
+            responderEvent.dispatchConfig.registrationName = 'onResponderRelease';
+            onResponderRelease(responderEvent);
+          }
+          this._changeCurrentResponder(emptyResponder);
+        }
+        // Terminate
+        if (isTerminateEvent) {
+          let shouldTerminate = true;
+
+          // Responders can still avoid termination but only for these events.
+          if (
+            eventType === 'contextmenu' ||
+            eventType === 'scroll' ||
+            eventType === 'selectionchange'
+          ) {
+            // Only call this function is it wasn't already called during negotiation.
+            if (wasNegotiated) {
+              shouldTerminate = false;
+            } else if (onResponderTerminationRequest != null) {
+              responderEvent.dispatchConfig.registrationName = 'onResponderTerminationRequest';
+              if (onResponderTerminationRequest(responderEvent) === false) {
+                shouldTerminate = false;
+              }
+            }
+          }
 
-  // Set responder
-  if (currentId == null) {
-    if (onResponderGrant != null) {
-      responderEvent.currentTarget = node;
-      responderEvent.dispatchConfig.registrationName = 'onResponderGrant';
-      onResponderGrant(responderEvent);
-    }
-    changeCurrentResponder(wantsResponder);
-  }
-  // Negotiate with current responder
-  else {
-    const { onResponderTerminate, onResponderTerminationRequest } = getResponderConfig(currentId);
-
-    let allowTransfer = true;
-    if (onResponderTerminationRequest != null) {
-      responderEvent.currentTarget = currentNode;
-      responderEvent.dispatchConfig.registrationName = 'onResponderTerminationRequest';
-      if (onResponderTerminationRequest(responderEvent) === false) {
-        allowTransfer = false;
+          if (shouldTerminate) {
+            if (onResponderTerminate != null) {
+              responderEvent.dispatchConfig.registrationName = 'onResponderTerminate';
+              onResponderTerminate(responderEvent);
+            }
+            this._changeCurrentResponder(emptyResponder);
+            this._isEmulatingMouseEvents = false;
+            this._trackedTouchCount = 0;
+          }
+        }
       }
     }
+  };
 
-    if (allowTransfer) {
-      // Terminate existing responder
-      if (onResponderTerminate != null) {
-        responderEvent.currentTarget = currentNode;
-        responderEvent.dispatchConfig.registrationName = 'onResponderTerminate';
-        onResponderTerminate(responderEvent);
-      }
-      // Grant next responder
+  /**
+   * Attempt to transfer the responder.
+   */
+  _attemptTransfer(responderEvent: ResponderEvent, wantsResponder: ActiveResponderInstance) {
+    const { id: currentId, node: currentNode } = this._currentResponder;
+    const { id, node } = wantsResponder;
+
+    const { onResponderGrant, onResponderReject } = this._getResponderConfig(id);
+
+    responderEvent.bubbles = false;
+    responderEvent.cancelable = false;
+    responderEvent.currentTarget = node;
+
+    // Set responder
+    if (currentId == null) {
       if (onResponderGrant != null) {
         responderEvent.currentTarget = node;
         responderEvent.dispatchConfig.registrationName = 'onResponderGrant';
         onResponderGrant(responderEvent);
       }
-      changeCurrentResponder(wantsResponder);
-    } else {
-      // Reject responder request
-      if (onResponderReject != null) {
-        responderEvent.currentTarget = node;
-        responderEvent.dispatchConfig.registrationName = 'onResponderReject';
-        onResponderReject(responderEvent);
-      }
+      this._changeCurrentResponder(wantsResponder);
     }
-  }
-}
-
-/* ------------ PUBLIC API ------------ */
-
-/**
- * Attach Listeners
- *
- * Use native events as ReactDOM doesn't have a non-plugin API to implement
- * this system.
- */
-const documentEventsCapturePhase = ['blur', 'scroll'];
-const documentEventsBubblePhase = [
-  // mouse
-  'mousedown',
-  'mousemove',
-  'mouseup',
-  'dragstart',
-  // touch
-  'touchstart',
-  'touchmove',
-  'touchend',
-  'touchcancel',
-  // other
-  'contextmenu',
-  'select',
-  'selectionchange'
-];
-export function attachListeners() {
-  if (canUseDOM && window.__reactResponderSystemActive == null) {
-    window.addEventListener('blur', eventListener);
-    documentEventsBubblePhase.forEach((eventType) => {
-      document.addEventListener(eventType, eventListener);
-    });
-    documentEventsCapturePhase.forEach((eventType) => {
-      document.addEventListener(eventType, eventListener, true);
-    });
-    window.__reactResponderSystemActive = true;
-  }
-}
-
-/**
- * Register a node with the ResponderSystem.
- */
-export function addNode(id: ResponderId, node: any, config: ResponderConfig) {
-  setResponderId(node, id);
-  responderListenersMap.set(id, config);
-}
-
-/**
- * Unregister a node with the ResponderSystem.
- */
-export function removeNode(id: ResponderId) {
-  if (currentResponder.id === id) {
-    terminateResponder();
-  }
-  if (responderListenersMap.has(id)) {
-    responderListenersMap.delete(id);
-  }
-}
+    // Negotiate with current responder
+    else {
+      const { onResponderTerminate, onResponderTerminationRequest } = this._getResponderConfig(
+        currentId
+      );
+
+      let allowTransfer = true;
+      if (onResponderTerminationRequest != null) {
+        responderEvent.currentTarget = currentNode;
+        responderEvent.dispatchConfig.registrationName = 'onResponderTerminationRequest';
+        if (onResponderTerminationRequest(responderEvent) === false) {
+          allowTransfer = false;
+        }
+      }
 
-/**
- * Allow the current responder to be terminated from within components to support
- * more complex requirements, such as use with other React libraries for working
- * with scroll views, input views, etc.
- */
-export function terminateResponder() {
-  const { id, node } = currentResponder;
-  if (id != null && node != null) {
-    const { onResponderTerminate } = getResponderConfig(id);
-    if (onResponderTerminate != null) {
-      const event = createResponderEvent({});
-      event.currentTarget = node;
-      onResponderTerminate(event);
+      if (allowTransfer) {
+        // Terminate existing responder
+        if (onResponderTerminate != null) {
+          responderEvent.currentTarget = currentNode;
+          responderEvent.dispatchConfig.registrationName = 'onResponderTerminate';
+          onResponderTerminate(responderEvent);
+        }
+        // Grant next responder
+        if (onResponderGrant != null) {
+          responderEvent.currentTarget = node;
+          responderEvent.dispatchConfig.registrationName = 'onResponderGrant';
+          onResponderGrant(responderEvent);
+        }
+        this._changeCurrentResponder(wantsResponder);
+      } else {
+        // Reject responder request
+        if (onResponderReject != null) {
+          responderEvent.currentTarget = node;
+          responderEvent.dispatchConfig.registrationName = 'onResponderReject';
+          onResponderReject(responderEvent);
+        }
+      }
     }
-    changeCurrentResponder(emptyResponder);
   }
-  isEmulatingMouseEvents = false;
-  trackedTouchCount = 0;
-}
-
-/**
- * Allow unit tests to inspect the current responder in the system.
- * FOR TESTING ONLY.
- */
-export function getResponderNode(): any {
-  return currentResponder.node;
 }
diff --git a/packages/react-native-web/src/modules/useResponderEvents/ResponderTouchHistoryStore.js b/packages/react-native-web/src/modules/useResponderEvents/ResponderTouchHistoryStore.js
index 07d97dc022..9bdd221b2a 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/ResponderTouchHistoryStore.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/ResponderTouchHistoryStore.js
@@ -31,16 +31,6 @@ type TouchRecord = {|
 
 const __DEV__ = process.env.NODE_ENV !== 'production';
 const MAX_TOUCH_BANK = 20;
-const touchBank: Array<TouchRecord> = [];
-const touchHistory = {
-  touchBank,
-  numberActiveTouches: 0,
-  // If there is only one active touch, we remember its location. This prevents
-  // us having to loop through all of the touches all the time in the most
-  // common case.
-  indexOfSingleActiveTouch: -1,
-  mostRecentTimeStamp: 0
-};
 
 function timestampForTouch(touch: Touch): number {
   // The legacy internal implementation provides "timeStamp", which has been
@@ -97,57 +87,6 @@ function getTouchIdentifier({ identifier }: Touch): number {
   return identifier;
 }
 
-function recordTouchStart(touch: Touch): void {
-  const identifier = getTouchIdentifier(touch);
-  const touchRecord = touchBank[identifier];
-  if (touchRecord) {
-    resetTouchRecord(touchRecord, touch);
-  } else {
-    touchBank[identifier] = createTouchRecord(touch);
-  }
-  touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
-}
-
-function recordTouchMove(touch: Touch): void {
-  const touchRecord = touchBank[getTouchIdentifier(touch)];
-  if (touchRecord) {
-    touchRecord.touchActive = true;
-    touchRecord.previousPageX = touchRecord.currentPageX;
-    touchRecord.previousPageY = touchRecord.currentPageY;
-    touchRecord.previousTimeStamp = touchRecord.currentTimeStamp;
-    touchRecord.currentPageX = touch.pageX;
-    touchRecord.currentPageY = touch.pageY;
-    touchRecord.currentTimeStamp = timestampForTouch(touch);
-    touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
-  } else {
-    console.warn(
-      'Cannot record touch move without a touch start.\n',
-      `Touch Move: ${printTouch(touch)}\n`,
-      `Touch Bank: ${printTouchBank()}`
-    );
-  }
-}
-
-function recordTouchEnd(touch: Touch): void {
-  const touchRecord = touchBank[getTouchIdentifier(touch)];
-  if (touchRecord) {
-    touchRecord.touchActive = false;
-    touchRecord.previousPageX = touchRecord.currentPageX;
-    touchRecord.previousPageY = touchRecord.currentPageY;
-    touchRecord.previousTimeStamp = touchRecord.currentTimeStamp;
-    touchRecord.currentPageX = touch.pageX;
-    touchRecord.currentPageY = touch.pageY;
-    touchRecord.currentTimeStamp = timestampForTouch(touch);
-    touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
-  } else {
-    console.warn(
-      'Cannot record touch end without a touch start.\n',
-      `Touch End: ${printTouch(touch)}\n`,
-      `Touch Bank: ${printTouchBank()}`
-    );
-  }
-}
-
 function printTouch(touch: Touch): string {
   return JSON.stringify({
     identifier: touch.identifier,
@@ -157,46 +96,104 @@ function printTouch(touch: Touch): string {
   });
 }
 
-function printTouchBank(): string {
-  let printed = JSON.stringify(touchBank.slice(0, MAX_TOUCH_BANK));
-  if (touchBank.length > MAX_TOUCH_BANK) {
-    printed += ' (original size: ' + touchBank.length + ')';
-  }
-  return printed;
-}
+export default class ResponderTouchHistoryStore {
+  _touchBank: Array<TouchRecord> = [];
+  _touchHistory = {
+    touchBank: this._touchBank,
+    numberActiveTouches: 0,
+    // If there is only one active touch, we remember its location. This prevents
+    // us having to loop through all of the touches all the time in the most
+    // common case.
+    indexOfSingleActiveTouch: -1,
+    mostRecentTimeStamp: 0
+  };
 
-const ResponderTouchHistoryStore = {
   recordTouchTrack(topLevelType: string, nativeEvent: TouchEvent): void {
     if (isMoveish(topLevelType)) {
-      nativeEvent.changedTouches.forEach(recordTouchMove);
+      nativeEvent.changedTouches.forEach(this._recordTouchMove);
     } else if (isStartish(topLevelType)) {
-      nativeEvent.changedTouches.forEach(recordTouchStart);
-      touchHistory.numberActiveTouches = nativeEvent.touches.length;
-      if (touchHistory.numberActiveTouches === 1) {
-        touchHistory.indexOfSingleActiveTouch = nativeEvent.touches[0].identifier;
+      nativeEvent.changedTouches.forEach(this._recordTouchStart);
+      this._touchHistory.numberActiveTouches = nativeEvent.touches.length;
+      if (this._touchHistory.numberActiveTouches === 1) {
+        this._touchHistory.indexOfSingleActiveTouch = nativeEvent.touches[0].identifier;
       }
     } else if (isEndish(topLevelType)) {
-      nativeEvent.changedTouches.forEach(recordTouchEnd);
-      touchHistory.numberActiveTouches = nativeEvent.touches.length;
-      if (touchHistory.numberActiveTouches === 1) {
-        for (let i = 0; i < touchBank.length; i++) {
-          const touchTrackToCheck = touchBank[i];
+      nativeEvent.changedTouches.forEach(this._recordTouchEnd);
+      this._touchHistory.numberActiveTouches = nativeEvent.touches.length;
+      if (this._touchHistory.numberActiveTouches === 1) {
+        for (let i = 0; i < this._touchBank.length; i++) {
+          const touchTrackToCheck = this._touchBank[i];
           if (touchTrackToCheck != null && touchTrackToCheck.touchActive) {
-            touchHistory.indexOfSingleActiveTouch = i;
+            this._touchHistory.indexOfSingleActiveTouch = i;
             break;
           }
         }
         if (__DEV__) {
-          const activeRecord = touchBank[touchHistory.indexOfSingleActiveTouch];
+          const activeRecord = this._touchBank[this._touchHistory.indexOfSingleActiveTouch];
           if (!(activeRecord != null && activeRecord.touchActive)) {
             console.error('Cannot find single active touch.');
           }
         }
       }
     }
-  },
+  }
+
+  _printTouchBank(): string {
+    let printed = JSON.stringify(this._touchBank.slice(0, MAX_TOUCH_BANK));
+    if (this._touchBank.length > MAX_TOUCH_BANK) {
+      printed += ' (original size: ' + this._touchBank.length + ')';
+    }
+    return printed;
+  }
 
-  touchHistory
-};
+  _recordTouchStart = (touch: Touch): void => {
+    const identifier = getTouchIdentifier(touch);
+    const touchRecord = this._touchBank[identifier];
+    if (touchRecord) {
+      resetTouchRecord(touchRecord, touch);
+    } else {
+      this._touchBank[identifier] = createTouchRecord(touch);
+    }
+    this._touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
+  };
 
-export default ResponderTouchHistoryStore;
+  _recordTouchMove = (touch: Touch): void => {
+    const touchRecord = this._touchBank[getTouchIdentifier(touch)];
+    if (touchRecord) {
+      touchRecord.touchActive = true;
+      touchRecord.previousPageX = touchRecord.currentPageX;
+      touchRecord.previousPageY = touchRecord.currentPageY;
+      touchRecord.previousTimeStamp = touchRecord.currentTimeStamp;
+      touchRecord.currentPageX = touch.pageX;
+      touchRecord.currentPageY = touch.pageY;
+      touchRecord.currentTimeStamp = timestampForTouch(touch);
+      this._touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
+    } else {
+      console.warn(
+        'Cannot record touch move without a touch start.\n',
+        `Touch Move: ${printTouch(touch)}\n`,
+        `Touch Bank: ${this._printTouchBank()}`
+      );
+    }
+  };
+
+  _recordTouchEnd = (touch: Touch): void => {
+    const touchRecord = this._touchBank[getTouchIdentifier(touch)];
+    if (touchRecord) {
+      touchRecord.touchActive = false;
+      touchRecord.previousPageX = touchRecord.currentPageX;
+      touchRecord.previousPageY = touchRecord.currentPageY;
+      touchRecord.previousTimeStamp = touchRecord.currentTimeStamp;
+      touchRecord.currentPageX = touch.pageX;
+      touchRecord.currentPageY = touch.pageY;
+      touchRecord.currentTimeStamp = timestampForTouch(touch);
+      this._touchHistory.mostRecentTimeStamp = timestampForTouch(touch);
+    } else {
+      console.warn(
+        'Cannot record touch end without a touch start.\n',
+        `Touch End: ${printTouch(touch)}\n`,
+        `Touch Bank: ${this._printTouchBank()}`
+      );
+    }
+  };
+}
diff --git a/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js b/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js
index 8dc5106d7a..a96a0baa00 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js
@@ -4,7 +4,7 @@ import { act } from 'react-dom/test-utils';
 import React, { createRef } from 'react';
 import ReactDOM from 'react-dom';
 import useResponderEvents from '..';
-import { getResponderNode, terminateResponder } from '../ResponderSystem';
+import ResponderSystem from '../ResponderSystem';
 import {
   buttonType,
   buttonsType,
@@ -12,17 +12,25 @@ import {
   createEventTarget,
   testWithPointerType
 } from 'dom-event-testing-library';
+import StyleSheetManager from '../../../exports/StyleSheet/StyleSheetManager';
 
 describe('useResponderEvents', () => {
   let container;
+  let responderSystem;
 
   function render(element) {
-    ReactDOM.render(element, container);
+    ReactDOM.render(
+      <StyleSheetManager _responderSystem={responderSystem} rootTag={container}>
+        {element}
+      </StyleSheetManager>,
+      container
+    );
   }
 
   beforeEach(() => {
     container = document.createElement('div');
     document.body.appendChild(container);
+    responderSystem = new ResponderSystem(window);
   });
 
   afterEach(() => {
@@ -30,7 +38,7 @@ describe('useResponderEvents', () => {
     document.body.removeChild(container);
     container = null;
     // make sure all tests end with the current responder being reset
-    terminateResponder();
+    responderSystem.terminateResponder();
     // make sure all tests reset state machine tracking pointers on the mock surface
     clearPointers();
   });
@@ -54,7 +62,7 @@ describe('useResponderEvents', () => {
       target.pointerdown({ pointerType });
     });
     // no responder should be active
-    expect(getResponderNode()).toBe(null);
+    expect(responderSystem.getResponderNode()).toBe(null);
   });
 
   test('does nothing for "mousedown" with non-primary buttons', () => {
@@ -83,7 +91,7 @@ describe('useResponderEvents', () => {
         });
       });
     });
-    expect(getResponderNode()).toBe(null);
+    expect(responderSystem.getResponderNode()).toBe(null);
   });
 
   test('does nothing for "mousedown" with ignored modifier keys', () => {
@@ -109,14 +117,14 @@ describe('useResponderEvents', () => {
         target.pointerdown({ pointerType: 'mouse', [modifierKey]: true });
       });
     });
-    expect(getResponderNode()).toBe(null);
+    expect(responderSystem.getResponderNode()).toBe(null);
     // gesture
     act(() => {
       acceptedModifierKeys.forEach((modifierKey) => {
         target.pointerdown({ pointerType: 'mouse', [modifierKey]: true });
       });
     });
-    expect(getResponderNode()).not.toBe(null);
+    expect(responderSystem.getResponderNode()).not.toBe(null);
   });
 
   test('recognizes mouse interactions after touch interactions', () => {
@@ -248,7 +256,7 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onStartShouldSetResponderCapture).not.toBeCalled();
       expect(targetCallbacks.onStartShouldSetResponderCapture).not.toBeCalled();
       // responder grant
-      expect(getResponderNode()).toBe(grandParentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(grandParentRef.current);
       expect(grandParentCallbacks.onResponderGrant).toBeCalledTimes(1);
       expect(grantCurrentTarget).toBe(grandParentRef.current);
       // gesture end
@@ -256,7 +264,7 @@ describe('useResponderEvents', () => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     testWithPointerType('start grants responder to parent', (pointerType) => {
@@ -298,14 +306,14 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onStartShouldSetResponderCapture).toBeCalledTimes(1);
       expect(targetCallbacks.onStartShouldSetResponderCapture).not.toBeCalled();
       // responder grant
-      expect(getResponderNode()).toBe(parentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(parentRef.current);
       expect(parentCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     testWithPointerType('start grants responder to child', (pointerType) => {
@@ -347,14 +355,14 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onStartShouldSetResponderCapture).toBeCalledTimes(1);
       expect(targetCallbacks.onStartShouldSetResponderCapture).toBeCalledTimes(1);
       // responder grant
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(targetCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
   });
 
@@ -412,14 +420,14 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onStartShouldSetResponder).not.toBeCalled();
       expect(grandParentCallbacks.onStartShouldSetResponder).not.toBeCalled();
       // responder grant
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(targetCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     testWithPointerType('start grants responder to parent', (pointerType) => {
@@ -461,14 +469,14 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onStartShouldSetResponder).toBeCalledTimes(1);
       expect(grandParentCallbacks.onStartShouldSetResponder).not.toBeCalled();
       // responder grant
-      expect(getResponderNode()).toBe(parentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(parentRef.current);
       expect(parentCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     testWithPointerType('start grants responder to grandParent', (pointerType) => {
@@ -510,14 +518,14 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onStartShouldSetResponder).toBeCalledTimes(1);
       expect(grandParentCallbacks.onStartShouldSetResponder).toBeCalledTimes(1);
       // responder grant
-      expect(getResponderNode()).toBe(grandParentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(grandParentRef.current);
       expect(grandParentCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
   });
 
@@ -576,14 +584,14 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onMoveShouldSetResponderCapture).not.toBeCalled();
       expect(targetCallbacks.onMoveShouldSetResponderCapture).not.toBeCalled();
       // responder grant
-      expect(getResponderNode()).toBe(grandParentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(grandParentRef.current);
       expect(grandParentCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     testWithPointerType('move grants responder to parent', (pointerType) => {
@@ -626,14 +634,14 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onMoveShouldSetResponderCapture).toBeCalledTimes(1);
       expect(targetCallbacks.onMoveShouldSetResponderCapture).not.toBeCalled();
       // responder grant
-      expect(getResponderNode()).toBe(parentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(parentRef.current);
       expect(parentCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     testWithPointerType('move grants responder to child', (pointerType) => {
@@ -676,14 +684,14 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onMoveShouldSetResponderCapture).toBeCalledTimes(1);
       expect(targetCallbacks.onMoveShouldSetResponderCapture).toBeCalledTimes(1);
       // responder grant
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(targetCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
   });
 
@@ -742,14 +750,14 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onMoveShouldSetResponder).not.toBeCalled();
       expect(grandParentCallbacks.onMoveShouldSetResponder).not.toBeCalled();
       // responder grant
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(targetCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     testWithPointerType('move grants responder to parent', (pointerType) => {
@@ -793,14 +801,14 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onMoveShouldSetResponder).toBeCalledTimes(1);
       expect(grandParentCallbacks.onMoveShouldSetResponder).not.toBeCalled();
       // responder grant
-      expect(getResponderNode()).toBe(parentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(parentRef.current);
       expect(parentCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     testWithPointerType('move grants responder to grandParent', (pointerType) => {
@@ -843,14 +851,14 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onMoveShouldSetResponder).toBeCalled();
       expect(grandParentCallbacks.onMoveShouldSetResponder).toBeCalled();
       // responder grant
-      expect(getResponderNode()).toBe(grandParentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(grandParentRef.current);
       expect(grandParentCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
   });
 
@@ -900,7 +908,7 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onScrollShouldSetResponderCapture).toBeCalledTimes(1);
       expect(targetCallbacks.onScrollShouldSetResponderCapture).toBeCalledTimes(0);
       // responder grant
-      expect(getResponderNode()).toBe(parentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(parentRef.current);
       expect(parentCallbacks.onResponderGrant).toBeCalledTimes(1);
     });
 
@@ -937,7 +945,7 @@ describe('useResponderEvents', () => {
       expect(parentCallbacks.onScrollShouldSetResponderCapture).toBeCalledTimes(1);
       expect(targetCallbacks.onScrollShouldSetResponderCapture).toBeCalledTimes(1);
       // responder grant
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(targetCallbacks.onResponderGrant).toBeCalledTimes(1);
     });
   });
@@ -981,7 +989,7 @@ describe('useResponderEvents', () => {
       });
       // no bubble
       expect(parentCallbacks.onScrollShouldSetResponder).toBeCalledTimes(0);
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     testWithPointerType('scroll grants responder to target if a pointer is down', (pointerType) => {
@@ -1010,14 +1018,14 @@ describe('useResponderEvents', () => {
       // responder set (bubble phase)
       expect(targetCallbacks.onScrollShouldSetResponder).toBeCalledTimes(1);
       // responder grant
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(targetCallbacks.onResponderGrant).toBeCalledTimes(1);
       // gesture end
       act(() => {
         target.pointerup({ pointerType });
       });
       // make sure release is called
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
       expect(targetCallbacks.onResponderRelease).toBeCalledTimes(1);
     });
   });
@@ -1293,7 +1301,7 @@ describe('useResponderEvents', () => {
       // responder terminates
       expect(targetCallbacks.onResponderTerminate).toBeCalledTimes(1);
       // responder should not be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     testWithPointerType('is called if "selectionchange" occurs', (pointerType) => {
@@ -1332,7 +1340,7 @@ describe('useResponderEvents', () => {
       // responder terminates
       expect(targetCallbacks.onResponderTerminate).toBeCalledTimes(1);
       // responder should not be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     test('is called if ancestor scrolls', () => {
@@ -1368,7 +1376,7 @@ describe('useResponderEvents', () => {
       // responder terminates
       expect(targetCallbacks.onResponderTerminate).toBeCalledTimes(1);
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     test('is called if document scrolls', () => {
@@ -1404,7 +1412,7 @@ describe('useResponderEvents', () => {
       // responder end
       expect(targetCallbacks.onResponderTerminate).toBeCalledTimes(1);
       // no responder should be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     test('is not called if sibling scrolls', () => {
@@ -1441,7 +1449,7 @@ describe('useResponderEvents', () => {
       // responder doesn't terminate
       expect(targetCallbacks.onResponderTerminate).not.toBeCalled();
       // responder should still be set
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
     });
 
     test('is called if responder blurs', () => {
@@ -1471,7 +1479,7 @@ describe('useResponderEvents', () => {
       // responder terminates
       expect(targetCallbacks.onResponderTerminate).toBeCalledTimes(1);
       // responder should still be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     test('is called if window blurs', () => {
@@ -1501,7 +1509,7 @@ describe('useResponderEvents', () => {
       // responder terminates
       expect(targetCallbacks.onResponderTerminate).toBeCalledTimes(1);
       // responder should not be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     test('is not called if sibling blurs', () => {
@@ -1538,7 +1546,7 @@ describe('useResponderEvents', () => {
       // responder doesn't terminate
       expect(targetCallbacks.onResponderTerminate).not.toBeCalled();
       // responder should still be set
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
     });
 
     test('is called if contextmenu opens', () => {
@@ -1568,7 +1576,7 @@ describe('useResponderEvents', () => {
       // responder terminates
       expect(targetCallbacks.onResponderTerminate).toBeCalledTimes(1);
       // responder should not be set
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
 
     test('can be denied for "contextmenu", "scroll", and "selectionchange" events', () => {
@@ -1585,8 +1593,8 @@ describe('useResponderEvents', () => {
 
       function assertAndCleanUp() {
         expect(targetCallbacks.onResponderTerminate).toBeCalledTimes(0);
-        expect(getResponderNode()).toBe(targetRef.current);
-        terminateResponder();
+        expect(responderSystem.getResponderNode()).toBe(targetRef.current);
+        responderSystem.terminateResponder();
         clearPointers();
         targetCallbacks.onResponderTerminate.mockClear();
       }
@@ -1961,7 +1969,7 @@ describe('useResponderEvents', () => {
         target.pointerdown({ pointerType, pointerId: 1 });
       });
       // target becomes responder
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
         'parent: onStartShouldSetResponderCapture',
@@ -1976,7 +1984,7 @@ describe('useResponderEvents', () => {
         target.pointerdown({ pointerType, pointerId: 2 });
       });
       // target remains responder for start event
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
         'parent: onStartShouldSetResponderCapture',
@@ -1990,7 +1998,7 @@ describe('useResponderEvents', () => {
         target.pointermove({ pointerType, pointerId: 1 });
       });
       // parent becomes responder, target terminates
-      expect(getResponderNode()).toBe(parentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(parentRef.current);
       expect(eventLog).toEqual([
         'grandParent: onMoveShouldSetResponderCapture',
         'parent: onMoveShouldSetResponderCapture',
@@ -2007,7 +2015,7 @@ describe('useResponderEvents', () => {
         target.pointermove({ pointerType, pointerId: 2 });
       });
       // grand parent becomes responder, parent terminates
-      expect(getResponderNode()).toBe(grandParentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(grandParentRef.current);
       expect(eventLog).toEqual([
         'grandParent: onMoveShouldSetResponderCapture',
         'grandParent: onMoveShouldSetResponder',
@@ -2023,7 +2031,7 @@ describe('useResponderEvents', () => {
         target.pointerup({ pointerType, pointerId: 2 });
         target.pointerup({ pointerType, pointerId: 1 });
       });
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
       expect(eventLog).toEqual([
         'grandParent: onResponderEnd',
         'grandParent: onResponderEnd',
@@ -2127,7 +2135,7 @@ describe('useResponderEvents', () => {
         parent.pointerdown({ pointerType, pointerId: 1 });
       });
       // initially nothing wants to become the responder
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
         'parent: onStartShouldSetResponderCapture',
@@ -2140,7 +2148,7 @@ describe('useResponderEvents', () => {
         target.pointerdown({ pointerType, pointerId: 2 });
       });
       // target should become responder
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
         'parent: onStartShouldSetResponderCapture',
@@ -2156,7 +2164,7 @@ describe('useResponderEvents', () => {
         parent.pointerup({ pointerType, pointerId: 1 });
       });
       // responder doesn't change, "end" event called on responder
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual(['target: onResponderEnd']);
       eventLog = [];
       // add touch back on parent
@@ -2164,7 +2172,7 @@ describe('useResponderEvents', () => {
         parent.pointerdown({ pointerType, pointerId: 1 });
       });
       // responder doesn't change, "start" event called on responder
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
         'parent: onStartShouldSetResponderCapture',
@@ -2178,7 +2186,7 @@ describe('useResponderEvents', () => {
         parent.pointermove({ pointerType, pointerId: 1 });
       });
       // responder doesn't change, "move" event dispatched on responder
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual([
         'grandParent: onMoveShouldSetResponderCapture',
         'parent: onMoveShouldSetResponderCapture',
@@ -2192,7 +2200,7 @@ describe('useResponderEvents', () => {
         target.pointerup({ pointerType, pointerId: 2 });
       });
       // responder is released
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
       expect(eventLog).toEqual(['target: onResponderEnd', 'target: onResponderRelease']);
     });
 
@@ -2310,7 +2318,7 @@ describe('useResponderEvents', () => {
       act(() => {
         target.pointerdown({ pointerType, pointerId: 1 });
       });
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
         'parent: onStartShouldSetResponderCapture',
@@ -2325,7 +2333,7 @@ describe('useResponderEvents', () => {
         sibling.pointerdown({ pointerType, pointerId: 2 });
       });
       // target remains responder
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       // negotiates from first common ancestor of current responder and sibling (i.e., parent)
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
@@ -2340,7 +2348,7 @@ describe('useResponderEvents', () => {
         target.pointermove({ pointerType, pointerId: 1 });
       });
       // target remains responder
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       // negotiates from first common ancestor
       expect(eventLog).toEqual([
         'grandParent: onMoveShouldSetResponderCapture',
@@ -2355,7 +2363,7 @@ describe('useResponderEvents', () => {
         sibling.pointermove({ pointerType, pointerId: 2 });
       });
       // target remains responder
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       // negotiates from first common ancestor
       expect(eventLog).toEqual([
         'grandParent: onMoveShouldSetResponderCapture',
@@ -2559,7 +2567,7 @@ describe('useResponderEvents', () => {
         target.pointerdown({ pointerType });
       });
       // target becomes responder
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
         'parent: onStartShouldSetResponderCapture',
@@ -2574,7 +2582,7 @@ describe('useResponderEvents', () => {
         target.pointermove({ pointerType });
       });
       // target remains responder, parent was rejected
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual([
         'grandParent: onMoveShouldSetResponderCapture',
         'parent: onMoveShouldSetResponderCapture',
@@ -2589,7 +2597,7 @@ describe('useResponderEvents', () => {
         target.pointerdown({ pointerType, pointerId: 2 });
       });
       // target remains responder, parent was rejected
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
         'parent: onStartShouldSetResponderCapture',
@@ -2697,7 +2705,7 @@ describe('useResponderEvents', () => {
         target.pointerdown({ pointerType });
       });
       // target becomes responder
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
         'parent: onStartShouldSetResponderCapture',
@@ -2712,7 +2720,7 @@ describe('useResponderEvents', () => {
         parent.scroll();
       });
       // target remains responder, parent rejected
-      expect(getResponderNode()).toBe(targetRef.current);
+      expect(responderSystem.getResponderNode()).toBe(targetRef.current);
       expect(eventLog).toEqual([
         'grandParent: onScrollShouldSetResponderCapture',
         'parent: onScrollShouldSetResponderCapture',
@@ -2730,7 +2738,7 @@ describe('useResponderEvents', () => {
       act(() => {
         parent.scroll();
       });
-      expect(getResponderNode()).toBe(parentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(parentRef.current);
       expect(eventLog).toEqual([
         'grandParent: onScrollShouldSetResponderCapture',
         'parent: onScrollShouldSetResponderCapture',
@@ -2796,12 +2804,12 @@ describe('useResponderEvents', () => {
       const target = createEventTarget(targetRef.current);
       act(() => {
         target.pointerdown({ pointerType });
-      });
+      }); //
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
         'parent: onStartShouldSetResponderCapture'
       ]);
-      expect(getResponderNode()).toBe(null);
+      expect(responderSystem.getResponderNode()).toBe(null);
     });
   });
 });
diff --git a/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js b/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js
index b7a686bdcf..b8386cbf2c 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js
@@ -70,7 +70,10 @@ function normalizeIdentifier(identifier) {
  * Converts a native DOM event to a ResponderEvent.
  * Mouse events are transformed into fake touch events.
  */
-export default function createResponderEvent(domEvent: any): ResponderEvent {
+export default function createResponderEvent(
+  domEvent: any,
+  responderTouchHistoryStore: ResponderTouchHistoryStore
+): ResponderEvent {
   let rect;
   let propagationWasStopped = false;
   let changedTouches;
@@ -182,7 +185,7 @@ export default function createResponderEvent(domEvent: any): ResponderEvent {
     },
     target: domEvent.target,
     timeStamp: timestamp,
-    touchHistory: ResponderTouchHistoryStore.touchHistory
+    touchHistory: responderTouchHistoryStore._touchHistory
   };
 
   // Using getters and functions serves two purposes:
diff --git a/packages/react-native-web/src/modules/useResponderEvents/index.js b/packages/react-native-web/src/modules/useResponderEvents/index.js
index d8f238e65c..cc472af4e5 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/index.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/index.js
@@ -20,7 +20,7 @@
 import type { ResponderConfig } from './ResponderSystem';
 
 import * as React from 'react';
-import * as ResponderSystem from './ResponderSystem';
+import StyleSheetContext from '../../exports/StyleSheet/StyleSheetContext';
 
 const emptyObject = {};
 let idCounter = 0;
@@ -36,16 +36,17 @@ function useStable<T>(getInitialValue: () => T): T {
 export default function useResponderEvents(hostRef: any, config: ResponderConfig = emptyObject) {
   const id = useStable(() => idCounter++);
   const isAttachedRef = React.useRef(false);
+  const styleContext = React.useContext(StyleSheetContext);
 
   // This is a separate effects so it doesn't run when the config changes.
   // On initial mount, attach global listeners if needed.
   // On unmount, remove node potentially attached to the Responder System.
   React.useEffect(() => {
-    ResponderSystem.attachListeners();
+    styleContext.responderSystem.attachListeners();
     return () => {
-      ResponderSystem.removeNode(id);
+      styleContext.responderSystem.removeNode(id);
     };
-  }, [id]);
+  }, [id, styleContext.responderSystem]);
 
   // Register and unregister with the Responder System as necessary
   React.useEffect(() => {
@@ -73,14 +74,16 @@ export default function useResponderEvents(hostRef: any, config: ResponderConfig
     const node = hostRef.current;
 
     if (requiresResponderSystem) {
-      ResponderSystem.addNode(id, node, config);
+      styleContext.responderSystem.addNode(id, node, config);
       isAttachedRef.current = true;
     } else if (isAttachedRef.current) {
-      ResponderSystem.removeNode(id);
+      styleContext.responderSystem.removeNode(id);
       isAttachedRef.current = false;
     }
-  }, [config, hostRef, id]);
+  }, [config, hostRef, id, styleContext.responderSystem]);
 
-  React.useDebugValue({ isResponder: hostRef.current === ResponderSystem.getResponderNode() });
+  React.useDebugValue({
+    isResponder: hostRef.current === styleContext.responderSystem.getResponderNode()
+  });
   React.useDebugValue(config);
 }
diff --git a/packages/react-native-web/src/vendor/renderRootContext.js b/packages/react-native-web/src/vendor/renderRootContext.js
index 939b6f800e..92ef5c0a66 100644
--- a/packages/react-native-web/src/vendor/renderRootContext.js
+++ b/packages/react-native-web/src/vendor/renderRootContext.js
@@ -10,26 +10,16 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import RootContext from '../exports/AppRegistry/rootContext';
-import StyleResolver from '../exports/StyleSheet/StyleResolver';
-
-function RootContextProvider({ children }) {
-    const resolver = new StyleResolver();
-    const rootContext = { rootTag: undefined, styleResolver: resolver };
-
-    React.useEffect(() => {
-        return function cleanup() {
-            resolver.clear();
-        }
-    })
+import StyleSheetManager from '../exports/StyleSheet/StyleSheetManager';
 
+function StyleSheetContextProvider({ children }) {
     return (
-        <RootContext.Provider value={rootContext}>
+        <StyleSheetManager>
             {children}
-        </RootContext.Provider>
+        </StyleSheetManager>
     );
 }
 
 export default function renderRootContext(element: React.ReactElement, options) {
-    return render(element, { wrapper: RootContextProvider, ...options });
-}
\ No newline at end of file
+    return render(element, { wrapper: StyleSheetContextProvider, ...options });
+}

From de850134ea5ac8c86a631cead783fb95e0f5a00d Mon Sep 17 00:00:00 2001
From: Ondrej Zaruba <onzruba@microsoft.com>
Date: Thu, 30 Dec 2021 16:35:14 +0100
Subject: [PATCH 4/5] First working version

---
 .../pages/docs/components/react-root-view.md  |  35 ++
 packages/examples/pages/_app.js               |   5 +-
 .../{multi-root => multi-window}/index.js     |  26 +-
 .../ActivityIndicator/__tests__/index-test.js |  36 +-
 .../ReactRootView.js}                         |  11 +-
 .../RootContext.js}                           |  12 +-
 .../__snapshots__/index-test.js.snap          |   4 +-
 .../exports/AppRegistry/renderApplication.js  |  10 +-
 .../src/exports/AppRegistry/renderRootView.js |  21 ++
 .../exports/Button/__tests__/index-test.js    |  14 +-
 .../exports/CheckBox/__tests__/index-test.js  |  36 +-
 .../src/exports/CheckBox/index.js             |   6 +-
 .../src/exports/Image/__tests__/index-test.js |  60 ++--
 .../src/exports/Image/index.js                |   6 +-
 .../ImageBackground/__tests__/index.js        |   8 +-
 .../src/exports/Modal/ModalAnimation.js       |   6 +-
 .../src/exports/Modal/ModalContent.js         |   8 +-
 .../src/exports/Modal/ModalFocusTrap.js       |  16 +-
 .../src/exports/Modal/ModalPortal.js          |  10 +-
 .../src/exports/Modal/__tests__/index.js      |  70 ++--
 .../src/exports/Picker/PickerItem.js          |   6 +-
 .../exports/Picker/__tests__/index-test.js    |  14 +-
 .../src/exports/Picker/index.js               |   6 +-
 .../exports/Pressable/__tests__/index-test.js |  40 +--
 .../ProgressBar/__tests__/index-test.js       |   6 +-
 .../ScrollView/__tests__/index-test.js        |  16 +-
 .../exports/Switch/__tests__/index-test.js    |  18 +-
 .../src/exports/Switch/index.js               |   6 +-
 .../src/exports/Text/__tests__/index-test.js  |  68 ++--
 .../src/exports/Text/index.js                 |   6 +-
 .../exports/TextInput/__tests__/index-test.js | 114 +++----
 .../src/exports/TextInput/index.js            |   6 +-
 .../__tests__/index-test.js                   |   6 +-
 .../src/exports/View/__tests__/index-test.js  |  58 ++--
 .../src/exports/View/index.js                 |   6 +-
 packages/react-native-web/src/index.js        |   1 +
 .../src/modules/usePlatformMethods/index.js   |   6 +-
 .../src/modules/usePressEvents/index.js       |  10 +-
 .../useResponderEvents/ResponderSystem.js     | 310 +++++++++---------
 .../ResponderTouchHistoryStore.js             |  38 ++-
 .../__tests__/index-test.js                   |  11 +-
 .../createResponderEvent.js                   |   4 +-
 .../src/modules/useResponderEvents/index.js   |  18 +-
 .../src/vendor/renderRootContext.js           |  25 --
 44 files changed, 615 insertions(+), 584 deletions(-)
 create mode 100644 packages/docs/src/pages/docs/components/react-root-view.md
 rename packages/examples/pages/{multi-root => multi-window}/index.js (74%)
 rename packages/react-native-web/src/exports/{StyleSheet/StyleSheetManager.js => AppRegistry/ReactRootView.js} (76%)
 rename packages/react-native-web/src/exports/{StyleSheet/StyleSheetContext.js => AppRegistry/RootContext.js} (61%)
 create mode 100644 packages/react-native-web/src/exports/AppRegistry/renderRootView.js
 delete mode 100644 packages/react-native-web/src/vendor/renderRootContext.js

diff --git a/packages/docs/src/pages/docs/components/react-root-view.md b/packages/docs/src/pages/docs/components/react-root-view.md
new file mode 100644
index 0000000000..3ec6284f1b
--- /dev/null
+++ b/packages/docs/src/pages/docs/components/react-root-view.md
@@ -0,0 +1,35 @@
+---
+title: ReactRootView
+date: Last Modified
+permalink: /docs/react-root-view/index.html
+eleventyNavigation:
+  key: ReactRootView
+  parent: Components
+---
+
+{% import "fragments/macros.html" as macro with context %}
+
+:::lead
+Root view component react-native-web app. This components manages HTML content of the window (css styles, root componet, event handling). By default this component is create in the AppRegistry, but you can use it if you want to render the react content into different native window.
+:::
+
+```jsx
+import { ImageBackground } from 'react-native';
+
+<ReactRootView {...props}>{children}</ReactRootView>;
+```
+
+---
+
+## API
+
+### Props
+
+{% call macro.prop('children', '?any') %}
+The children of a View element can be other elements and must not include strings (or components that render down to strings).
+{% endcall %}
+
+{% call macro.prop('rootTag', '?HTMLElement') %}
+The native element where the ReactRootView will be shown. 
+{% endcall %}
+
diff --git a/packages/examples/pages/_app.js b/packages/examples/pages/_app.js
index a72cc70a16..d3b7d894a2 100644
--- a/packages/examples/pages/_app.js
+++ b/packages/examples/pages/_app.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
-
-import StyleSheetManager from 'react-native-web/dist/cjs/exports/StyleSheet/StyleSheetManager';
+import { ReactRootView } from 'react-native-web';
 
 export default function Application({ Component, pageProps }) {
-  return <StyleSheetManager>{<Component {...pageProps} />}</StyleSheetManager>;
+  return <ReactRootView>{<Component {...pageProps} />}</ReactRootView>;
 }
diff --git a/packages/examples/pages/multi-root/index.js b/packages/examples/pages/multi-window/index.js
similarity index 74%
rename from packages/examples/pages/multi-root/index.js
rename to packages/examples/pages/multi-window/index.js
index 821682e374..407555a55f 100644
--- a/packages/examples/pages/multi-root/index.js
+++ b/packages/examples/pages/multi-window/index.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Button, StyleSheet, Text, View } from 'react-native';
-import StyleSheetManager from 'react-native-web/dist/cjs/exports/StyleSheet/StyleSheetManager';
+import { Button, StyleSheet, Text, View, ReactRootView } from 'react-native';
 
 import Example from '../../shared/example';
 
@@ -14,17 +13,16 @@ export function ChildWindowPage() {
 
   return (
     <View style={styles.childItems}>
-      <Button onPress={onClick} title="Click" />
       <Button onPress={onClick} title="Click" />
       <Text>{clicked ? 'Clicked!' : 'Click this button!'}</Text>
     </View>
   );
 }
 
-export default function MultiRootPage() {
+export default function MultiWindowPage() {
   const [rootTagContainer, setRootTagContainer] = React.useState(undefined);
 
-  function openWindow() {
+  const openWindow = () => {
     const childWindow = window.open('', 'Child window', 'left=100,top=100,width=640,height=480');
 
     const title = childWindow.document.createElement('title');
@@ -39,26 +37,30 @@ export default function MultiRootPage() {
     rootTag.style.padding = '0';
     childWindow.document.body.appendChild(rootTag);
 
+    childWindow.addEventListener('beforeunload', () => {
+      setRootTagContainer(undefined);
+    });
+
     setRootTagContainer(rootTag);
-  }
+  };
 
-  function closeWindow() {
+  const closeWindow = () => {
     setRootTagContainer(undefined);
-  }
+  };
 
   return (
     <Example title="Multi root">
       <View>
         <Text>Child Window example</Text>
         <View style={styles.buttons}>
-          <Button onPress={openWindow} title="Open window" />
-          <Button onPress={closeWindow} title="Close window" />
+          <Button disabled={!!rootTagContainer} onPress={openWindow} title="Open window" />
+          <Button disabled={!rootTagContainer} onPress={closeWindow} title="Close window" />
         </View>
         {rootTagContainer
           ? ReactDOM.createPortal(
-              <StyleSheetManager rootTag={rootTagContainer}>
+              <ReactRootView rootTag={rootTagContainer}>
                 <ChildWindowPage />
-              </StyleSheetManager>,
+              </ReactRootView>,
               rootTagContainer
             )
           : undefined}
diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js
index 0509c173c7..478625d57a 100644
--- a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js
@@ -4,12 +4,12 @@ import ActivityIndicator from '..';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/ActivityIndicator', () => {
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <ActivityIndicator accessibilityLabel="accessibility label" />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -18,34 +18,32 @@ describe('components/ActivityIndicator', () => {
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(
-        <ActivityIndicator accessibilityLiveRegion="polite" />
-      );
+      const { container } = renderRootView(<ActivityIndicator accessibilityLiveRegion="polite" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "animating"', () => {
     test('is "true"', () => {
-      const { container } = renderRootContext(<ActivityIndicator animating={true} />);
+      const { container } = renderRootView(<ActivityIndicator animating={true} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('is "false"', () => {
-      const { container } = renderRootContext(<ActivityIndicator animating={false} />);
+      const { container } = renderRootView(<ActivityIndicator animating={false} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('prop "color"', () => {
-    const { container } = renderRootContext(<ActivityIndicator color="red" />);
+    const { container } = renderRootView(<ActivityIndicator color="red" />);
     const svg = container.firstChild.querySelector('svg');
     expect(svg).toMatchSnapshot();
   });
 
   describe('prop "dataSet"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <ActivityIndicator dataSet={{ one: 'one', two: 'two' }} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -54,14 +52,14 @@ describe('components/ActivityIndicator', () => {
 
   describe('prop "hidesWhenStopped"', () => {
     test('is "true"', () => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <ActivityIndicator animating={false} hidesWhenStopped={true} />
       );
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('is "false"', () => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <ActivityIndicator animating={false} hidesWhenStopped={false} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -70,7 +68,7 @@ describe('components/ActivityIndicator', () => {
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<ActivityIndicator nativeID="123" />);
+      const { container } = renderRootView(<ActivityIndicator nativeID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -80,7 +78,7 @@ describe('components/ActivityIndicator', () => {
       const onBlur = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<ActivityIndicator onBlur={onBlur} ref={ref} />);
+        renderRootView(<ActivityIndicator onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       const body = createEventTarget(document.body);
@@ -97,7 +95,7 @@ describe('components/ActivityIndicator', () => {
       const onFocus = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<ActivityIndicator onFocus={onFocus} ref={ref} />);
+        renderRootView(<ActivityIndicator onFocus={onFocus} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -110,33 +108,33 @@ describe('components/ActivityIndicator', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      renderRootContext(<ActivityIndicator ref={ref} />);
+      renderRootView(<ActivityIndicator ref={ref} />);
       expect(ref).toBeCalled();
     });
   });
 
   describe('prop "size"', () => {
     test('is "large"', () => {
-      const { container } = renderRootContext(<ActivityIndicator size="large" />);
+      const { container } = renderRootView(<ActivityIndicator size="large" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('is a number', () => {
-      const { container } = renderRootContext(<ActivityIndicator size={30} />);
+      const { container } = renderRootView(<ActivityIndicator size={30} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<ActivityIndicator style={{ borderWidth: 5 }} />);
+      const { container } = renderRootView(<ActivityIndicator style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<ActivityIndicator testID="123" />);
+      const { container } = renderRootView(<ActivityIndicator testID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js b/packages/react-native-web/src/exports/AppRegistry/ReactRootView.js
similarity index 76%
rename from packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
rename to packages/react-native-web/src/exports/AppRegistry/ReactRootView.js
index 0461ce9276..93f92ad929 100644
--- a/packages/react-native-web/src/exports/StyleSheet/StyleSheetManager.js
+++ b/packages/react-native-web/src/exports/AppRegistry/ReactRootView.js
@@ -1,5 +1,6 @@
 /**
  * Copyright (c) Ondrej Zaruba.
+ * Copyright (c) Microsoft Corporation.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,18 +9,18 @@
  */
 
 import * as React from 'react';
-import StyleContext from './StyleSheetContext';
-import StyleResolver from './StyleResolver';
+import RootContext from './RootContext';
+import StyleResolver from '../StyleSheet/StyleResolver';
 import ResponderSystem from '../../modules/useResponderEvents/ResponderSystem';
 
-type Props = {
+export type ReactRootViewProps = {
   rootTag?: HTMLElement,
   children?: React.Children,
   _styleResolver?: StyleResolver,
   _responderSystem?: ResponderSystem
 };
 
-export default function StyleSheetManager(props: Props): React.Node {
+export default function ReactRootView(props: ReactRootView): React.Node {
   const styleResolver = React.useRef<StyleResolver>();
   if (!styleResolver.current) {
     styleResolver.current = props._styleResolver ?? new StyleResolver(props.rootTag);
@@ -44,5 +45,5 @@ export default function StyleSheetManager(props: Props): React.Node {
     responderSystem: responderSystem.current
   };
 
-  return <StyleContext.Provider value={styleContext}>{props.children}</StyleContext.Provider>;
+  return <RootContext.Provider value={styleContext}>{props.children}</RootContext.Provider>;
 }
diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheetContext.js b/packages/react-native-web/src/exports/AppRegistry/RootContext.js
similarity index 61%
rename from packages/react-native-web/src/exports/StyleSheet/StyleSheetContext.js
rename to packages/react-native-web/src/exports/AppRegistry/RootContext.js
index b7e974f85b..091700b0b4 100644
--- a/packages/react-native-web/src/exports/StyleSheet/StyleSheetContext.js
+++ b/packages/react-native-web/src/exports/AppRegistry/RootContext.js
@@ -1,5 +1,6 @@
 /**
  * Copyright (c) Ondrej Zaruba.
+ * Copyright (c) Microsoft Corporation.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,11 +10,12 @@
 
 import * as React from 'react';
 import ResponderSystem from '../../modules/useResponderEvents/ResponderSystem';
-import StyleResolver from './StyleResolver';
+import StyleResolver from '../StyleSheet/StyleResolver';
 
-const StyleSheetContext = React.createContext<{
+const RootContext = React.createContext<{
   styleResoler: StyleResolver,
-  responderSystem: ResponderSystem,
+  responderSystem: typeof ResponderSystem,
   rootTag?: Node
-}>(null);
-export default StyleSheetContext;
+}>();
+
+export default RootContext;
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
index e810261203..0a12b8bc76 100644
--- a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
@@ -18,7 +18,7 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
 `;
 
 exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = `
-<StyleSheetManager
+<ReactRootView
   _styleResolver={
     StyleResolver {
       "_sheet": Object {
@@ -40,7 +40,7 @@ exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`]
   <AppContainer>
     <NoopComponent />
   </AppContainer>
-</StyleSheetManager>
+</ReactRootView>
 `;
 
 exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = `
diff --git a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
index 94ca0cd50d..919262a6b1 100644
--- a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
+++ b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
@@ -14,7 +14,7 @@ import AppContainer from './AppContainer';
 import invariant from 'fbjs/lib/invariant';
 import render, { hydrate } from '../render';
 import StyleResolver from '../StyleSheet/StyleResolver';
-import StyleSheetManager from '../StyleSheet/StyleSheetManager';
+import ReactRootView from '../AppRegistry/ReactRootView';
 
 export default function renderApplication<Props: Object>(
   RootComponent: React.ComponentType<Props>,
@@ -32,11 +32,11 @@ export default function renderApplication<Props: Object>(
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
   renderFn(
-    <StyleSheetManager rootTag={rootTag}>
+    <ReactRootView rootTag={rootTag}>
       <AppContainer WrapperComponent={WrapperComponent}>
         <RootComponent {...initialProps} />
       </AppContainer>
-    </StyleSheetManager>,
+    </ReactRootView>,
     rootTag,
     callback
   );
@@ -49,11 +49,11 @@ export function getApplication(
 ): {| element: React.Node, getStyleElement: (Object) => React.Node |} {
   const styleResolver = new StyleResolver();
   const element = (
-    <StyleSheetManager _styleResolver={styleResolver} rootTag={document.body}>
+    <ReactRootView _styleResolver={styleResolver} rootTag={document.body}>
       <AppContainer WrapperComponent={WrapperComponent}>
         <RootComponent {...initialProps} />
       </AppContainer>
-    </StyleSheetManager>
+    </ReactRootView>
   );
   // Don't escape CSS text
   const getStyleElement = (props) => {
diff --git a/packages/react-native-web/src/exports/AppRegistry/renderRootView.js b/packages/react-native-web/src/exports/AppRegistry/renderRootView.js
new file mode 100644
index 0000000000..033a9ea67d
--- /dev/null
+++ b/packages/react-native-web/src/exports/AppRegistry/renderRootView.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Ondrej Zaruba.
+ * Copyright (c) Microsoft Corporation.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import ReactRootView from '../../exports/AppRegistry/ReactRootView';
+
+function ReactRootViewProvider({ children }) {
+  return <ReactRootView>{children}</ReactRootView>;
+}
+
+export default function renderRootView(element: React.ReactElement, options) {
+  return render(element, { wrapper: ReactRootViewProvider, ...options });
+}
diff --git a/packages/react-native-web/src/exports/Button/__tests__/index-test.js b/packages/react-native-web/src/exports/Button/__tests__/index-test.js
index 7e538d66eb..e0ca6cb633 100644
--- a/packages/react-native-web/src/exports/Button/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Button/__tests__/index-test.js
@@ -2,11 +2,11 @@ import Button from '..';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/Button', () => {
   test('prop "accessibilityLabel"', () => {
-    const { container } = renderRootContext(
+    const { container } = renderRootView(
       <Button accessibilityLabel="accessibility label" title="" />
     );
     expect(container.firstChild).toMatchSnapshot();
@@ -14,12 +14,12 @@ describe('components/Button', () => {
 
   test('prop "color"', () => {
     const color = 'rgb(0, 0, 255)';
-    const { container } = renderRootContext(<Button color={color} title="" />);
+    const { container } = renderRootView(<Button color={color} title="" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "disabled"', () => {
-    const { container } = renderRootContext(<Button disabled={true} title="" />);
+    const { container } = renderRootView(<Button disabled={true} title="" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -27,7 +27,7 @@ describe('components/Button', () => {
     const onPress = jest.fn();
     const ref = React.createRef();
     act(() => {
-      renderRootContext(<Button onPress={onPress} ref={ref} title="" />);
+      renderRootView(<Button onPress={onPress} ref={ref} title="" />);
     });
     const target = createEventTarget(ref.current);
     act(() => {
@@ -38,12 +38,12 @@ describe('components/Button', () => {
   });
 
   test('prop "testID"', () => {
-    const { container } = renderRootContext(<Button testID="123" title="" />);
+    const { container } = renderRootView(<Button testID="123" title="" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "title"', () => {
-    const { container } = renderRootContext(<Button title="Click me" />);
+    const { container } = renderRootView(<Button title="Click me" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
index f97bf8d3cd..caa4a2bb3b 100644
--- a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
@@ -4,7 +4,7 @@ import CheckBox from '../';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../AppRegistry/renderRootView';
 
 function findCheckbox(container) {
   return container.firstChild.querySelector('input');
@@ -13,42 +13,40 @@ function findCheckbox(container) {
 describe('CheckBox', () => {
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(
-        <CheckBox accessibilityLabel="accessibility label" />
-      );
+      const { container } = renderRootView(<CheckBox accessibilityLabel="accessibility label" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "color"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<CheckBox color="lightblue" value={true} />);
+      const { container } = renderRootView(<CheckBox color="lightblue" value={true} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "dataSet"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<CheckBox dataSet={{ one: 'one', two: 'two' }} />);
+      const { container } = renderRootView(<CheckBox dataSet={{ one: 'one', two: 'two' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "disabled"', () => {
     test('when "false" a default checkbox is rendered', () => {
-      const { container } = renderRootContext(<CheckBox />);
+      const { container } = renderRootView(<CheckBox />);
       expect(findCheckbox(container).disabled).toBe(false);
     });
 
     test('when "true" a disabled checkbox is rendered', () => {
-      const { container } = renderRootContext(<CheckBox disabled />);
+      const { container } = renderRootView(<CheckBox disabled />);
       expect(findCheckbox(container).disabled).toBe(true);
     });
   });
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<CheckBox nativeID="123" />);
+      const { container } = renderRootView(<CheckBox nativeID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -58,7 +56,7 @@ describe('CheckBox', () => {
       const onBlur = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<CheckBox onBlur={onBlur} ref={ref} />);
+        renderRootView(<CheckBox onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       const body = createEventTarget(document.body);
@@ -73,7 +71,7 @@ describe('CheckBox', () => {
   describe('prop "onChange"', () => {
     test('is called with the event object', () => {
       const onChange = jest.fn();
-      const { container } = renderRootContext(<CheckBox onChange={onChange} value={false} />);
+      const { container } = renderRootView(<CheckBox onChange={onChange} value={false} />);
       const checkbox = findCheckbox(container);
       checkbox.click(); // Needed to get ReactDOM to trigger 'change' event
       expect(onChange).toHaveBeenCalled();
@@ -85,7 +83,7 @@ describe('CheckBox', () => {
       const onFocus = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<CheckBox onFocus={onFocus} ref={ref} />);
+        renderRootView(<CheckBox onFocus={onFocus} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -98,7 +96,7 @@ describe('CheckBox', () => {
   describe('prop "onValueChange"', () => {
     test('when value is "false" it receives "true"', () => {
       const onValueChange = jest.fn();
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <CheckBox onValueChange={onValueChange} value={false} />
       );
       const checkbox = findCheckbox(container);
@@ -108,7 +106,7 @@ describe('CheckBox', () => {
 
     test('when value is "true" it receives "false"', () => {
       const onValueChange = jest.fn();
-      const { container } = renderRootContext(<CheckBox onValueChange={onValueChange} value />);
+      const { container } = renderRootView(<CheckBox onValueChange={onValueChange} value />);
       const checkbox = findCheckbox(container);
       checkbox.click(); // Needed to get ReactDOM to trigger 'change' event
       expect(onValueChange).toHaveBeenCalledWith(false);
@@ -118,33 +116,33 @@ describe('CheckBox', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      renderRootContext(<CheckBox ref={ref} />);
+      renderRootView(<CheckBox ref={ref} />);
       expect(ref).toBeCalled();
     });
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<CheckBox style={{ borderWidth: 5 }} />);
+      const { container } = renderRootView(<CheckBox style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<CheckBox testID="123" />);
+      const { container } = renderRootView(<CheckBox testID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "value"', () => {
     test('when "false" an unchecked checkbox is rendered', () => {
-      const { container } = renderRootContext(<CheckBox value={false} />);
+      const { container } = renderRootView(<CheckBox value={false} />);
       expect(findCheckbox(container).checked).toBe(false);
     });
 
     test('when "true" a checked checkbox is rendered', () => {
-      const { container } = renderRootContext(<CheckBox value />);
+      const { container } = renderRootView(<CheckBox value />);
       expect(findCheckbox(container).checked).toBe(true);
     });
   });
diff --git a/packages/react-native-web/src/exports/CheckBox/index.js b/packages/react-native-web/src/exports/CheckBox/index.js
index 6658c559a3..5d8433bb46 100644
--- a/packages/react-native-web/src/exports/CheckBox/index.js
+++ b/packages/react-native-web/src/exports/CheckBox/index.js
@@ -15,7 +15,7 @@ import * as React from 'react';
 import createElement from '../createElement';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
-import StyleSheetContext from '../StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 type CheckBoxProps = {
   ...ViewProps,
@@ -32,7 +32,7 @@ const CheckBox: React.AbstractComponent<
 > = React.forwardRef((props, forwardedRef) => {
   const { color, disabled, onChange, onValueChange, style, value, ...other } = props;
 
-  const styleContext = React.useContext(StyleSheetContext);
+  const rootContext = React.useContext(RootContext);
 
   function handleChange(event: Object) {
     const value = event.nativeEvent.target.checked;
@@ -64,7 +64,7 @@ const CheckBox: React.AbstractComponent<
       style: [styles.nativeControl, styles.cursorInherit],
       type: 'checkbox'
     },
-    styleContext.styleResolver
+    rootContext.styleResolver
   );
 
   return (
diff --git a/packages/react-native-web/src/exports/Image/__tests__/index-test.js b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
index 4f8918c073..d972784986 100644
--- a/packages/react-native-web/src/exports/Image/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
@@ -7,7 +7,7 @@ import Image from '../';
 import ImageLoader, { ImageUriCache } from '../../../modules/ImageLoader';
 import PixelRatio from '../../PixelRatio';
 import React from 'react';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 const originalImage = window.Image;
 
@@ -23,7 +23,7 @@ describe('components/Image', () => {
 
   test('prop "accessibilityLabel"', () => {
     const defaultSource = { uri: 'https://google.com/favicon.ico' };
-    const { container } = renderRootContext(
+    const { container } = renderRootView(
       <Image accessibilityLabel="accessibilityLabel" defaultSource={defaultSource} />
     );
     expect(container.firstChild).toMatchSnapshot();
@@ -31,21 +31,21 @@ describe('components/Image', () => {
 
   test('prop "blurRadius"', () => {
     const defaultSource = { uri: 'https://google.com/favicon.ico' };
-    const { container } = renderRootContext(<Image blurRadius={5} defaultSource={defaultSource} />);
+    const { container } = renderRootView(<Image blurRadius={5} defaultSource={defaultSource} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "defaultSource"', () => {
     test('sets background image when value is an object', () => {
       const defaultSource = { uri: 'https://google.com/favicon.ico' };
-      const { container } = renderRootContext(<Image defaultSource={defaultSource} />);
+      const { container } = renderRootView(<Image defaultSource={defaultSource} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('sets background image when value is a string', () => {
       // emulate require-ed asset
       const defaultSource = 'https://google.com/favicon.ico';
-      const { container } = renderRootContext(<Image defaultSource={defaultSource} />);
+      const { container } = renderRootView(<Image defaultSource={defaultSource} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -55,7 +55,7 @@ describe('components/Image', () => {
         height: 10,
         width: 20
       };
-      const { container } = renderRootContext(<Image defaultSource={defaultSource} />);
+      const { container } = renderRootView(<Image defaultSource={defaultSource} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -65,7 +65,7 @@ describe('components/Image', () => {
         height: 10,
         width: 20
       };
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <Image defaultSource={defaultSource} style={{ height: 20, width: 40 }} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -74,19 +74,17 @@ describe('components/Image', () => {
 
   test('prop "draggable"', () => {
     const defaultSource = { uri: 'https://google.com/favicon.ico' };
-    const { container } = renderRootContext(
-      <Image defaultSource={defaultSource} draggable={true} />
-    );
+    const { container } = renderRootView(<Image defaultSource={defaultSource} draggable={true} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "focusable"', () => {
-    const { container } = renderRootContext(<Image focusable={true} />);
+    const { container } = renderRootView(<Image focusable={true} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "nativeID"', () => {
-    const { container } = renderRootContext(<Image nativeID="nativeID" />);
+    const { container } = renderRootView(<Image nativeID="nativeID" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -99,7 +97,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      renderRootContext(
+      renderRootView(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -121,7 +119,7 @@ describe('components/Image', () => {
       const onLoadEndStub = jest.fn();
       const uri = 'https://test.com/img.jpg';
       ImageUriCache.add(uri);
-      renderRootContext(
+      renderRootView(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -138,7 +136,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      const { rerender } = renderRootContext(
+      const { rerender } = renderRootView(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -164,7 +162,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      const { rerender } = renderRootContext(
+      const { rerender } = renderRootView(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -190,7 +188,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      const { rerender } = renderRootContext(
+      const { rerender } = renderRootView(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -216,7 +214,7 @@ describe('components/Image', () => {
   describe('prop "resizeMode"', () => {
     ['contain', 'cover', 'none', 'repeat', 'stretch', undefined].forEach((resizeMode) => {
       test(`value "${resizeMode}"`, () => {
-        const { container } = renderRootContext(<Image resizeMode={resizeMode} />);
+        const { container } = renderRootView(<Image resizeMode={resizeMode} />);
         expect(container.firstChild).toMatchSnapshot();
       });
     });
@@ -226,14 +224,14 @@ describe('components/Image', () => {
     test('does not throw', () => {
       const sources = [null, '', {}, { uri: '' }, { uri: 'https://google.com' }];
       sources.forEach((source) => {
-        expect(() => renderRootContext(<Image source={source} />)).not.toThrow();
+        expect(() => renderRootView(<Image source={source} />)).not.toThrow();
       });
     });
 
     test('is not set immediately if the image has not already been loaded', () => {
       const uri = 'https://google.com/favicon.ico';
       const source = { uri };
-      const { container } = renderRootContext(<Image source={source} />);
+      const { container } = renderRootView(<Image source={source} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -244,7 +242,7 @@ describe('components/Image', () => {
       });
       return Image.prefetch(uri).then(() => {
         const source = { uri };
-        const { container } = renderRootContext(<Image source={source} />, {
+        const { container } = renderRootView(<Image source={source} />, {
           disableLifecycleMethods: true
         });
         expect(container.firstChild).toMatchSnapshot();
@@ -259,7 +257,7 @@ describe('components/Image', () => {
       ImageUriCache.add(uriTwo);
 
       // initial render
-      const { container, rerender } = renderRootContext(<Image source={{ uri: uriOne }} />);
+      const { container, rerender } = renderRootView(<Image source={{ uri: uriOne }} />);
       ImageUriCache.remove(uriOne);
       expect(container.firstChild).toMatchSnapshot();
       // props update
@@ -272,7 +270,7 @@ describe('components/Image', () => {
 
     test('is correctly updated when missing in initial render', () => {
       const uri = 'https://testing.com/img.jpg';
-      const { container, rerender } = renderRootContext(<Image />);
+      const { container, rerender } = renderRootView(<Image />);
       act(() => {
         rerender(<Image source={{ uri }} />);
       });
@@ -286,7 +284,7 @@ describe('components/Image', () => {
       ImageLoader.load = jest.fn().mockImplementationOnce((_, onLoad, onError) => {
         loadCallback = onLoad;
       });
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <Image defaultSource={{ uri: defaultUri }} source={{ uri }} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -305,12 +303,12 @@ describe('components/Image', () => {
       }));
 
       PixelRatio.get = jest.fn(() => 1.0);
-      let { container } = renderRootContext(<Image source={1} />);
+      let { container } = renderRootView(<Image source={1} />);
       expect(container.querySelector('img').src).toBe('http://localhost/static/img.png');
 
       act(() => {
         PixelRatio.get = jest.fn(() => 2.2);
-        ({ container } = renderRootContext(<Image source={1} />));
+        ({ container } = renderRootView(<Image source={1} />));
       });
       expect(container.querySelector('img').src).toBe('http://localhost/static/img@2x.png');
     });
@@ -318,12 +316,12 @@ describe('components/Image', () => {
 
   describe('prop "style"', () => {
     test('supports "resizeMode" property', () => {
-      const { container } = renderRootContext(<Image style={{ resizeMode: 'contain' }} />);
+      const { container } = renderRootView(<Image style={{ resizeMode: 'contain' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('supports "shadow" properties (convert to filter)', () => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <Image style={{ shadowColor: 'red', shadowOffset: { width: 1, height: 1 } }} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -331,14 +329,14 @@ describe('components/Image', () => {
 
     test('supports "tintcolor" property (convert to filter)', () => {
       const defaultSource = { uri: 'https://google.com/favicon.ico' };
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <Image defaultSource={defaultSource} style={{ tintColor: 'red' }} />
       );
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('removes other unsupported View styles', () => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <Image style={{ overlayColor: 'red', tintColor: 'blue' }} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -346,7 +344,7 @@ describe('components/Image', () => {
   });
 
   test('prop "testID"', () => {
-    const { container } = renderRootContext(<Image testID="testID" />);
+    const { container } = renderRootView(<Image testID="testID" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index 18d8c0b93d..4bb104f9a2 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -20,7 +20,7 @@ import PixelRatio from '../PixelRatio';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
 import View from '../View';
-import StyleSheetContext from '../StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 export type { ImageProps };
 
@@ -185,7 +185,7 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
     const hiddenImageRef = React.useRef(null);
     const filterRef = React.useRef(_filterId++);
     const requestRef = React.useRef(null);
-    const styleContext = React.useContext(StyleSheetContext);
+    const rootContext = React.useContext(RootContext);
     const shouldDisplaySource = state === LOADED || (state === LOADING && defaultSource == null);
     const [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle(
       style,
@@ -210,7 +210,7 @@ const Image: React.AbstractComponent<ImageProps, React.ElementRef<typeof View>>
             ref: hiddenImageRef,
             src: displayImageUri
           },
-          styleContext.styleResolver
+          rootContext.styleResolver
         )
       : null;
 
diff --git a/packages/react-native-web/src/exports/ImageBackground/__tests__/index.js b/packages/react-native-web/src/exports/ImageBackground/__tests__/index.js
index 4cd1b74422..90942f43c0 100644
--- a/packages/react-native-web/src/exports/ImageBackground/__tests__/index.js
+++ b/packages/react-native-web/src/exports/ImageBackground/__tests__/index.js
@@ -2,7 +2,7 @@
 
 import ImageBackground from '..';
 import React from 'react';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 import Text from '../../Text';
 
 function findImage(container) {
@@ -12,7 +12,7 @@ function findImage(container) {
 describe('components/ImageBackground', () => {
   describe('prop "children"', () => {
     test('render child content', () => {
-      const { getByText } = renderRootContext(
+      const { getByText } = renderRootView(
         <ImageBackground>
           <Text>Hello World!</Text>
         </ImageBackground>
@@ -24,7 +24,7 @@ describe('components/ImageBackground', () => {
   describe('prop "imageStyle"', () => {
     test('sets the style of the underlying Image', () => {
       const imageStyle = { width: 40, height: 60 };
-      const { container } = renderRootContext(<ImageBackground imageStyle={imageStyle} />);
+      const { container } = renderRootView(<ImageBackground imageStyle={imageStyle} />);
       expect(findImage(container).getAttribute('style')).toBe('height: 60px; width: 40px;');
     });
   });
@@ -32,7 +32,7 @@ describe('components/ImageBackground', () => {
   describe('prop "style"', () => {
     test('sets the style of the container View', () => {
       const style = { margin: 40 };
-      const { container } = renderRootContext(<ImageBackground style={style} />);
+      const { container } = renderRootView(<ImageBackground style={style} />);
       expect(container.firstChild.getAttribute('style')).toEqual('margin: 40px 40px 40px 40px;');
     });
   });
diff --git a/packages/react-native-web/src/exports/Modal/ModalAnimation.js b/packages/react-native-web/src/exports/Modal/ModalAnimation.js
index ef5e44c12d..33c82bc11f 100644
--- a/packages/react-native-web/src/exports/Modal/ModalAnimation.js
+++ b/packages/react-native-web/src/exports/Modal/ModalAnimation.js
@@ -11,7 +11,7 @@
 import * as React from 'react';
 import StyleSheet from '../StyleSheet';
 import createElement from '../createElement';
-import StyleSheetContext from '../StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 const ANIMATION_DURATION = 300;
 
@@ -38,7 +38,7 @@ function ModalAnimation(props: ModalAnimationProps): React.Node {
 
   const [isRendering, setIsRendering] = React.useState(false);
   const wasVisible = React.useRef(false);
-  const styleContext = React.useContext(StyleSheetContext);
+  const rootContext = React.useContext(RootContext);
 
   const isAnimated = animationType && animationType !== 'none';
 
@@ -83,7 +83,7 @@ function ModalAnimation(props: ModalAnimationProps): React.Node {
           onAnimationEnd: animationEndCallback,
           children
         },
-        styleContext.styleResolver
+        rootContext.styleResolver
       )
     : null;
 }
diff --git a/packages/react-native-web/src/exports/Modal/ModalContent.js b/packages/react-native-web/src/exports/Modal/ModalContent.js
index 4044dae490..2e66625a1c 100644
--- a/packages/react-native-web/src/exports/Modal/ModalContent.js
+++ b/packages/react-native-web/src/exports/Modal/ModalContent.js
@@ -12,7 +12,7 @@ import * as React from 'react';
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import View from '../View';
 import StyleSheet from '../StyleSheet';
-import StyleSheetContext from '../StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 export type ModalContentProps = {|
   active?: ?(boolean | (() => boolean)),
@@ -26,11 +26,11 @@ const ModalContent: React.AbstractComponent<
   React.ElementRef<typeof View>
 > = React.forwardRef((props, forwardedRef) => {
   const { active, children, onRequestClose, transparent } = props;
-  const styleContext = React.useContext(StyleSheetContext);
+  const rootContext = React.useContext(RootContext);
 
   React.useEffect(() => {
     if (canUseDOM) {
-      const document = styleContext.rootTag?.ownerDocument ?? window.document;
+      const document = rootContext.rootTag?.ownerDocument ?? window.document;
       const closeOnEscape = (e: KeyboardEvent) => {
         if (active && e.key === 'Escape') {
           e.stopPropagation();
@@ -42,7 +42,7 @@ const ModalContent: React.AbstractComponent<
       document.addEventListener('keyup', closeOnEscape, false);
       return () => document.removeEventListener('keyup', closeOnEscape, false);
     }
-  }, [active, onRequestClose, styleContext.rootTag]);
+  }, [active, onRequestClose, rootContext.rootTag]);
 
   const style = React.useMemo(() => {
     return [styles.modal, transparent ? styles.modalTransparent : styles.modalOpaque];
diff --git a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
index b8af684666..4fb37c00d2 100644
--- a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
+++ b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
@@ -14,7 +14,7 @@ import View from '../View';
 import createElement from '../createElement';
 import StyleSheet from '../StyleSheet';
 import UIManager from '../UIManager';
-import StyleSheetContext from '../StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 /**
  * This Component is used to "wrap" the modal we're opening
@@ -25,7 +25,7 @@ import StyleSheetContext from '../StyleSheet/StyleSheetContext';
  */
 
 const FocusBracket = () => {
-  const styleContext = React.useContext(StyleSheetContext);
+  const rootContext = React.useContext(RootContext);
   return createElement(
     'div',
     {
@@ -33,7 +33,7 @@ const FocusBracket = () => {
       tabIndex: 0,
       style: styles.focusBracket
     },
-    styleContext.styleResolver
+    rootContext.styleResolver
   );
 };
 
@@ -78,7 +78,7 @@ export type ModalFocusTrapProps = {|
 
 const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps): React.Node => {
   const trapElementRef = React.useRef<?HTMLElement>();
-  const styleContext = React.useContext(StyleSheetContext);
+  const rootContext = React.useContext(RootContext);
   const focusRef = React.useRef<{ trapFocusInProgress: boolean, lastFocusedElement: ?HTMLElement }>(
     {
       trapFocusInProgress: false,
@@ -88,7 +88,7 @@ const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps): React.Node =
 
   React.useEffect(() => {
     if (canUseDOM) {
-      const document = styleContext.rootTag?.ownerDocument ?? window.document;
+      const document = rootContext.rootTag?.ownerDocument ?? window.document;
       const trapFocus = () => {
         // We should not trap focus if:
         // - The modal hasn't fully initialized with an HTMLElement ref
@@ -131,14 +131,14 @@ const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps): React.Node =
       document.addEventListener('focus', trapFocus, true);
       return () => document.removeEventListener('focus', trapFocus, true);
     }
-  }, [active, styleContext.rootTag]);
+  }, [active, rootContext.rootTag]);
 
   // To be fully compliant with WCAG we need to refocus element that triggered opening modal
   // after closing it
   React.useEffect(
     function () {
       if (canUseDOM) {
-        const document = styleContext.rootTag?.ownerDocument ?? window.document;
+        const document = rootContext.rootTag?.ownerDocument ?? window.document;
         const lastFocusedElementOutsideTrap = document.activeElement;
         return function () {
           if (lastFocusedElementOutsideTrap && document.contains(lastFocusedElementOutsideTrap)) {
@@ -147,7 +147,7 @@ const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps): React.Node =
         };
       }
     },
-    [styleContext.rootTag]
+    [rootContext.rootTag]
   );
 
   return (
diff --git a/packages/react-native-web/src/exports/Modal/ModalPortal.js b/packages/react-native-web/src/exports/Modal/ModalPortal.js
index 7c2de7599e..7782d5e7d9 100644
--- a/packages/react-native-web/src/exports/Modal/ModalPortal.js
+++ b/packages/react-native-web/src/exports/Modal/ModalPortal.js
@@ -11,7 +11,7 @@
 import * as React from 'react';
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import ReactDOM from 'react-dom';
-import StyleSheetContext from '../StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 export type ModalPortalProps = {|
   children: any
@@ -20,10 +20,10 @@ export type ModalPortalProps = {|
 function ModalPortal(props: ModalPortalProps): React.Node {
   const { children } = props;
   const elementRef = React.useRef(null);
-  const styleContext = React.useContext(StyleSheetContext);
+  const rootContext = React.useContext(RootContext);
 
   if (canUseDOM && !elementRef.current) {
-    const document = styleContext.rootTag?.ownerDocument ?? window.document;
+    const document = rootContext.rootTag?.ownerDocument ?? window.document;
     const element = document.createElement('div');
 
     if (element && document.body) {
@@ -35,14 +35,14 @@ function ModalPortal(props: ModalPortalProps): React.Node {
   React.useEffect(() => {
     if (canUseDOM) {
       return () => {
-        const document = styleContext.rootTag?.ownerDocument ?? window.document;
+        const document = rootContext.rootTag?.ownerDocument ?? window.document;
         if (document.body && elementRef.current) {
           document.body.removeChild(elementRef.current);
           elementRef.current = null;
         }
       };
     }
-  }, [styleContext.rootTag]);
+  }, [rootContext.rootTag]);
 
   return elementRef.current && canUseDOM
     ? ReactDOM.createPortal(children, elementRef.current)
diff --git a/packages/react-native-web/src/exports/Modal/__tests__/index.js b/packages/react-native-web/src/exports/Modal/__tests__/index.js
index 566355ce53..5cca2419ed 100644
--- a/packages/react-native-web/src/exports/Modal/__tests__/index.js
+++ b/packages/react-native-web/src/exports/Modal/__tests__/index.js
@@ -3,11 +3,11 @@
 import Modal from '..';
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/Modal', () => {
   test('visible by default', () => {
-    const { getByTestId } = renderRootContext(
+    const { getByTestId } = renderRootView(
       <Modal>
         <a data-testid={'inside'} href={'#hello'}>
           Hello
@@ -20,7 +20,7 @@ describe('components/Modal', () => {
   });
 
   test('render children when visible', () => {
-    const { getByTestId } = renderRootContext(
+    const { getByTestId } = renderRootView(
       <Modal visible={true}>
         <a data-testid={'inside'} href={'#hello'}>
           Hello
@@ -33,7 +33,7 @@ describe('components/Modal', () => {
   });
 
   test('does not render children when not visible', () => {
-    const { container } = renderRootContext(
+    const { container } = renderRootView(
       <Modal visible={false}>
         <a data-testid={'inside'} href={'#hello'}>
           Hello
@@ -44,7 +44,7 @@ describe('components/Modal', () => {
   });
 
   test('invisible modals will not be the active modal', () => {
-    const { getByTestId } = renderRootContext(
+    const { getByTestId } = renderRootView(
       <>
         <Modal key={'modal-a'} visible={true}>
           <a data-testid={'inside-a'} href={'#hello'}>
@@ -65,7 +65,7 @@ describe('components/Modal', () => {
   });
 
   test('multiple modals will only mark one as active', () => {
-    const { getByTestId } = renderRootContext(
+    const { getByTestId } = renderRootView(
       <>
         <Modal key={'modal-a'} visible={true}>
           <a data-testid={'inside-a'} href={'#hello'}>
@@ -86,7 +86,7 @@ describe('components/Modal', () => {
   });
 
   test('modal active state changes propogate', () => {
-    const { rerender, getByTestId } = renderRootContext(
+    const { rerender, getByTestId } = renderRootView(
       <>
         <Modal key={'modal-a'} visible={true}>
           <a data-testid={'inside-a'} href={'#hello'}>
@@ -123,7 +123,7 @@ describe('components/Modal', () => {
   });
 
   test('removed modal sets others active state', () => {
-    const { rerender, getByTestId } = renderRootContext(
+    const { rerender, getByTestId } = renderRootView(
       <>
         <Modal key={'modal-a'} visible={true}>
           <a data-testid={'inside-a'} href={'#hello'}>
@@ -154,31 +154,31 @@ describe('components/Modal', () => {
 
   test('executes onShow callback when initially showing', () => {
     const onShowCallback = jest.fn();
-    renderRootContext(<Modal onShow={onShowCallback} visible={true} />);
+    renderRootView(<Modal onShow={onShowCallback} visible={true} />);
     expect(onShowCallback).toBeCalledTimes(1);
   });
 
   test('does not execute onShow callback when initially hidden', () => {
     const onShowCallback = jest.fn();
-    renderRootContext(<Modal onShow={onShowCallback} visible={false} />);
+    renderRootView(<Modal onShow={onShowCallback} visible={false} />);
     expect(onShowCallback).toBeCalledTimes(0);
   });
 
   test('does not execute onDismiss callback when initially hidden', () => {
     const onDismissCallback = jest.fn();
-    renderRootContext(<Modal onDismiss={onDismissCallback} visible={false} />);
+    renderRootView(<Modal onDismiss={onDismissCallback} visible={false} />);
     expect(onDismissCallback).toBeCalledTimes(0);
   });
 
   test('does not execute onDismiss callback when initially showing', () => {
     const onDismissCallback = jest.fn();
-    renderRootContext(<Modal onDismiss={onDismissCallback} visible={true} />);
+    renderRootView(<Modal onDismiss={onDismissCallback} visible={true} />);
     expect(onDismissCallback).toBeCalledTimes(0);
   });
 
   test('executes onShow callback when visibility changes', () => {
     const onShowCallback = jest.fn();
-    const { rerender } = renderRootContext(<Modal onShow={onShowCallback} visible={false} />);
+    const { rerender } = renderRootView(<Modal onShow={onShowCallback} visible={false} />);
     expect(onShowCallback).toBeCalledTimes(0);
     rerender(<Modal onShow={onShowCallback} visible={true} />);
     expect(onShowCallback).toBeCalledTimes(1);
@@ -186,14 +186,14 @@ describe('components/Modal', () => {
 
   test('executes onDismiss callback when visibility changes', () => {
     const onDismissCallback = jest.fn();
-    const { rerender } = renderRootContext(<Modal onDismiss={onDismissCallback} visible={true} />);
+    const { rerender } = renderRootView(<Modal onDismiss={onDismissCallback} visible={true} />);
     expect(onDismissCallback).toBeCalledTimes(0);
     rerender(<Modal onDismiss={onDismissCallback} visible={false} />);
     expect(onDismissCallback).toBeCalledTimes(1);
   });
 
   test('animationTypes none is the same as omitting', () => {
-    const { rerender, baseElement } = renderRootContext(
+    const { rerender, baseElement } = renderRootView(
       <Modal animationType={'none'} visible={true} />
     );
     const animationNoneElement = baseElement.lastChild.lastChild;
@@ -217,7 +217,7 @@ describe('components/Modal', () => {
   });
 
   test('creates view with role="modal" when active', () => {
-    const { baseElement } = renderRootContext(
+    const { baseElement } = renderRootView(
       <Modal visible={true}>
         <a href={'#hello'}>Hello</a>
       </Modal>
@@ -229,7 +229,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is trapped by default', () => {
-    renderRootContext(
+    renderRootView(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -249,7 +249,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is trapped when active flag changes', () => {
-    const { rerender } = renderRootContext(
+    const { rerender } = renderRootView(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -284,7 +284,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is brought back to the element that triggered modal after closing', () => {
-    const { rerender } = renderRootContext(
+    const { rerender } = renderRootView(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -343,7 +343,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is brought back to the body when element that triggered modal is removed from the DOM after closing modal', () => {
-    const { rerender } = renderRootContext(
+    const { rerender } = renderRootView(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -399,7 +399,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is trapped when active', () => {
-    renderRootContext(
+    renderRootView(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -419,7 +419,7 @@ describe('components/Modal', () => {
   });
 
   test('focus wraps forwards', () => {
-    renderRootContext(
+    renderRootView(
       <>
         <Modal visible={true}>
           <a data-testid={'inside-a'} href={'#'}>
@@ -445,7 +445,7 @@ describe('components/Modal', () => {
   });
 
   test('focus wraps backwards', () => {
-    renderRootContext(
+    renderRootView(
       <>
         <Modal visible={true}>
           <a data-testid={'inside-a'} href={'#'}>
@@ -471,7 +471,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is trapped without contents', () => {
-    renderRootContext(
+    renderRootView(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -488,7 +488,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is not trapped when inactive', () => {
-    renderRootContext(
+    renderRootView(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -506,7 +506,7 @@ describe('components/Modal', () => {
   });
 
   test('creates portal outside of the react container', () => {
-    const { container, baseElement } = renderRootContext(
+    const { container, baseElement } = renderRootView(
       <Modal visible={true}>
         <a data-testid={'hello'} href={'#hello'}>
           Hello World
@@ -521,7 +521,7 @@ describe('components/Modal', () => {
   });
 
   test('portal created is a div', () => {
-    const { baseElement } = renderRootContext(
+    const { baseElement } = renderRootView(
       <Modal visible={true}>
         <a data-testid={'hello'} href={'#hello'}>
           Hello World
@@ -543,7 +543,7 @@ describe('components/Modal', () => {
       );
     }
 
-    renderRootContext(<TestComponent />);
+    renderRootView(<TestComponent />);
 
     expect(spy).toHaveBeenNthCalledWith(1, 'ref');
     expect(spy).toHaveBeenNthCalledWith(2, 'mount');
@@ -552,7 +552,7 @@ describe('components/Modal', () => {
   test('escape key fires onRequestClose', () => {
     const spy = jest.fn();
 
-    renderRootContext(<Modal onRequestClose={spy} visible={true} />);
+    renderRootView(<Modal onRequestClose={spy} visible={true} />);
 
     fireEvent.keyUp(document, { key: 'Escape' });
 
@@ -563,7 +563,7 @@ describe('components/Modal', () => {
     const spyA = jest.fn();
     const spyB = jest.fn();
 
-    renderRootContext(
+    renderRootView(
       <>
         <Modal onRequestClose={spyA} visible={true} />
         <Modal onRequestClose={spyB} visible={true} />
@@ -580,7 +580,7 @@ describe('components/Modal', () => {
     const spyA = jest.fn();
     const spyB = jest.fn();
 
-    const { getByTestId, rerender } = renderRootContext(
+    const { getByTestId, rerender } = renderRootView(
       <>
         <Modal animationType={'slide'} onRequestClose={spyA} visible={false}>
           <a data-testid={'a'} />
@@ -605,10 +605,10 @@ describe('components/Modal', () => {
     );
 
     // This is kind of ugly but I can't find a better way to target just the animation div
-    const animationAElement =
-      getByTestId('a').parentElement.parentElement.parentElement.parentElement;
-    const animationBElement =
-      getByTestId('b').parentElement.parentElement.parentElement.parentElement;
+    const animationAElement = getByTestId('a').parentElement.parentElement.parentElement
+      .parentElement;
+    const animationBElement = getByTestId('b').parentElement.parentElement.parentElement
+      .parentElement;
 
     fireEvent.animationEnd(animationAElement);
     fireEvent.animationEnd(animationBElement);
diff --git a/packages/react-native-web/src/exports/Picker/PickerItem.js b/packages/react-native-web/src/exports/Picker/PickerItem.js
index 020c3250f2..f12e54b119 100644
--- a/packages/react-native-web/src/exports/Picker/PickerItem.js
+++ b/packages/react-native-web/src/exports/Picker/PickerItem.js
@@ -10,7 +10,7 @@
 
 import { useContext } from 'react';
 import type { ColorValue } from '../../types';
-import StyleSheetContext from '../StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 import createElement from '../createElement';
 
@@ -24,7 +24,7 @@ type Props = {
 export default function PickerItem(props: Props) {
   const { color, label, testID, value } = props;
   const style = { color };
-  const styleContext = useContext(StyleSheetContext);
+  const rootContext = useContext(RootContext);
 
-  return createElement('option', { style, testID, value }, styleContext.styleResolver, label);
+  return createElement('option', { style, testID, value }, rootContext.styleResolver, label);
 }
diff --git a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
index 30008b0f7b..940f2fec57 100644
--- a/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Picker/__tests__/index-test.js
@@ -1,7 +1,7 @@
 /* eslint-env jasmine, jest */
 
 import React from 'react';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 import Picker from '..';
 
 function findSelect(container) {
@@ -17,13 +17,13 @@ describe('components/Picker', () => {
           <Picker.Item label="label-2" value="value-2" />
         </Picker>
       );
-      const { container } = renderRootContext(picker);
+      const { container } = renderRootView(picker);
       expect(container.firstChild.firstChild).toMatchSnapshot();
     });
 
     test('items', () => {
       const pickerItem = <Picker.Item label="label-1" value="value-1" />;
-      const { container } = renderRootContext(pickerItem);
+      const { container } = renderRootView(pickerItem);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -36,7 +36,7 @@ describe('components/Picker', () => {
           <Picker.Item label="label-2" value="value-2" />
         </Picker>
       );
-      const { container } = renderRootContext(picker);
+      const { container } = renderRootView(picker);
       expect(findSelect(container).disabled).toBe(true);
     });
   });
@@ -50,7 +50,7 @@ describe('components/Picker', () => {
           <Picker.Item label="label-2" value="value-2" />
         </Picker>
       );
-      const { container } = renderRootContext(picker);
+      const { container } = renderRootView(picker);
       const select = findSelect(container);
       // mock change event
       select.selectedIndex = '1';
@@ -69,7 +69,7 @@ describe('components/Picker', () => {
           <Picker.Item label="label-2" value="value-2" />
         </Picker>
       );
-      const { container } = renderRootContext(picker);
+      const { container } = renderRootView(picker);
       expect(findSelect(container).value).toBe('value-2');
     });
 
@@ -80,7 +80,7 @@ describe('components/Picker', () => {
           <Picker.Item label="label-2" value={22} />
         </Picker>
       );
-      const { container } = renderRootContext(picker);
+      const { container } = renderRootView(picker);
       expect(findSelect(container).value).toBe('22');
     });
   });
diff --git a/packages/react-native-web/src/exports/Picker/index.js b/packages/react-native-web/src/exports/Picker/index.js
index 945aa7e3ff..cd4b628d20 100644
--- a/packages/react-native-web/src/exports/Picker/index.js
+++ b/packages/react-native-web/src/exports/Picker/index.js
@@ -17,7 +17,7 @@ import useMergeRefs from '../../modules/useMergeRefs';
 import usePlatformMethods from '../../modules/usePlatformMethods';
 import PickerItem from './PickerItem';
 import StyleSheet from '../StyleSheet';
-import StyleSheetContext from '../StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 type PickerProps = {
   ...ViewProps,
@@ -52,7 +52,7 @@ const Picker: React.AbstractComponent<
   } = props;
 
   const hostRef = React.useRef(null);
-  const styleContext = React.useContext(StyleSheetContext);
+  const rootContext = React.useContext(RootContext);
 
   function handleChange(e: Object) {
     const { selectedIndex, value } = e.target;
@@ -78,7 +78,7 @@ const Picker: React.AbstractComponent<
 
   supportedProps.ref = setRef;
 
-  return createElement('select', supportedProps, styleContext.styleResolver);
+  return createElement('select', supportedProps, rootContext.styleResolver);
 });
 
 // $FlowFixMe
diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
index 01d9d71546..12df477147 100644
--- a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
@@ -4,58 +4,58 @@ import React from 'react';
 import Pressable from '../';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/Pressable', () => {
   test('default', () => {
-    const { container } = renderRootContext(<Pressable />);
+    const { container } = renderRootView(<Pressable />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Pressable accessibilityLabel="label" />);
+      const { container } = renderRootView(<Pressable accessibilityLabel="label" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Pressable accessibilityLiveRegion="polite" />);
+      const { container } = renderRootView(<Pressable accessibilityLiveRegion="polite" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityRole"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Pressable accessibilityRole="none" />);
+      const { container } = renderRootView(<Pressable accessibilityRole="none" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value is "button"', () => {
-      const { container } = renderRootContext(<Pressable accessibilityRole="button" />);
+      const { container } = renderRootView(<Pressable accessibilityRole="button" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value alters HTML element', () => {
-      const { container } = renderRootContext(<Pressable accessibilityRole="article" />);
+      const { container } = renderRootView(<Pressable accessibilityRole="article" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('prop "disabled"', () => {
-    const { container } = renderRootContext(<Pressable disabled={true} />);
+    const { container } = renderRootView(<Pressable disabled={true} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "href"', () => {
-    const { container } = renderRootContext(<Pressable href="#href" />);
+    const { container } = renderRootView(<Pressable href="#href" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Pressable nativeID="nativeID" />);
+      const { container } = renderRootView(<Pressable nativeID="nativeID" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -66,7 +66,7 @@ describe('components/Pressable', () => {
     const onFocus = jest.fn();
     const ref = React.createRef();
     act(() => {
-      ({ container } = renderRootContext(
+      ({ container } = renderRootView(
         <Pressable
           children={({ focused }) => (focused ? <div data-testid="focus-content" /> : null)}
           onBlur={onBlur}
@@ -96,7 +96,7 @@ describe('components/Pressable', () => {
     const onFocus = jest.fn();
     const ref = React.createRef();
     act(() => {
-      renderRootContext(<Pressable disabled={true} onBlur={onBlur} onFocus={onFocus} ref={ref} />);
+      renderRootView(<Pressable disabled={true} onBlur={onBlur} onFocus={onFocus} ref={ref} />);
     });
     const target = createEventTarget(ref.current);
     const body = createEventTarget(document.body);
@@ -116,7 +116,7 @@ describe('components/Pressable', () => {
     const onHoverOut = jest.fn();
     const ref = React.createRef();
     act(() => {
-      ({ container } = renderRootContext(
+      ({ container } = renderRootView(
         <Pressable
           children={({ hovered }) => (hovered ? <div data-testid="hover-content" /> : null)}
           onHoverIn={onHoverIn}
@@ -148,7 +148,7 @@ describe('components/Pressable', () => {
     const onPressOut = jest.fn();
     const ref = React.createRef();
     act(() => {
-      ({ container } = renderRootContext(
+      ({ container } = renderRootView(
         <Pressable
           children={({ pressed }) => (pressed ? <div data-testid="press-content" /> : null)}
           onContextMenu={onContextMenu}
@@ -206,7 +206,7 @@ describe('components/Pressable', () => {
     }
 
     act(() => {
-      ({ container } = renderRootContext(<TestCase />));
+      ({ container } = renderRootView(<TestCase />));
     });
     const target = createEventTarget(ref.current);
     expect(container.firstChild).toMatchSnapshot();
@@ -228,14 +228,14 @@ describe('components/Pressable', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      renderRootContext(<Pressable ref={ref} />);
+      renderRootView(<Pressable ref={ref} />);
       expect(ref).toBeCalled();
     });
 
     test('node has imperative methods', () => {
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<Pressable ref={ref} />);
+        renderRootView(<Pressable ref={ref} />);
       });
       const node = ref.current;
       expect(typeof node.measure === 'function');
@@ -246,20 +246,20 @@ describe('components/Pressable', () => {
   });
 
   test('prop "pointerEvents"', () => {
-    const { container } = renderRootContext(<Pressable pointerEvents="box-only" />);
+    const { container } = renderRootView(<Pressable pointerEvents="box-only" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Pressable style={{ borderWidth: 5 }} />);
+      const { container } = renderRootView(<Pressable style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Pressable testID="123" />);
+      const { container } = renderRootView(<Pressable testID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
diff --git a/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js b/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js
index 8a4dff8e7a..b05df495ef 100644
--- a/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/ProgressBar/__tests__/index-test.js
@@ -1,18 +1,18 @@
 /* eslint-env jasmine, jest */
 
 import React from 'react';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 import ProgressBar from '..';
 
 describe('components/ProgressBar', () => {
   describe('progress', () => {
     test('value as percentage is set to "aria-valuenow"', () => {
-      const { container } = renderRootContext(<ProgressBar progress={0.5} />);
+      const { container } = renderRootView(<ProgressBar progress={0.5} />);
       expect(container.firstChild.getAttribute('aria-valuenow')).toBe('50');
     });
 
     test('is ignored when "indeterminate" is "true"', () => {
-      const { container } = renderRootContext(<ProgressBar indeterminate progress={0.5} />);
+      const { container } = renderRootView(<ProgressBar indeterminate progress={0.5} />);
       expect(container.firstChild.getAttribute('aria-valuenow')).toBe(null);
     });
   });
diff --git a/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js b/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
index 78bf620463..74162bfdac 100644
--- a/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
@@ -3,7 +3,7 @@ import ScrollView from '../';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
 import { findDOMNode } from 'react-dom';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/ScrollView', () => {
   describe('prop "onScroll"', () => {
@@ -11,7 +11,7 @@ describe('components/ScrollView', () => {
       const onScroll = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<ScrollView onScroll={onScroll} ref={ref} scrollEventThrottle={16} />);
+        renderRootView(<ScrollView onScroll={onScroll} ref={ref} scrollEventThrottle={16} />);
       });
       const target = createEventTarget(findDOMNode(ref.current));
       act(() => {
@@ -25,7 +25,7 @@ describe('components/ScrollView', () => {
       const onScroll = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(
+        renderRootView(
           <ScrollView onScroll={onScroll} scrollEventThrottle={16}>
             <div ref={ref} />
           </ScrollView>
@@ -42,7 +42,7 @@ describe('components/ScrollView', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      renderRootContext(<ScrollView ref={ref} />);
+      renderRootView(<ScrollView ref={ref} />);
       expect(ref).toBeCalled();
     });
 
@@ -50,7 +50,7 @@ describe('components/ScrollView', () => {
       const ref = jest.fn();
       let rerender;
       act(() => {
-        ({ rerender } = renderRootContext(
+        ({ rerender } = renderRootView(
           <ScrollView nativeID="123" ref={ref} style={{ borderWidth: 5 }} />
         ));
       });
@@ -64,7 +64,7 @@ describe('components/ScrollView', () => {
     test('node has imperative methods', () => {
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<ScrollView ref={ref} />);
+        renderRootView(<ScrollView ref={ref} />);
       });
       const node = ref.current;
 
@@ -91,12 +91,12 @@ describe('components/ScrollView', () => {
 
   describe('prop "refreshControl"', () => {
     test('without', () => {
-      const { container } = renderRootContext(<ScrollView style={{ backgroundColor: 'red' }} />);
+      const { container } = renderRootView(<ScrollView style={{ backgroundColor: 'red' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('with', () => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <ScrollView
           refreshControl={<div id="refresh-control" />}
           style={{ backgroundColor: 'red' }}
diff --git a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
index da57704c4e..9987604e1d 100644
--- a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
@@ -1,7 +1,7 @@
 /* eslint-env jasmine, jest */
 
 import React from 'react';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 import Switch from '..';
 
 function findCheckbox(container) {
@@ -10,18 +10,18 @@ function findCheckbox(container) {
 
 describe('components/Switch', () => {
   test('accessibilityLabel is applied to native checkbox', () => {
-    const { container } = renderRootContext(<Switch accessibilityLabel="switch" />);
+    const { container } = renderRootView(<Switch accessibilityLabel="switch" />);
     expect(findCheckbox(container).getAttribute('aria-label')).toBe('switch');
   });
 
   describe('disabled', () => {
     test('when "false" a default checkbox is rendered', () => {
-      const { container } = renderRootContext(<Switch />);
+      const { container } = renderRootView(<Switch />);
       expect(findCheckbox(container).disabled).toBe(false);
     });
 
     test('when "true" a disabled checkbox is rendered', () => {
-      const { container } = renderRootContext(<Switch disabled />);
+      const { container } = renderRootView(<Switch disabled />);
       expect(findCheckbox(container).disabled).toBe(true);
     });
   });
@@ -29,9 +29,7 @@ describe('components/Switch', () => {
   describe('onValueChange', () => {
     test('when value is "false" it receives "true"', () => {
       const onValueChange = jest.fn();
-      const { container } = renderRootContext(
-        <Switch onValueChange={onValueChange} value={false} />
-      );
+      const { container } = renderRootView(<Switch onValueChange={onValueChange} value={false} />);
       const checkbox = findCheckbox(container);
       checkbox.click(); // Needed to get ReactDOM to trigger 'change' event
       expect(onValueChange).toHaveBeenCalledWith(true);
@@ -39,7 +37,7 @@ describe('components/Switch', () => {
 
     test('when value is "true" it receives "false"', () => {
       const onValueChange = jest.fn();
-      const { container } = renderRootContext(<Switch onValueChange={onValueChange} value />);
+      const { container } = renderRootView(<Switch onValueChange={onValueChange} value />);
       const checkbox = findCheckbox(container);
       checkbox.click(); // Needed to get ReactDOM to trigger 'change' event
       expect(onValueChange).toHaveBeenCalledWith(false);
@@ -48,12 +46,12 @@ describe('components/Switch', () => {
 
   describe('value', () => {
     test('when "false" an unchecked checkbox is rendered', () => {
-      const { container } = renderRootContext(<Switch value={false} />);
+      const { container } = renderRootView(<Switch value={false} />);
       expect(findCheckbox(container).checked).toBe(false);
     });
 
     test('when "true" a checked checkbox is rendered', () => {
-      const { container } = renderRootContext(<Switch value />);
+      const { container } = renderRootView(<Switch value />);
       expect(findCheckbox(container).checked).toBe(true);
     });
   });
diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js
index 6a9410fcb8..dcbd6ac899 100644
--- a/packages/react-native-web/src/exports/Switch/index.js
+++ b/packages/react-native-web/src/exports/Switch/index.js
@@ -15,7 +15,7 @@ import createElement from '../createElement';
 import multiplyStyleLengthValue from '../../modules/multiplyStyleLengthValue';
 import StyleSheet from '../StyleSheet';
 import View from '../View';
-import StyleSheetContext from '../StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 type SwitchProps = {
   ...ViewProps,
@@ -50,7 +50,7 @@ const Switch: React.AbstractComponent<
   } = props;
 
   const thumbRef = React.useRef(null);
-  const styleContext = React.useContext(StyleSheetContext);
+  const rootContext = React.useContext(RootContext);
 
   function handleChange(event: Object) {
     if (onValueChange != null) {
@@ -125,7 +125,7 @@ const Switch: React.AbstractComponent<
       type: 'checkbox',
       role: 'switch'
     },
-    styleContext.styleResolver
+    rootContext.styleResolver
   );
 
   return (
diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
index be74224f78..23cad1b09c 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
@@ -5,70 +5,70 @@ import React from 'react';
 import Text from '../';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/Text', () => {
   test('default', () => {
-    const { container } = renderRootContext(<Text />);
+    const { container } = renderRootView(<Text />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('nested', () => {
-    const { container } = renderRootContext(<Text children={<Text testID="child" />} />);
+    const { container } = renderRootView(<Text children={<Text testID="child" />} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Text accessibilityLabel="accessibility label" />);
+      const { container } = renderRootView(<Text accessibilityLabel="accessibility label" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLabelledBy"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Text accessibilityLabelledBy="123" />);
+      const { container } = renderRootView(<Text accessibilityLabelledBy="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Text accessibilityLiveRegion="polite" />);
+      const { container } = renderRootView(<Text accessibilityLiveRegion="polite" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityRole"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Text accessibilityRole="none" />);
+      const { container } = renderRootView(<Text accessibilityRole="none" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value is "button"', () => {
-      const { container } = renderRootContext(<Text accessibilityRole="button" />);
+      const { container } = renderRootView(<Text accessibilityRole="button" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value alters HTML element', () => {
-      const { container } = renderRootContext(<Text accessibilityRole="article" />);
+      const { container } = renderRootView(<Text accessibilityRole="article" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('allows "dir" to be overridden', () => {
-    const { container } = renderRootContext(<Text dir="rtl" />);
+    const { container } = renderRootView(<Text dir="rtl" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "href"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Text href="https://example.com" />);
+      const { container } = renderRootView(<Text href="https://example.com" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('href with accessibilityRole', () => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <Text accessibilityRole="none" href="https://example.com" />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -77,7 +77,7 @@ describe('components/Text', () => {
 
   describe('prop "hrefAttrs"', () => {
     test('requires "href"', () => {
-      const { container } = renderRootContext(<Text hrefAttrs={{ download: 'filename.jpg' }} />);
+      const { container } = renderRootView(<Text hrefAttrs={{ download: 'filename.jpg' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -87,7 +87,7 @@ describe('components/Text', () => {
         rel: 'nofollow',
         target: '_blank'
       };
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <Text href="https://example.com" hrefAttrs={hrefAttrs} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -97,7 +97,7 @@ describe('components/Text', () => {
       const hrefAttrs = {
         target: 'blank'
       };
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <Text href="https://example.com" hrefAttrs={hrefAttrs} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -109,7 +109,7 @@ describe('components/Text', () => {
         rel: null,
         target: null
       };
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <Text href="https://example.com" hrefAttrs={hrefAttrs} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -118,30 +118,30 @@ describe('components/Text', () => {
 
   describe('prop "lang"', () => {
     test('undefined', () => {
-      const { container } = renderRootContext(<Text />);
+      const { container } = renderRootView(<Text />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('fr', () => {
-      const { container } = renderRootContext(<Text lang="fr" />);
+      const { container } = renderRootView(<Text lang="fr" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Text nativeID="nativeID" />);
+      const { container } = renderRootView(<Text nativeID="nativeID" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "numberOfLines"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Text numberOfLines={3} />);
+      const { container } = renderRootView(<Text numberOfLines={3} />);
       expect(container.firstChild).toMatchSnapshot();
     });
     test('value is set to one', () => {
-      const { container } = renderRootContext(<Text numberOfLines={1} />);
+      const { container } = renderRootView(<Text numberOfLines={1} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -151,7 +151,7 @@ describe('components/Text', () => {
       const onBlur = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<Text onBlur={onBlur} ref={ref} />);
+        renderRootView(<Text onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       const body = createEventTarget(document.body);
@@ -168,7 +168,7 @@ describe('components/Text', () => {
       const onClick = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<Text onClick={onClick} ref={ref} />);
+        renderRootView(<Text onClick={onClick} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -181,7 +181,7 @@ describe('components/Text', () => {
       const onClick = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<Text onClick={onClick} onPress={() => {}} ref={ref} />);
+        renderRootView(<Text onClick={onClick} onPress={() => {}} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -196,7 +196,7 @@ describe('components/Text', () => {
       const onFocus = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<Text onFocus={onFocus} ref={ref} />);
+        renderRootView(<Text onFocus={onFocus} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -211,7 +211,7 @@ describe('components/Text', () => {
       const onPress = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<Text onPress={onPress} ref={ref} />);
+        renderRootView(<Text onPress={onPress} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -225,7 +225,7 @@ describe('components/Text', () => {
       const onPress = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<Text onClick={() => {}} onPress={onPress} ref={ref} />);
+        renderRootView(<Text onClick={() => {}} onPress={onPress} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -238,7 +238,7 @@ describe('components/Text', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      renderRootContext(<Text ref={ref} />);
+      renderRootView(<Text ref={ref} />);
       expect(ref).toBeCalled();
     });
 
@@ -246,7 +246,7 @@ describe('components/Text', () => {
       const ref = jest.fn();
       let rerender;
       act(() => {
-        ({ rerender } = renderRootContext(
+        ({ rerender } = renderRootView(
           <Text nativeID="123" ref={ref} style={{ borderWidth: 5 }} />
         ));
       });
@@ -260,7 +260,7 @@ describe('components/Text', () => {
     test('node has imperative methods', () => {
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<Text ref={ref} />);
+        renderRootView(<Text ref={ref} />);
       });
       const node = ref.current;
       expect(typeof node.measure === 'function');
@@ -272,26 +272,26 @@ describe('components/Text', () => {
 
   describe('prop "selectable"', () => {
     test('value of false', () => {
-      const { container } = renderRootContext(<Text selectable={false} />);
+      const { container } = renderRootView(<Text selectable={false} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value of true', () => {
-      const { container } = renderRootContext(<Text selectable={true} />);
+      const { container } = renderRootView(<Text selectable={true} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Text style={{ borderWidth: 5 }} />);
+      const { container } = renderRootView(<Text style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<Text testID="123" />);
+      const { container } = renderRootView(<Text testID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
index e50ac60f23..13d92f5021 100644
--- a/packages/react-native-web/src/exports/Text/index.js
+++ b/packages/react-native-web/src/exports/Text/index.js
@@ -22,7 +22,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from './TextAncestorContext';
-import StyleSheetContext from '../../exports/StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 const forwardPropsList = {
   ...forwardedProps.defaultProps,
@@ -70,7 +70,7 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
 
     const hasTextAncestor = React.useContext(TextAncestorContext);
     const hostRef = React.useRef(null);
-    const styleContext = React.useContext(StyleSheetContext);
+    const rootContext = React.useContext(RootContext);
 
     const classList = [
       classes.text,
@@ -152,7 +152,7 @@ const Text: React.AbstractComponent<TextProps, HTMLElement & PlatformMethods> =
 
     supportedProps.ref = setRef;
 
-    const element = createElement(component, supportedProps, styleContext.styleResolver);
+    const element = createElement(component, supportedProps, rootContext.styleResolver);
 
     return hasTextAncestor ? (
       element
diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
index 0202725f82..29cdd7f0b7 100644
--- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
@@ -4,7 +4,7 @@ import React from 'react';
 import TextInput from '..';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 function findInput(container) {
   return container.querySelector('input');
@@ -69,19 +69,19 @@ function keydown(payload) {
 describe('components/TextInput', () => {
   describe('prop "autoComplete"', () => {
     test('value "on"', () => {
-      const { container } = renderRootContext(<TextInput />);
+      const { container } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(input.getAttribute('autoComplete')).toEqual('on');
     });
 
     test('value "off"', () => {
-      const { container } = renderRootContext(<TextInput autoComplete="off" />);
+      const { container } = renderRootView(<TextInput autoComplete="off" />);
       const input = findInput(container);
       expect(input.getAttribute('autoComplete')).toEqual('off');
     });
 
     test('autoCompleteType fallback', () => {
-      const { container } = renderRootContext(<TextInput autoCompleteType="off" />);
+      const { container } = renderRootView(<TextInput autoCompleteType="off" />);
       const input = findInput(container);
       expect(input.getAttribute('autoComplete')).toEqual('off');
     });
@@ -89,13 +89,13 @@ describe('components/TextInput', () => {
 
   describe('prop "autoFocus"', () => {
     test('value "false"', () => {
-      const { container } = renderRootContext(<TextInput />);
+      const { container } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(document.activeElement).not.toBe(input);
     });
 
     test('value "true"', () => {
-      const { container } = renderRootContext(<TextInput autoFocus />);
+      const { container } = renderRootView(<TextInput autoFocus />);
       const input = findInput(container);
       expect(document.activeElement).toBe(input);
     });
@@ -105,14 +105,14 @@ describe('components/TextInput', () => {
     const defaultValue = 'defaultValue';
 
     testIfDocumentIsFocused('value "false"', () => {
-      const { container } = renderRootContext(<TextInput defaultValue={defaultValue} />);
+      const { container } = renderRootView(<TextInput defaultValue={defaultValue} />);
       const input = findInput(container);
       input.focus();
       expect(input.node.value).toEqual(defaultValue);
     });
 
     testIfDocumentIsFocused('value "true"', () => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <TextInput clearTextOnFocus defaultValue={defaultValue} />
       );
       const input = findInput(container);
@@ -123,20 +123,20 @@ describe('components/TextInput', () => {
 
   test('prop "defaultValue"', () => {
     const defaultValue = 'defaultValue';
-    const { container } = renderRootContext(<TextInput defaultValue={defaultValue} />);
+    const { container } = renderRootView(<TextInput defaultValue={defaultValue} />);
     const input = findInput(container);
     expect(input.value).toEqual(defaultValue);
   });
 
   describe('prop "disabled"', () => {
     test('value "false"', () => {
-      const { container } = renderRootContext(<TextInput />);
+      const { container } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(input.disabled).toEqual(false);
     });
 
     test('value "true"', () => {
-      const { container } = renderRootContext(<TextInput disabled={true} />);
+      const { container } = renderRootView(<TextInput disabled={true} />);
       const input = findInput(container);
       expect(input.disabled).toEqual(true);
     });
@@ -144,13 +144,13 @@ describe('components/TextInput', () => {
 
   describe('prop "editable"', () => {
     test('value "true"', () => {
-      const { container } = renderRootContext(<TextInput />);
+      const { container } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(input.readOnly).toEqual(false);
     });
 
     test('value "false"', () => {
-      const { container } = renderRootContext(<TextInput editable={false} />);
+      const { container } = renderRootView(<TextInput editable={false} />);
       const input = findInput(container);
       expect(input.readOnly).toEqual(true);
     });
@@ -158,67 +158,67 @@ describe('components/TextInput', () => {
 
   describe('prop "keyboardType"', () => {
     test('default value', () => {
-      const { container } = renderRootContext(<TextInput keyboardType="default" />);
+      const { container } = renderRootView(<TextInput keyboardType="default" />);
       const input = findInput(container);
       expect(input.type).toEqual('text');
     });
 
     test('value "email-address"', () => {
-      const { container } = renderRootContext(<TextInput keyboardType="email-address" />);
+      const { container } = renderRootView(<TextInput keyboardType="email-address" />);
       const input = findInput(container);
       expect(input.type).toEqual('email');
     });
 
     test('value "decimal-pad"', () => {
-      const { container } = renderRootContext(<TextInput keyboardType="decimal-pad" />);
+      const { container } = renderRootView(<TextInput keyboardType="decimal-pad" />);
       const input = findInput(container);
       expect(input.inputMode).toEqual('decimal');
     });
 
     test('value "number-pad"', () => {
-      const { container } = renderRootContext(<TextInput keyboardType="number-pad" />);
+      const { container } = renderRootView(<TextInput keyboardType="number-pad" />);
       const input = findInput(container);
       expect(input.inputMode).toEqual('numeric');
     });
 
     test('value "numeric"', () => {
-      const { container } = renderRootContext(<TextInput keyboardType="numeric" />);
+      const { container } = renderRootView(<TextInput keyboardType="numeric" />);
       const input = findInput(container);
       expect(input.inputMode).toEqual('numeric');
     });
 
     test('value "phone-pad"', () => {
-      const { container } = renderRootContext(<TextInput keyboardType="phone-pad" />);
+      const { container } = renderRootView(<TextInput keyboardType="phone-pad" />);
       const input = findInput(container);
       expect(input.type).toEqual('tel');
     });
 
     test('value "url"', () => {
-      const { container } = renderRootContext(<TextInput keyboardType="url" />);
+      const { container } = renderRootView(<TextInput keyboardType="url" />);
       const input = findInput(container);
       expect(input.type).toEqual('url');
     });
   });
 
   test('prop "maxLength"', () => {
-    let { container } = renderRootContext(<TextInput />);
+    let { container } = renderRootView(<TextInput />);
     let input = findInput(container);
     expect(input.getAttribute('maxLength')).toEqual(null);
 
-    ({ container } = renderRootContext(<TextInput maxLength={10} />));
+    ({ container } = renderRootView(<TextInput maxLength={10} />));
     input = findInput(container);
     expect(input.getAttribute('maxLength')).toEqual('10');
   });
 
   describe('prop "multiline"', () => {
     test('value "false"', () => {
-      const { container } = renderRootContext(<TextInput />);
+      const { container } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(input).toBeDefined();
     });
 
     test('value "true"', () => {
-      const { container } = renderRootContext(<TextInput multiline />);
+      const { container } = renderRootView(<TextInput multiline />);
       const textarea = findTextArea(container);
       expect(textarea).toBeDefined();
     });
@@ -226,7 +226,7 @@ describe('components/TextInput', () => {
 
   describe('prop "numberOfLines"', () => {
     test('without "multiline"', () => {
-      const { container } = renderRootContext(<TextInput numberOfLines={2} />);
+      const { container } = renderRootView(<TextInput numberOfLines={2} />);
       const input = findInput(container);
       const textarea = findTextArea(container);
       expect(input).toBeDefined();
@@ -234,7 +234,7 @@ describe('components/TextInput', () => {
     });
 
     test('with "multiline"', () => {
-      const { container } = renderRootContext(<TextInput multiline numberOfLines={3} />);
+      const { container } = renderRootView(<TextInput multiline numberOfLines={3} />);
       const textarea = findTextArea(container);
       expect(textarea.getAttribute('rows')).toEqual('3');
     });
@@ -244,7 +244,7 @@ describe('components/TextInput', () => {
     const onBlur = jest.fn();
     const ref = React.createRef();
     act(() => {
-      renderRootContext(<TextInput onBlur={onBlur} ref={ref} />);
+      renderRootView(<TextInput onBlur={onBlur} ref={ref} />);
     });
     const target = createEventTarget(ref.current);
     const body = createEventTarget(document.body);
@@ -258,7 +258,7 @@ describe('components/TextInput', () => {
 
   test.skip('prop "onChange"', () => {
     const onChange = jest.fn();
-    const { container } = renderRootContext(<TextInput onChange={onChange} />);
+    const { container } = renderRootView(<TextInput onChange={onChange} />);
     const input = findInput(container);
     // This doesn't cause ReactDOM to trigger 'change' event... ¯\_(ツ)_/¯
     input.dispatchEvent(new window.Event('change', { bubbles: true }));
@@ -267,7 +267,7 @@ describe('components/TextInput', () => {
 
   test.skip('prop "onChangeText"', () => {
     const onChangeText = jest.fn();
-    const { container } = renderRootContext(<TextInput onChangeText={onChangeText} />);
+    const { container } = renderRootView(<TextInput onChangeText={onChangeText} />);
     const input = findInput(container);
     // This doesn't cause ReactDOM to trigger 'change' event... ¯\_(ツ)_/¯
     input.dispatchEvent(keydown({ key: 'a' }));
@@ -280,7 +280,7 @@ describe('components/TextInput', () => {
     const onFocus = jest.fn();
     const ref = React.createRef();
     act(() => {
-      renderRootContext(<TextInput onFocus={onFocus} ref={ref} />);
+      renderRootView(<TextInput onFocus={onFocus} ref={ref} />);
     });
     const target = createEventTarget(ref.current);
     act(() => {
@@ -295,7 +295,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootView(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'ArrowLeft' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -317,7 +317,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootView(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'Backspace' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -339,7 +339,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootView(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'Enter' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -361,7 +361,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootView(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'Escape' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -383,7 +383,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootView(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: ' ' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -405,7 +405,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootView(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'Tab' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -427,7 +427,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootView(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(keydown({ key: 'a' }));
       expect(onKeyPress).toHaveBeenCalledTimes(1);
@@ -449,7 +449,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootView(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(
         keydown({
@@ -479,7 +479,7 @@ describe('components/TextInput', () => {
       const onKeyPress = jest.fn((e) => {
         e.persist();
       });
-      const { container } = renderRootContext(<TextInput onKeyPress={onKeyPress} />);
+      const { container } = renderRootView(<TextInput onKeyPress={onKeyPress} />);
       const input = findInput(container);
       input.dispatchEvent(
         keydown({
@@ -493,7 +493,7 @@ describe('components/TextInput', () => {
 
   describe('prop "onSelectionChange"', () => {
     test('is called on select', () => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <TextInput defaultValue="12345" onSelectionChange={onSelectionChange} />
       );
       const input = findInput(container);
@@ -508,7 +508,7 @@ describe('components/TextInput', () => {
 
     test.skip('is called on change', () => {
       const onSelectionChange = jest.fn();
-      const { container } = renderRootContext(<TextInput onSelectionChange={onSelectionChange} />);
+      const { container } = renderRootView(<TextInput onSelectionChange={onSelectionChange} />);
       const input = findInput(container);
       // This doesn't cause ReactDOM to trigger 'change' event... ¯\_(ツ)_/¯
       input.dispatchEvent(new window.Event('change', { bubbles: true }));
@@ -518,7 +518,7 @@ describe('components/TextInput', () => {
 
   describe('prop "onSubmitEditing"', () => {
     test('single-line input', (done) => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <TextInput defaultValue="12345" onSubmitEditing={onSubmitEditing} />
       );
       const input = findInput(container);
@@ -532,7 +532,7 @@ describe('components/TextInput', () => {
 
     test('single-line input while composing', () => {
       const onSubmitEditing = jest.fn();
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <TextInput defaultValue="12345" onSubmitEditing={onSubmitEditing} />
       );
       const input = findInput(container);
@@ -543,7 +543,7 @@ describe('components/TextInput', () => {
 
     test('multi-line input', () => {
       const onSubmitEditing = jest.fn();
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <TextInput defaultValue="12345" multiline onSubmitEditing={onSubmitEditing} />
       );
       const textarea = findTextArea(container);
@@ -555,7 +555,7 @@ describe('components/TextInput', () => {
       const onSubmitEditing = jest.fn();
       const preventDefault = jest.fn();
 
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <TextInput blurOnSubmit defaultValue="12345" multiline onSubmitEditing={onSubmitEditing} />
       );
       const textarea = findTextArea(container);
@@ -572,24 +572,24 @@ describe('components/TextInput', () => {
 
   test('prop "returnKeyType"', () => {
     const returnKeyType = 'previous';
-    const { container } = renderRootContext(<TextInput returnKeyType={returnKeyType} />);
+    const { container } = renderRootView(<TextInput returnKeyType={returnKeyType} />);
     const input = findInput(container);
     expect(input.getAttribute('enterkeyhint')).toEqual(returnKeyType);
   });
 
   test('prop "secureTextEntry"', () => {
-    let { container } = renderRootContext(<TextInput secureTextEntry />);
+    let { container } = renderRootView(<TextInput secureTextEntry />);
     const input = findInput(container);
     expect(input.getAttribute('type')).toEqual('password');
     // ignored for multiline
-    ({ container } = renderRootContext(<TextInput multiline secureTextEntry />));
+    ({ container } = renderRootView(<TextInput multiline secureTextEntry />));
     const textarea = findTextArea(container);
     expect(textarea.getAttribute('type')).toEqual(null);
   });
 
   describe('prop "selectTextOnFocus"', () => {
     testIfDocumentIsFocused('value "false"', () => {
-      const { container } = renderRootContext(<TextInput defaultValue={'text'} />);
+      const { container } = renderRootView(<TextInput defaultValue={'text'} />);
       const input = findInput(container);
       input.focus();
       expect(input.selectionEnd).toEqual(4);
@@ -607,13 +607,13 @@ describe('components/TextInput', () => {
   describe('prop "selection"', () => {
     test('set cursor location', () => {
       const cursorLocation = { start: 3, end: 3 };
-      const { container: defaultContainer } = renderRootContext(<TextInput defaultValue="12345" />);
+      const { container: defaultContainer } = renderRootView(<TextInput defaultValue="12345" />);
       const inputDefaultSelection = findInput(defaultContainer);
       // default selection is 0
       expect(inputDefaultSelection.selectionStart).toEqual(0);
       expect(inputDefaultSelection.selectionEnd).toEqual(0);
 
-      const { container: customContainer } = renderRootContext(
+      const { container: customContainer } = renderRootView(
         <TextInput defaultValue="12345" selection={cursorLocation} />
       );
       const inputCustomSelection = findInput(customContainer);
@@ -625,19 +625,19 @@ describe('components/TextInput', () => {
 
   describe('prop "spellCheck"', () => {
     test('default value', () => {
-      const { container } = renderRootContext(<TextInput />);
+      const { container } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(input.getAttribute('spellCheck')).toEqual('true');
     });
 
     test('inherit from "autoCorrect"', () => {
-      const { container } = renderRootContext(<TextInput autoCorrect={false} />);
+      const { container } = renderRootView(<TextInput autoCorrect={false} />);
       const input = findInput(container);
       expect(input.getAttribute('spellCheck')).toEqual('false');
     });
 
     test('value "false"', () => {
-      const { container } = renderRootContext(<TextInput spellCheck={false} />);
+      const { container } = renderRootView(<TextInput spellCheck={false} />);
       const input = findInput(container);
       expect(input.getAttribute('spellCheck')).toEqual('false');
     });
@@ -645,7 +645,7 @@ describe('components/TextInput', () => {
 
   test('prop "value"', () => {
     const value = 'value';
-    const { container } = renderRootContext(<TextInput value={value} />);
+    const { container } = renderRootView(<TextInput value={value} />);
     const input = findInput(container);
     expect(input.value).toEqual(value);
   });
@@ -653,13 +653,13 @@ describe('components/TextInput', () => {
   describe('imperative methods', () => {
     test('node.clear()', () => {
       const ref = React.createRef();
-      renderRootContext(<TextInput ref={ref} />);
+      renderRootView(<TextInput ref={ref} />);
       expect(typeof ref.current.clear).toBe('function');
     });
 
     test('node.isFocused()', () => {
       const ref = React.createRef();
-      renderRootContext(<TextInput ref={ref} />);
+      renderRootView(<TextInput ref={ref} />);
       expect(typeof ref.current.isFocused).toBe('function');
     });
   });
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index 4f13dec16b..4bf0c693c6 100644
--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/packages/react-native-web/src/exports/TextInput/index.js
@@ -23,7 +23,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextInputState from '../../modules/TextInputState';
-import StyleSheetContext from '../StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 /**
  * Determines whether a 'selection' prop differs from a node's existing
@@ -167,7 +167,7 @@ const TextInput: React.AbstractComponent<
 
   const dimensions = React.useRef({ height: null, width: null });
   const hostRef = React.useRef(null);
-  const styleContext = React.useContext(StyleSheetContext);
+  const rootContext = React.useContext(RootContext);
 
   const handleContentSizeChange = React.useCallback(
     (hostNode) => {
@@ -361,7 +361,7 @@ const TextInput: React.AbstractComponent<
 
   supportedProps.ref = setRef;
 
-  return createElement(component, supportedProps, styleContext.styleResolver);
+  return createElement(component, supportedProps, rootContext.styleResolver);
 });
 
 TextInput.displayName = 'TextInput';
diff --git a/packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js b/packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js
index 9dc1ec781f..ba7ac66996 100644
--- a/packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/TouchableWithoutFeedback/__tests__/index-test.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 import TouchableWithoutFeedback from '../';
 import View from '../../View';
 
 describe('components/TouchableWithoutFeedback', () => {
   test('forwards ref', () => {
     const ref = jest.fn();
-    renderRootContext(
+    renderRootView(
       <TouchableWithoutFeedback ref={ref}>
         <View />
       </TouchableWithoutFeedback>
@@ -16,7 +16,7 @@ describe('components/TouchableWithoutFeedback', () => {
 
   test('forwards ref of child', () => {
     const ref = jest.fn();
-    renderRootContext(
+    renderRootView(
       <TouchableWithoutFeedback>
         <View ref={ref} />
       </TouchableWithoutFeedback>
diff --git a/packages/react-native-web/src/exports/View/__tests__/index-test.js b/packages/react-native-web/src/exports/View/__tests__/index-test.js
index 4ace474213..d99be0045e 100644
--- a/packages/react-native-web/src/exports/View/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/View/__tests__/index-test.js
@@ -5,17 +5,17 @@ import View from '../';
 import StyleSheet from '../../StyleSheet';
 import { act } from 'react-dom/test-utils';
 import { createEventTarget } from 'dom-event-testing-library';
-import renderRootContext from '../../../vendor/renderRootContext';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/View', () => {
   test('default', () => {
-    const { container } = renderRootContext(<View />);
+    const { container } = renderRootView(<View />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('non-text is rendered', () => {
     const children = <View testID="1" />;
-    const { container } = renderRootContext(<View>{children}</View>);
+    const { container } = renderRootView(<View>{children}</View>);
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -30,12 +30,12 @@ describe('components/View', () => {
     });
 
     test('error logged (single)', () => {
-      renderRootContext(<View>hello</View>);
+      renderRootView(<View>hello</View>);
       expect(console.error).toBeCalled();
     });
 
     test('error logged (array)', () => {
-      renderRootContext(
+      renderRootView(
         <View>
           <View />
           hello
@@ -48,55 +48,55 @@ describe('components/View', () => {
 
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<View accessibilityLabel="accessibility label" />);
+      const { container } = renderRootView(<View accessibilityLabel="accessibility label" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLabelledBy"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<View accessibilityLabelledBy="123" />);
+      const { container } = renderRootView(<View accessibilityLabelledBy="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<View accessibilityLiveRegion="polite" />);
+      const { container } = renderRootView(<View accessibilityLiveRegion="polite" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityRole"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<View accessibilityRole="none" />);
+      const { container } = renderRootView(<View accessibilityRole="none" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value is "button"', () => {
-      const { container } = renderRootContext(<View accessibilityRole="button" />);
+      const { container } = renderRootView(<View accessibilityRole="button" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value alters HTML element', () => {
-      const { container } = renderRootContext(<View accessibilityRole="article" />);
+      const { container } = renderRootView(<View accessibilityRole="article" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('allows "dir" to be overridden', () => {
-    const { container } = renderRootContext(<View dir="rtl" />);
+    const { container } = renderRootView(<View dir="rtl" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "href"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<View href="https://example.com" />);
+      const { container } = renderRootView(<View href="https://example.com" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('href with accessibilityRole', () => {
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <View accessibilityRole="none" href="https://example.com" />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -105,7 +105,7 @@ describe('components/View', () => {
 
   describe('prop "hrefAttrs"', () => {
     test('requires "href"', () => {
-      const { container } = renderRootContext(<View hrefAttrs={{ download: 'filename.jpg' }} />);
+      const { container } = renderRootView(<View hrefAttrs={{ download: 'filename.jpg' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -115,7 +115,7 @@ describe('components/View', () => {
         rel: 'nofollow',
         target: '_blank'
       };
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <View href="https://example.com" hrefAttrs={hrefAttrs} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -125,7 +125,7 @@ describe('components/View', () => {
       const hrefAttrs = {
         target: 'blank'
       };
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <View href="https://example.com" hrefAttrs={hrefAttrs} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -137,7 +137,7 @@ describe('components/View', () => {
         rel: null,
         target: null
       };
-      const { container } = renderRootContext(
+      const { container } = renderRootView(
         <View href="https://example.com" hrefAttrs={hrefAttrs} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -146,7 +146,7 @@ describe('components/View', () => {
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<View nativeID="nativeID" />);
+      const { container } = renderRootView(<View nativeID="nativeID" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -156,7 +156,7 @@ describe('components/View', () => {
       const onBlur = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<View onBlur={onBlur} ref={ref} />);
+        renderRootView(<View onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       const body = createEventTarget(document.body);
@@ -173,7 +173,7 @@ describe('components/View', () => {
       const onFocus = jest.fn();
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<View onFocus={onFocus} ref={ref} />);
+        renderRootView(<View onFocus={onFocus} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -187,7 +187,7 @@ describe('components/View', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      renderRootContext(<View ref={ref} />);
+      renderRootView(<View ref={ref} />);
       expect(ref).toBeCalled();
     });
 
@@ -195,7 +195,7 @@ describe('components/View', () => {
       const ref = jest.fn();
       let rerender;
       act(() => {
-        ({ rerender } = renderRootContext(
+        ({ rerender } = renderRootView(
           <View nativeID="123" ref={ref} style={{ borderWidth: 5 }} />
         ));
       });
@@ -209,7 +209,7 @@ describe('components/View', () => {
     test('node has imperative methods', () => {
       const ref = React.createRef();
       act(() => {
-        renderRootContext(<View ref={ref} />);
+        renderRootView(<View ref={ref} />);
       });
       const node = ref.current;
       expect(typeof node.measure === 'function');
@@ -221,7 +221,7 @@ describe('components/View', () => {
     describe('setNativeProps method', () => {
       test('works with react-native props', () => {
         const ref = React.createRef();
-        const { container } = renderRootContext(<View ref={ref} />);
+        const { container } = renderRootView(<View ref={ref} />);
         const node = ref.current;
         node.setNativeProps({
           accessibilityLabel: 'label',
@@ -240,7 +240,7 @@ describe('components/View', () => {
         const ref = React.createRef();
         const styles = StyleSheet.create({ root: { color: 'red' } });
         // initial render
-        const { container, rerender } = renderRootContext(
+        const { container, rerender } = renderRootView(
           <View ref={ref} style={[styles.root, { width: 10 }]} />
         );
         const node = ref.current;
@@ -263,20 +263,20 @@ describe('components/View', () => {
   });
 
   test('prop "pointerEvents"', () => {
-    const { container } = renderRootContext(<View pointerEvents="box-only" />);
+    const { container } = renderRootView(<View pointerEvents="box-only" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<View style={{ borderWidth: 5 }} />);
+      const { container } = renderRootView(<View style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = renderRootContext(<View testID="123" />);
+      const { container } = renderRootView(<View testID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
diff --git a/packages/react-native-web/src/exports/View/index.js b/packages/react-native-web/src/exports/View/index.js
index a4447ad879..47e58388ba 100644
--- a/packages/react-native-web/src/exports/View/index.js
+++ b/packages/react-native-web/src/exports/View/index.js
@@ -22,7 +22,7 @@ import usePlatformMethods from '../../modules/usePlatformMethods';
 import useResponderEvents from '../../modules/useResponderEvents';
 import StyleSheet from '../StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
-import StyleSheetContext from '../StyleSheet/StyleSheetContext';
+import RootContext from '../AppRegistry/RootContext';
 
 const forwardPropsList = {
   ...forwardedProps.defaultProps,
@@ -76,7 +76,7 @@ const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods> =
     }
 
     const hasTextAncestor = React.useContext(TextAncestorContext);
-    const styleContext = React.useContext(StyleSheetContext);
+    const rootContext = React.useContext(RootContext);
     const hostRef = React.useRef(null);
 
     useElementLayout(hostRef, onLayout);
@@ -126,7 +126,7 @@ const View: React.AbstractComponent<ViewProps, HTMLElement & PlatformMethods> =
 
     supportedProps.ref = setRef;
 
-    return createElement(component, supportedProps, styleContext.styleResolver);
+    return createElement(component, supportedProps, rootContext.styleResolver);
   }
 );
 
diff --git a/packages/react-native-web/src/index.js b/packages/react-native-web/src/index.js
index c7d8aacb1e..30e1a80df5 100644
--- a/packages/react-native-web/src/index.js
+++ b/packages/react-native-web/src/index.js
@@ -61,6 +61,7 @@ export { default as View } from './exports/View';
 export { default as VirtualizedList } from './exports/VirtualizedList';
 export { default as YellowBox } from './exports/YellowBox';
 export { default as LogBox } from './exports/LogBox';
+export { default as ReactRootView } from './exports/AppRegistry/ReactRootView';
 
 // compat (components)
 export { default as DrawerLayoutAndroid } from './exports/DrawerLayoutAndroid';
diff --git a/packages/react-native-web/src/modules/usePlatformMethods/index.js b/packages/react-native-web/src/modules/usePlatformMethods/index.js
index e3880e1627..e0569f6271 100644
--- a/packages/react-native-web/src/modules/usePlatformMethods/index.js
+++ b/packages/react-native-web/src/modules/usePlatformMethods/index.js
@@ -14,7 +14,7 @@ import UIManager from '../../exports/UIManager';
 import createDOMProps from '../createDOMProps';
 import useStable from '../useStable';
 import { useContext, useRef } from 'react';
-import StyleSheetContext from '../../exports/StyleSheet/StyleSheetContext';
+import RootContext from '../../exports/AppRegistry/RootContext';
 
 const emptyObject = {};
 
@@ -69,7 +69,7 @@ export default function usePlatformMethods({
 }): (hostNode: any) => void {
   const previousStyleRef = useRef(null);
   const setNativePropsArgsRef = useRef(null);
-  const styleContext = useContext(StyleSheetContext);
+  const rootContext = useContext(RootContext);
   setNativePropsArgsRef.current = { classList, pointerEvents, style };
 
   // Avoid creating a new ref on every render. The props only need to be
@@ -84,7 +84,7 @@ export default function usePlatformMethods({
         const { classList, style, pointerEvents } = setNativePropsArgsRef.current || emptyObject;
         setNativeProps(
           hostNode,
-          styleContext.styleResolver,
+          rootContext.styleResolver,
           nativeProps,
           classList,
           pointerEvents,
diff --git a/packages/react-native-web/src/modules/usePressEvents/index.js b/packages/react-native-web/src/modules/usePressEvents/index.js
index b1a0661247..e6637aede9 100644
--- a/packages/react-native-web/src/modules/usePressEvents/index.js
+++ b/packages/react-native-web/src/modules/usePressEvents/index.js
@@ -11,23 +11,23 @@
 'use strict';
 
 import type { EventHandlers, PressResponderConfig } from './PressResponder';
-import StyleSheetContext from '../../exports/StyleSheet/StyleSheetContext';
+import RootContext from '../../exports/AppRegistry/RootContext';
 
 import PressResponder from './PressResponder';
 import { useContext, useDebugValue, useEffect, useRef } from 'react';
 
 export default function usePressEvents(hostRef: any, config: PressResponderConfig): EventHandlers {
   const pressResponderRef = useRef<?PressResponder>(null);
-  const styleContext = useContext(StyleSheetContext);
+  const rootContext = useContext(RootContext);
   if (pressResponderRef.current == null) {
-    pressResponderRef.current = new PressResponder(config, styleContext.rootTag?.ownerDocument);
+    pressResponderRef.current = new PressResponder(config, rootContext.rootTag?.ownerDocument);
   }
   const pressResponder = pressResponderRef.current;
 
   // Re-configure to use the current node and configuration.
   useEffect(() => {
-    pressResponder.configure(config, styleContext.rootTag?.ownerDocument);
-  }, [config, pressResponder, styleContext.rootTag]);
+    pressResponder.configure(config, rootContext.rootTag?.ownerDocument);
+  }, [config, pressResponder, rootContext.rootTag]);
 
   // Reset the `pressResponder` when cleanup needs to occur. This is
   // a separate effect because we do not want to rest the responder when `config` changes.
diff --git a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js
index bdfff5f00c..59c426aa21 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/ResponderSystem.js
@@ -222,33 +222,7 @@ const shouldSetResponderEvents = {
   scroll: scrollRegistration
 };
 
-const emptyResponder: ResponderInstance = { id: null, idPath: null, node: null };
-
-/* ------------ PUBLIC API ------------ */
-
-/**
- * Attach Listeners
- *
- * Use native events as ReactDOM doesn't have a non-plugin API to implement
- * this system.
- */
-const documentEventsCapturePhase = ['blur', 'scroll'];
-const documentEventsBubblePhase = [
-  // mouse
-  'mousedown',
-  'mousemove',
-  'mouseup',
-  'dragstart',
-  // touch
-  'touchstart',
-  'touchmove',
-  'touchend',
-  'touchcancel',
-  // other
-  'contextmenu',
-  'select',
-  'selectionchange'
-];
+const emptyResponder = { id: null, idPath: null, node: null };
 
 export default class ResponderSystem {
   _window: Window;
@@ -262,73 +236,12 @@ export default class ResponderSystem {
   };
   _responderTouchHistoryStore = new ResponderTouchHistoryStore();
 
-  constructor(win?: Window) {
+  constructor(win: ?Window) {
     if (canUseDOM) {
       this._window = win ?? window;
     }
   }
 
-  attachListeners() {
-    if (canUseDOM && this._window.__reactResponderSystemActive == null) {
-      this._window.addEventListener('blur', this._eventListener);
-      documentEventsBubblePhase.forEach((eventType) => {
-        this._window.document.addEventListener(eventType, this._eventListener);
-      });
-      documentEventsCapturePhase.forEach((eventType) => {
-        this._window.document.addEventListener(eventType, this._eventListener, true);
-      });
-      this._window.__reactResponderSystemActive = true;
-    }
-  }
-
-  /**
-   * Register a node with the ResponderSystem.
-   */
-  addNode(id: ResponderId, node: any, config: ResponderConfig) {
-    setResponderId(node, id);
-    this._responderListenersMap.set(id, config);
-  }
-
-  /**
-   * Unregister a node with the ResponderSystem.
-   */
-  removeNode(id: ResponderId) {
-    if (this._currentResponder.id === id) {
-      this.terminateResponder();
-    }
-    if (this._responderListenersMap.has(id)) {
-      this._responderListenersMap.delete(id);
-    }
-  }
-
-  /**
-   * Allow the current responder to be terminated from within components to support
-   * more complex requirements, such as use with other React libraries for working
-   * with scroll views, input views, etc.
-   */
-  terminateResponder() {
-    const { id, node } = this._currentResponder;
-    if (id != null && node != null) {
-      const { onResponderTerminate } = this._getResponderConfig(id);
-      if (onResponderTerminate != null) {
-        const event = createResponderEvent({}, this._responderTouchHistoryStore);
-        event.currentTarget = node;
-        onResponderTerminate(event);
-      }
-      this._changeCurrentResponder(emptyResponder);
-    }
-    this._isEmulatingMouseEvents = false;
-    this._trackedTouchCount = 0;
-  }
-
-  /**
-   * Allow unit tests to inspect the current responder in the system.
-   * FOR TESTING ONLY.
-   */
-  getResponderNode(): any {
-    return this._currentResponder.node;
-  }
-
   _changeCurrentResponder(responder: ResponderInstance) {
     this._currentResponder = responder;
   }
@@ -338,71 +251,6 @@ export default class ResponderSystem {
     return config != null ? config : emptyObject;
   }
 
-  /**
-   * Walk the event path to/from the target node. At each node, stop and call the
-   * relevant "shouldSet" functions for the given event type. If any of those functions
-   * call "stopPropagation" on the event, stop searching for a responder.
-   */
-  _findWantsResponder(eventPaths, domEvent, responderEvent) {
-    const shouldSetCallbacks = shouldSetResponderEvents[(domEvent.type: any)]; // for Flow
-
-    if (shouldSetCallbacks != null) {
-      const { idPath, nodePath } = eventPaths;
-
-      const shouldSetCallbackCaptureName = shouldSetCallbacks[0];
-      const shouldSetCallbackBubbleName = shouldSetCallbacks[1];
-      const { bubbles } = shouldSetCallbacks[2];
-
-      const check = (id, node, callbackName) => {
-        const config = this._getResponderConfig(id);
-        const shouldSetCallback = config[callbackName];
-        if (shouldSetCallback != null) {
-          responderEvent.currentTarget = node;
-          if (shouldSetCallback(responderEvent) === true) {
-            // Start the path from the potential responder
-            const prunedIdPath = idPath.slice(idPath.indexOf(id));
-            return { id, node, idPath: prunedIdPath };
-          }
-        }
-      };
-
-      // capture
-      for (let i = idPath.length - 1; i >= 0; i--) {
-        const id = idPath[i];
-        const node = nodePath[i];
-        const result = check(id, node, shouldSetCallbackCaptureName);
-        if (result != null) {
-          return result;
-        }
-        if (responderEvent.isPropagationStopped() === true) {
-          return;
-        }
-      }
-
-      // bubble
-      if (bubbles) {
-        for (let i = 0; i < idPath.length; i++) {
-          const id = idPath[i];
-          const node = nodePath[i];
-          const result = check(id, node, shouldSetCallbackBubbleName);
-          if (result != null) {
-            return result;
-          }
-          if (responderEvent.isPropagationStopped() === true) {
-            return;
-          }
-        }
-      } else {
-        const id = idPath[0];
-        const node = nodePath[0];
-        const target = domEvent.target;
-        if (target === node) {
-          return check(id, node, shouldSetCallbackBubbleName);
-        }
-      }
-    }
-  }
-
   /**
    * Process native events
    *
@@ -552,7 +400,7 @@ export default class ResponderSystem {
           // native context menu
           eventType === 'contextmenu' ||
           // window blur
-          (eventType === 'blur' && eventTarget === window) ||
+          (eventType === 'blur' && eventTarget === this._window) ||
           // responder (or ancestors) blur
           (eventType === 'blur' && eventTarget.contains(node) && domEvent.relatedTarget !== node) ||
           // native scroll without using a pointer
@@ -615,6 +463,71 @@ export default class ResponderSystem {
     }
   };
 
+  /**
+   * Walk the event path to/from the target node. At each node, stop and call the
+   * relevant "shouldSet" functions for the given event type. If any of those functions
+   * call "stopPropagation" on the event, stop searching for a responder.
+   */
+  _findWantsResponder(eventPaths, domEvent, responderEvent) {
+    const shouldSetCallbacks = shouldSetResponderEvents[(domEvent.type: any)]; // for Flow
+
+    if (shouldSetCallbacks != null) {
+      const { idPath, nodePath } = eventPaths;
+
+      const shouldSetCallbackCaptureName = shouldSetCallbacks[0];
+      const shouldSetCallbackBubbleName = shouldSetCallbacks[1];
+      const { bubbles } = shouldSetCallbacks[2];
+
+      const check = (id, node, callbackName) => {
+        const config = this._getResponderConfig(id);
+        const shouldSetCallback = config[callbackName];
+        if (shouldSetCallback != null) {
+          responderEvent.currentTarget = node;
+          if (shouldSetCallback(responderEvent) === true) {
+            // Start the path from the potential responder
+            const prunedIdPath = idPath.slice(idPath.indexOf(id));
+            return { id, node, idPath: prunedIdPath };
+          }
+        }
+      };
+
+      // capture
+      for (let i = idPath.length - 1; i >= 0; i--) {
+        const id = idPath[i];
+        const node = nodePath[i];
+        const result = check(id, node, shouldSetCallbackCaptureName);
+        if (result != null) {
+          return result;
+        }
+        if (responderEvent.isPropagationStopped() === true) {
+          return;
+        }
+      }
+
+      // bubble
+      if (bubbles) {
+        for (let i = 0; i < idPath.length; i++) {
+          const id = idPath[i];
+          const node = nodePath[i];
+          const result = check(id, node, shouldSetCallbackBubbleName);
+          if (result != null) {
+            return result;
+          }
+          if (responderEvent.isPropagationStopped() === true) {
+            return;
+          }
+        }
+      } else {
+        const id = idPath[0];
+        const node = nodePath[0];
+        const target = domEvent.target;
+        if (target === node) {
+          return check(id, node, shouldSetCallbackBubbleName);
+        }
+      }
+    }
+  }
+
   /**
    * Attempt to transfer the responder.
    */
@@ -676,4 +589,91 @@ export default class ResponderSystem {
       }
     }
   }
+
+  /* ------------ PUBLIC API ------------ */
+
+  /**
+   * Attach Listeners
+   *
+   * Use native events as ReactDOM doesn't have a non-plugin API to implement
+   * this system.
+   */
+  static documentEventsCapturePhase = ['blur', 'scroll'];
+  static documentEventsBubblePhase = [
+    // mouse
+    'mousedown',
+    'mousemove',
+    'mouseup',
+    'dragstart',
+    // touch
+    'touchstart',
+    'touchmove',
+    'touchend',
+    'touchcancel',
+    // other
+    'contextmenu',
+    'select',
+    'selectionchange'
+  ];
+
+  attachListeners() {
+    if (canUseDOM && this._window.__reactResponderSystemActive == null) {
+      this._window.addEventListener('blur', this._eventListener);
+      ResponderSystem.documentEventsBubblePhase.forEach((eventType) => {
+        this._window.document.addEventListener(eventType, this._eventListener);
+      });
+      ResponderSystem.documentEventsCapturePhase.forEach((eventType) => {
+        this._window.document.addEventListener(eventType, this._eventListener, true);
+      });
+      this._window.__reactResponderSystemActive = true;
+    }
+  }
+
+  /**
+   * Register a node with the ResponderSystem.
+   */
+  addNode(id: ResponderId, node: any, config: ResponderConfig) {
+    setResponderId(node, id);
+    this._responderListenersMap.set(id, config);
+  }
+
+  /**
+   * Unregister a node with the ResponderSystem.
+   */
+  removeNode(id: ResponderId) {
+    if (this._currentResponder.id === id) {
+      this.terminateResponder();
+    }
+    if (this._responderListenersMap.has(id)) {
+      this._responderListenersMap.delete(id);
+    }
+  }
+
+  /**
+   * Allow the current responder to be terminated from within components to support
+   * more complex requirements, such as use with other React libraries for working
+   * with scroll views, input views, etc.
+   */
+  terminateResponder() {
+    const { id, node } = this._currentResponder;
+    if (id != null && node != null) {
+      const { onResponderTerminate } = this._getResponderConfig(id);
+      if (onResponderTerminate != null) {
+        const event = createResponderEvent({}, this._responderTouchHistoryStore);
+        event.currentTarget = node;
+        onResponderTerminate(event);
+      }
+      this._changeCurrentResponder(emptyResponder);
+    }
+    this._isEmulatingMouseEvents = false;
+    this._trackedTouchCount = 0;
+  }
+
+  /**
+   * Allow unit tests to inspect the current responder in the system.
+   * FOR TESTING ONLY.
+   */
+  getResponderNode(): any {
+    return this._currentResponder.node;
+  }
 }
diff --git a/packages/react-native-web/src/modules/useResponderEvents/ResponderTouchHistoryStore.js b/packages/react-native-web/src/modules/useResponderEvents/ResponderTouchHistoryStore.js
index 9bdd221b2a..fa1476ac58 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/ResponderTouchHistoryStore.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/ResponderTouchHistoryStore.js
@@ -87,15 +87,6 @@ function getTouchIdentifier({ identifier }: Touch): number {
   return identifier;
 }
 
-function printTouch(touch: Touch): string {
-  return JSON.stringify({
-    identifier: touch.identifier,
-    pageX: touch.pageX,
-    pageY: touch.pageY,
-    timestamp: timestampForTouch(touch)
-  });
-}
-
 export default class ResponderTouchHistoryStore {
   _touchBank: Array<TouchRecord> = [];
   _touchHistory = {
@@ -138,12 +129,8 @@ export default class ResponderTouchHistoryStore {
     }
   }
 
-  _printTouchBank(): string {
-    let printed = JSON.stringify(this._touchBank.slice(0, MAX_TOUCH_BANK));
-    if (this._touchBank.length > MAX_TOUCH_BANK) {
-      printed += ' (original size: ' + this._touchBank.length + ')';
-    }
-    return printed;
+  get touchHistory() {
+    return this._touchHistory;
   }
 
   _recordTouchStart = (touch: Touch): void => {
@@ -171,7 +158,7 @@ export default class ResponderTouchHistoryStore {
     } else {
       console.warn(
         'Cannot record touch move without a touch start.\n',
-        `Touch Move: ${printTouch(touch)}\n`,
+        `Touch Move: ${this._printTouch(touch)}\n`,
         `Touch Bank: ${this._printTouchBank()}`
       );
     }
@@ -191,9 +178,26 @@ export default class ResponderTouchHistoryStore {
     } else {
       console.warn(
         'Cannot record touch end without a touch start.\n',
-        `Touch End: ${printTouch(touch)}\n`,
+        `Touch End: ${this._printTouch(touch)}\n`,
         `Touch Bank: ${this._printTouchBank()}`
       );
     }
   };
+
+  _printTouch(touch: Touch): string {
+    return JSON.stringify({
+      identifier: touch.identifier,
+      pageX: touch.pageX,
+      pageY: touch.pageY,
+      timestamp: timestampForTouch(touch)
+    });
+  }
+
+  _printTouchBank(): string {
+    let printed = JSON.stringify(this._touchBank.slice(0, MAX_TOUCH_BANK));
+    if (this._touchBank.length > MAX_TOUCH_BANK) {
+      printed += ' (original size: ' + this._touchBank.length + ')';
+    }
+    return printed;
+  }
 }
diff --git a/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js b/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js
index a96a0baa00..e9bc7b2f4d 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/__tests__/index-test.js
@@ -5,6 +5,7 @@ import React, { createRef } from 'react';
 import ReactDOM from 'react-dom';
 import useResponderEvents from '..';
 import ResponderSystem from '../ResponderSystem';
+import ReactRootView from '../../../exports/AppRegistry/ReactRootView';
 import {
   buttonType,
   buttonsType,
@@ -12,17 +13,16 @@ import {
   createEventTarget,
   testWithPointerType
 } from 'dom-event-testing-library';
-import StyleSheetManager from '../../../exports/StyleSheet/StyleSheetManager';
 
 describe('useResponderEvents', () => {
   let container;
-  let responderSystem;
+  const responderSystem = new ResponderSystem(window);
 
   function render(element) {
     ReactDOM.render(
-      <StyleSheetManager _responderSystem={responderSystem} rootTag={container}>
+      <ReactRootView _responderSystem={responderSystem} rootTag={container}>
         {element}
-      </StyleSheetManager>,
+      </ReactRootView>,
       container
     );
   }
@@ -30,7 +30,6 @@ describe('useResponderEvents', () => {
   beforeEach(() => {
     container = document.createElement('div');
     document.body.appendChild(container);
-    responderSystem = new ResponderSystem(window);
   });
 
   afterEach(() => {
@@ -2804,7 +2803,7 @@ describe('useResponderEvents', () => {
       const target = createEventTarget(targetRef.current);
       act(() => {
         target.pointerdown({ pointerType });
-      }); //
+      });
       expect(eventLog).toEqual([
         'grandParent: onStartShouldSetResponderCapture',
         'parent: onStartShouldSetResponderCapture'
diff --git a/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js b/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js
index b8386cbf2c..c8ae4b6d55 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/createResponderEvent.js
@@ -10,7 +10,7 @@
 import type { TouchEvent } from './ResponderEventTypes';
 
 import getBoundingClientRect from '../../modules/getBoundingClientRect';
-import ResponderTouchHistoryStore from './ResponderTouchHistoryStore';
+import type ResponderTouchHistoryStore from './ResponderTouchHistoryStore';
 
 export type ResponderEvent = {|
   bubbles: boolean,
@@ -185,7 +185,7 @@ export default function createResponderEvent(
     },
     target: domEvent.target,
     timeStamp: timestamp,
-    touchHistory: responderTouchHistoryStore._touchHistory
+    touchHistory: responderTouchHistoryStore.touchHistory
   };
 
   // Using getters and functions serves two purposes:
diff --git a/packages/react-native-web/src/modules/useResponderEvents/index.js b/packages/react-native-web/src/modules/useResponderEvents/index.js
index cc472af4e5..72d91ef3a3 100644
--- a/packages/react-native-web/src/modules/useResponderEvents/index.js
+++ b/packages/react-native-web/src/modules/useResponderEvents/index.js
@@ -20,7 +20,7 @@
 import type { ResponderConfig } from './ResponderSystem';
 
 import * as React from 'react';
-import StyleSheetContext from '../../exports/StyleSheet/StyleSheetContext';
+import RootContext from '../../exports/AppRegistry/RootContext';
 
 const emptyObject = {};
 let idCounter = 0;
@@ -36,17 +36,17 @@ function useStable<T>(getInitialValue: () => T): T {
 export default function useResponderEvents(hostRef: any, config: ResponderConfig = emptyObject) {
   const id = useStable(() => idCounter++);
   const isAttachedRef = React.useRef(false);
-  const styleContext = React.useContext(StyleSheetContext);
+  const rootContext = React.useContext(RootContext);
 
   // This is a separate effects so it doesn't run when the config changes.
   // On initial mount, attach global listeners if needed.
   // On unmount, remove node potentially attached to the Responder System.
   React.useEffect(() => {
-    styleContext.responderSystem.attachListeners();
+    rootContext.responderSystem.attachListeners();
     return () => {
-      styleContext.responderSystem.removeNode(id);
+      rootContext.responderSystem.removeNode(id);
     };
-  }, [id, styleContext.responderSystem]);
+  }, [id, rootContext.responderSystem]);
 
   // Register and unregister with the Responder System as necessary
   React.useEffect(() => {
@@ -74,16 +74,16 @@ export default function useResponderEvents(hostRef: any, config: ResponderConfig
     const node = hostRef.current;
 
     if (requiresResponderSystem) {
-      styleContext.responderSystem.addNode(id, node, config);
+      rootContext.responderSystem.addNode(id, node, config);
       isAttachedRef.current = true;
     } else if (isAttachedRef.current) {
-      styleContext.responderSystem.removeNode(id);
+      rootContext.responderSystem.removeNode(id);
       isAttachedRef.current = false;
     }
-  }, [config, hostRef, id, styleContext.responderSystem]);
+  }, [config, hostRef, id, rootContext.responderSystem]);
 
   React.useDebugValue({
-    isResponder: hostRef.current === styleContext.responderSystem.getResponderNode()
+    isResponder: hostRef.current === rootContext.responderSystem.getResponderNode()
   });
   React.useDebugValue(config);
 }
diff --git a/packages/react-native-web/src/vendor/renderRootContext.js b/packages/react-native-web/src/vendor/renderRootContext.js
deleted file mode 100644
index 92ef5c0a66..0000000000
--- a/packages/react-native-web/src/vendor/renderRootContext.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) Ondrej Zaruba.
- * Copyright (c) Microsoft and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-import StyleSheetManager from '../exports/StyleSheet/StyleSheetManager';
-
-function StyleSheetContextProvider({ children }) {
-    return (
-        <StyleSheetManager>
-            {children}
-        </StyleSheetManager>
-    );
-}
-
-export default function renderRootContext(element: React.ReactElement, options) {
-    return render(element, { wrapper: StyleSheetContextProvider, ...options });
-}

From b991dfeb7998f8cc8b27139e769f4dec6cdaf140 Mon Sep 17 00:00:00 2001
From: Ondrej Zaruba <onzruba@microsoft.com>
Date: Wed, 12 Jan 2022 16:54:16 +0100
Subject: [PATCH 5/5] Add unit tests

---
 packages/examples/pages/multi-window/index.js |  7 +-
 .../src/exports/AppRegistry/ReactRootView.js  | 18 ++---
 .../src/exports/AppRegistry/RootContext.js    |  6 +-
 .../__snapshots__/index-test.js.snap          | 15 +++--
 .../__snapshots__/reactrootview-test.js.snap  | 22 +++++++
 .../__tests__/reactrootview-test.js           | 65 +++++++++++++++++++
 .../src/exports/StyleSheet/StyleResolver.js   | 63 +++++++++---------
 .../exports/StyleSheet/createCSSStyleSheet.js | 12 +++-
 8 files changed, 154 insertions(+), 54 deletions(-)
 create mode 100644 packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/reactrootview-test.js.snap
 create mode 100644 packages/react-native-web/src/exports/AppRegistry/__tests__/reactrootview-test.js

diff --git a/packages/examples/pages/multi-window/index.js b/packages/examples/pages/multi-window/index.js
index 407555a55f..d273b6a65c 100644
--- a/packages/examples/pages/multi-window/index.js
+++ b/packages/examples/pages/multi-window/index.js
@@ -49,9 +49,8 @@ export default function MultiWindowPage() {
   };
 
   return (
-    <Example title="Multi root">
-      <View>
-        <Text>Child Window example</Text>
+    <Example title="Multi window">
+      <>
         <View style={styles.buttons}>
           <Button disabled={!!rootTagContainer} onPress={openWindow} title="Open window" />
           <Button disabled={!rootTagContainer} onPress={closeWindow} title="Close window" />
@@ -64,7 +63,7 @@ export default function MultiWindowPage() {
               rootTagContainer
             )
           : undefined}
-      </View>
+      </>
     </Example>
   );
 }
diff --git a/packages/react-native-web/src/exports/AppRegistry/ReactRootView.js b/packages/react-native-web/src/exports/AppRegistry/ReactRootView.js
index 93f92ad929..ca94a5d992 100644
--- a/packages/react-native-web/src/exports/AppRegistry/ReactRootView.js
+++ b/packages/react-native-web/src/exports/AppRegistry/ReactRootView.js
@@ -9,7 +9,7 @@
  */
 
 import * as React from 'react';
-import RootContext from './RootContext';
+import RootContext, { RootContextType } from './RootContext';
 import StyleResolver from '../StyleSheet/StyleResolver';
 import ResponderSystem from '../../modules/useResponderEvents/ResponderSystem';
 
@@ -23,7 +23,13 @@ export type ReactRootViewProps = {
 export default function ReactRootView(props: ReactRootView): React.Node {
   const styleResolver = React.useRef<StyleResolver>();
   if (!styleResolver.current) {
-    styleResolver.current = props._styleResolver ?? new StyleResolver(props.rootTag);
+    styleResolver.current = props._styleResolver || new StyleResolver(props.rootTag);
+  }
+
+  const responderSystem = React.useRef<ResponderSystem>();
+  if (!responderSystem.current) {
+    responderSystem.current =
+      props._responderSystem || new ResponderSystem(props.rootTag?.ownerDocument?.defaultView);
   }
 
   React.useEffect(() => {
@@ -33,13 +39,7 @@ export default function ReactRootView(props: ReactRootView): React.Node {
     };
   }, []);
 
-  const responderSystem = React.useRef<ResponderSystem>();
-  if (!responderSystem.current) {
-    responderSystem.current =
-      props._responderSystem ?? new ResponderSystem(props.rootTag?.ownerDocument?.defaultView);
-  }
-
-  const styleContext = {
+  const styleContext: RootContextType = {
     rootTag: props.rootTag,
     styleResolver: styleResolver.current,
     responderSystem: responderSystem.current
diff --git a/packages/react-native-web/src/exports/AppRegistry/RootContext.js b/packages/react-native-web/src/exports/AppRegistry/RootContext.js
index 091700b0b4..acf8f70d23 100644
--- a/packages/react-native-web/src/exports/AppRegistry/RootContext.js
+++ b/packages/react-native-web/src/exports/AppRegistry/RootContext.js
@@ -12,10 +12,12 @@ import * as React from 'react';
 import ResponderSystem from '../../modules/useResponderEvents/ResponderSystem';
 import StyleResolver from '../StyleSheet/StyleResolver';
 
-const RootContext = React.createContext<{
+export type RootContextType = {
   styleResoler: StyleResolver,
   responderSystem: typeof ResponderSystem,
   rootTag?: Node
-}>();
+};
+
+const RootContext = React.createContext<RootContextType>(null);
 
 export default RootContext;
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
index 0a12b8bc76..9d40987116 100644
--- a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
@@ -21,18 +21,19 @@ exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`]
 <ReactRootView
   _styleResolver={
     StyleResolver {
-      "_sheet": Object {
-        "clear": [Function],
-        "getTextContent": [Function],
-        "insert": [Function],
-      },
-      "cache": Object {},
-      "inserted": Object {
+      "_cache": Object {},
+      "_inserted": Object {
         "css": Object {},
         "ltr": Object {},
         "rtl": Object {},
         "rtlNoSwap": Object {},
       },
+      "_sheet": Object {
+        "clear": [Function],
+        "getTextContent": [Function],
+        "insert": [Function],
+      },
+      "_styleElement": null,
     }
   }
   rootTag={<body />}
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/reactrootview-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/reactrootview-test.js.snap
new file mode 100644
index 0000000000..f96ffd064a
--- /dev/null
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/reactrootview-test.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReactRootView render ReactRootView render ReactRootView inside ReactRootView 1`] = `null`;
+
+exports[`ReactRootView render ReactRootView render two ReactRootViews at once 1`] = `
+<div
+  class="css-view-1dbjc4n"
+>
+  <div
+    class="css-text-901oao"
+    dir="auto"
+  >
+    Some text
+  </div>
+  <div
+    class="css-text-901oao"
+    dir="auto"
+  >
+    Some text outside
+  </div>
+</div>
+`;
diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/reactrootview-test.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/reactrootview-test.js
new file mode 100644
index 0000000000..0e4ec556e2
--- /dev/null
+++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/reactrootview-test.js
@@ -0,0 +1,65 @@
+/* eslint-env jasmine, jest */
+
+import React from 'react';
+import ReactRootView from '../ReactRootView';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
+import Text from '../../Text';
+import View from '../../View';
+
+describe('ReactRootView', () => {
+  describe('render ReactRootView', () => {
+    test('render ReactRootView inside ReactRootView', () => {
+      const { container } = renderRootView(<ReactRootView />);
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    test('render two ReactRootViews at once', () => {
+      const rootDiv = document.createElement('div');
+      const reactDiv = document.createElement('div');
+      const reactRootDiv = document.createElement('div');
+      rootDiv.appendChild(reactDiv);
+      rootDiv.appendChild(reactRootDiv);
+
+      const { container } = renderRootView(
+        <View>
+          <Text>Some text</Text>
+          <ReactRootView rootTag={reactRootDiv}>
+            <Text>Some text outside</Text>
+          </ReactRootView>
+        </View>,
+        { container: reactDiv }
+      );
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    test('render second ReactRootView in iframe', () => {
+      const rootDiv = document.createElement('div');
+      const reactDiv = document.createElement('div');
+      const iframe = document.createElement('iframe');
+
+      rootDiv.appendChild(reactDiv);
+      rootDiv.appendChild(iframe);
+
+      iframe.onload = () => {
+        const doc = iframe.contentWindow.document;
+        const reactRootDiv = doc.createElement('div');
+        doc.body.appendChild(reactRootDiv);
+
+        const { container } = renderRootView(
+          <View>
+            <Text>Some text</Text>
+            <ReactRootView rootTag={reactRootDiv}>
+              <Text>Some text outside</Text>
+            </ReactRootView>
+          </View>,
+          { container: reactDiv }
+        );
+        expect(container.firstChild).toMatchSnapshot();
+
+        expect(document.getElementByType('styles').length).toBe(1);
+        expect(doc.getElementByType('styles').length).toBe(1);
+      };
+      iframe.src = 'about:blank';
+    });
+  });
+});
diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleResolver.js b/packages/react-native-web/src/exports/StyleSheet/StyleResolver.js
index 22ebaf2afc..cfe350d56a 100644
--- a/packages/react-native-web/src/exports/StyleSheet/StyleResolver.js
+++ b/packages/react-native-web/src/exports/StyleSheet/StyleResolver.js
@@ -13,7 +13,7 @@
  */
 
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
-import createCSSStyleSheet from './createCSSStyleSheet';
+import { createStyleSheet, destroyStyleSheet } from './createCSSStyleSheet';
 import createCompileableStyle from './createCompileableStyle';
 import createOrderedCSSStyleSheet from './createOrderedCSSStyleSheet';
 import flattenArray from '../../modules/flattenArray';
@@ -26,47 +26,52 @@ import modality from './modality';
 import { STYLE_ELEMENT_ID, STYLE_GROUPS } from './constants';
 
 export default class StyleResolver {
-  static resolved = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
-  inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
-  _sheet: any;
+  static _resolved = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
+  _inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
+  _sheet: ?CSSStyleSheet;
+  _styleElement: ?HTMLStyleElement;
+  _cache = {};
 
   constructor(rootTag?: HTMLElement) {
     this._init(rootTag);
   }
 
   _init(rootTag?: HTMLElement) {
-    this._sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(STYLE_ELEMENT_ID, rootTag));
-    this.cache = {};
+    this._styleElement = createStyleSheet(STYLE_ELEMENT_ID, rootTag);
+    this._sheet = createOrderedCSSStyleSheet(this._styleElement?.sheet);
 
-    modality((rule) => this.sheet.insert(rule, STYLE_GROUPS.modality), rootTag?.ownerDocument);
+    modality((rule) => this._sheet.insert(rule, STYLE_GROUPS.modality), rootTag?.ownerDocument);
     initialRules.forEach((rule) => {
-      this.sheet.insert(rule, STYLE_GROUPS.reset);
+      this._sheet.insert(rule, STYLE_GROUPS.reset);
     });
   }
 
+  // Clear all the content created by StyleSheed from the window. This call is irreversible.
   clear() {
-    StyleResolver.resolved = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
-    this.inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
-    this.cache = {};
+    this._inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
+    this._cache = {};
     this._sheet.clear();
+    destroyStyleSheet(this._styleElement);
+    this._sheet = undefined;
+    this._styleElement = undefined;
   }
 
   _addToCache(className, prop, value) {
-    if (!this.cache[prop]) {
-      this.cache[prop] = {};
+    if (!this._cache[prop]) {
+      this._cache[prop] = {};
     }
-    this.cache[prop][value] = className;
+    this._cache[prop][value] = className;
   }
 
   _getClassName(prop, value) {
     const val = stringifyValueWithProperty(value, prop);
-    return this.cache[prop] && this.cache[prop].hasOwnProperty(val) && this.cache[prop][val];
+    return this._cache[prop] && this._cache[prop].hasOwnProperty(val) && this._cache[prop][val];
   }
 
   _injectRegisteredStyle(id) {
     const { doLeftAndRightSwapInRTL, isRTL } = I18nManager.getConstants();
     const dir = isRTL ? (doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap') : 'ltr';
-    if (!this.inserted[dir][id]) {
+    if (!this._inserted[dir][id]) {
       const style = createCompileableStyle(i18nStyle(flattenStyle(id)));
       const results = atomic(style);
       Object.keys(results).forEach((key) => {
@@ -74,10 +79,10 @@ export default class StyleResolver {
         this._addToCache(identifier, property, value);
         rules.forEach((rule) => {
           const group = STYLE_GROUPS.custom[property] || STYLE_GROUPS.atomic;
-          this.sheet.insert(rule, group);
+          this._sheet.insert(rule, group);
         });
       });
-      this.inserted[dir][id] = true;
+      this._inserted[dir][id] = true;
     }
   }
 
@@ -96,14 +101,14 @@ export default class StyleResolver {
       flattenArray(classList).forEach((identifier) => {
         if (identifier) {
           if (
-            this.inserted.css[identifier] == null &&
-            StyleResolver.resolved.css[identifier] != null
+            this._inserted.css[identifier] == null &&
+            StyleResolver._resolved.css[identifier] != null
           ) {
-            const item = StyleResolver.resolved.css[identifier];
+            const item = StyleResolver._resolved.css[identifier];
             item.rules.forEach((rule) => {
-              this.sheet.insert(rule, item.group);
+              this._sheet.insert(rule, item.group);
             });
-            this.inserted.css[identifier] = true;
+            this._inserted.css[identifier] = true;
           }
 
           nextClassList.push(identifier);
@@ -162,8 +167,8 @@ export default class StyleResolver {
     const dir = isRTL ? (doLeftAndRightSwapInRTL ? 'rtl' : 'rtlNoSwap') : 'ltr';
 
     // faster: memoized
-    if (key != null && StyleResolver.resolved[dir][key] != null) {
-      return StyleResolver.resolved[dir][key];
+    if (key != null && StyleResolver._resolved[dir][key] != null) {
+      return StyleResolver._resolved[dir][key];
     }
 
     const flatStyle = flattenStyle(style);
@@ -194,7 +199,7 @@ export default class StyleResolver {
                   const { identifier, rules } = a[key];
                   props.classList.push(identifier);
                   rules.forEach((rule) => {
-                    this.sheet.insert(rule, STYLE_GROUPS.atomic);
+                    this._sheet.insert(rule, STYLE_GROUPS.atomic);
                   });
                 });
               } else {
@@ -216,14 +221,14 @@ export default class StyleResolver {
     }
 
     if (key != null) {
-      StyleResolver.resolved[dir][key] = props;
+      StyleResolver._resolved[dir][key] = props;
     }
 
     return props;
   }
 
   getStyleSheet() {
-    const textContent = this.sheet.getTextContent();
+    const textContent = this._sheet.getTextContent();
     // Reset state on the server so critical css is always the result
     if (!canUseDOM) {
       this._init();
@@ -243,7 +248,7 @@ export default class StyleResolver {
 
       Object.keys(compiled).forEach((key) => {
         const { identifier, rules } = compiled[key];
-        StyleResolver.resolved.css[identifier] = { group: group || STYLE_GROUPS.classic, rules };
+        StyleResolver._resolved.css[identifier] = { group: group || STYLE_GROUPS.classic, rules };
         result[name] = identifier;
       });
     });
diff --git a/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
index 61de5e1829..e60e843f15 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
@@ -10,13 +10,13 @@
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 
 // $FlowFixMe: HTMLStyleElement is incorrectly typed - https://github.com/facebook/flow/issues/2696
-export default function createCSSStyleSheet(id: string, rootTag?: HTMLElement): ?CSSStyleSheet {
+export function createStyleSheet(id: string, rootTag?: HTMLElement) /*: ?HTMLStyleElement*/ {
   if (canUseDOM) {
     const doc = rootTag?.ownerDocument || document;
     const element = doc.getElementById(id);
     if (element != null) {
       // $FlowFixMe: HTMLElement is incorrectly typed
-      return element.sheet;
+      return element;
     } else {
       const element = doc.createElement('style');
       element.setAttribute('id', id);
@@ -24,9 +24,15 @@ export default function createCSSStyleSheet(id: string, rootTag?: HTMLElement):
       if (head) {
         head.insertBefore(element, head.firstChild);
       }
-      return element.sheet;
+      return element;
     }
   } else {
     return null;
   }
 }
+
+export function destroyStyleSheet(element: ?HTMLStyleElement) {
+  if (element) {
+    element.remove();
+  }
+}