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
new file mode 100644
index 0000000000..d3b7d894a2
--- /dev/null
+++ b/packages/examples/pages/_app.js
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ReactRootView } from 'react-native-web';
+
+export default function Application({ Component, pageProps }) {
+  return <ReactRootView>{<Component {...pageProps} />}</ReactRootView>;
+}
diff --git a/packages/examples/pages/multi-window/index.js b/packages/examples/pages/multi-window/index.js
new file mode 100644
index 0000000000..d273b6a65c
--- /dev/null
+++ b/packages/examples/pages/multi-window/index.js
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Button, StyleSheet, Text, View, ReactRootView } from 'react-native';
+
+import Example from '../../shared/example';
+
+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 MultiWindowPage() {
+  const [rootTagContainer, setRootTagContainer] = React.useState(undefined);
+
+  const 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);
+
+    childWindow.addEventListener('beforeunload', () => {
+      setRootTagContainer(undefined);
+    });
+
+    setRootTagContainer(rootTag);
+  };
+
+  const closeWindow = () => {
+    setRootTagContainer(undefined);
+  };
+
+  return (
+    <Example title="Multi window">
+      <>
+        <View style={styles.buttons}>
+          <Button disabled={!!rootTagContainer} onPress={openWindow} title="Open window" />
+          <Button disabled={!rootTagContainer} onPress={closeWindow} title="Close window" />
+        </View>
+        {rootTagContainer
+          ? ReactDOM.createPortal(
+              <ReactRootView rootTag={rootTagContainer}>
+                <ChildWindowPage />
+              </ReactRootView>,
+              rootTagContainer
+            )
+          : undefined}
+      </>
+    </Example>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    gap: '5px'
+  },
+  childItems: {
+    gap: '100px',
+    flexGrow: 1
+  }
+});
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..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,56 +4,62 @@ 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 renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/ActivityIndicator', () => {
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = render(<ActivityIndicator accessibilityLabel="accessibility label" />);
+      const { container } = renderRootView(
+        <ActivityIndicator accessibilityLabel="accessibility label" />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = render(<ActivityIndicator accessibilityLiveRegion="polite" />);
+      const { container } = renderRootView(<ActivityIndicator accessibilityLiveRegion="polite" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "animating"', () => {
     test('is "true"', () => {
-      const { container } = render(<ActivityIndicator animating={true} />);
+      const { container } = renderRootView(<ActivityIndicator animating={true} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('is "false"', () => {
-      const { container } = render(<ActivityIndicator animating={false} />);
+      const { container } = renderRootView(<ActivityIndicator animating={false} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('prop "color"', () => {
-    const { container } = render(<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 } = render(<ActivityIndicator dataSet={{ one: 'one', two: 'two' }} />);
+      const { container } = renderRootView(
+        <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 } = renderRootView(
+        <ActivityIndicator animating={false} hidesWhenStopped={true} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('is "false"', () => {
-      const { container } = render(
+      const { container } = renderRootView(
         <ActivityIndicator animating={false} hidesWhenStopped={false} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -62,7 +68,7 @@ describe('components/ActivityIndicator', () => {
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = render(<ActivityIndicator nativeID="123" />);
+      const { container } = renderRootView(<ActivityIndicator nativeID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -72,7 +78,7 @@ describe('components/ActivityIndicator', () => {
       const onBlur = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<ActivityIndicator onBlur={onBlur} ref={ref} />);
+        renderRootView(<ActivityIndicator onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       const body = createEventTarget(document.body);
@@ -89,7 +95,7 @@ describe('components/ActivityIndicator', () => {
       const onFocus = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<ActivityIndicator onFocus={onFocus} ref={ref} />);
+        renderRootView(<ActivityIndicator onFocus={onFocus} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -102,33 +108,33 @@ describe('components/ActivityIndicator', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      render(<ActivityIndicator ref={ref} />);
+      renderRootView(<ActivityIndicator ref={ref} />);
       expect(ref).toBeCalled();
     });
   });
 
   describe('prop "size"', () => {
     test('is "large"', () => {
-      const { container } = render(<ActivityIndicator size="large" />);
+      const { container } = renderRootView(<ActivityIndicator size="large" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('is a number', () => {
-      const { container } = render(<ActivityIndicator size={30} />);
+      const { container } = renderRootView(<ActivityIndicator size={30} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = render(<ActivityIndicator style={{ borderWidth: 5 }} />);
+      const { container } = renderRootView(<ActivityIndicator style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = render(<ActivityIndicator testID="123" />);
+      const { container } = renderRootView(<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..1e89817870 100644
--- a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js
+++ b/packages/react-native-web/src/exports/AppRegistry/AppContainer.js
@@ -15,12 +15,9 @@ import View from '../View';
 type Props = {
   WrapperComponent?: ?React.ComponentType<*>,
   // $FlowFixMe
-  children?: React.Children,
-  rootTag: any
+  children?: React.Children
 };
 
-const RootTagContext: React.Context<any> = React.createContext(null);
-
 export default function AppContainer(props: Props): React.Node {
   const { children, WrapperComponent } = props;
 
@@ -33,11 +30,9 @@ export default function AppContainer(props: Props): React.Node {
   }
 
   return (
-    <RootTagContext.Provider value={props.rootTag}>
-      <View pointerEvents="box-none" style={styles.appContainer}>
-        {innerView}
-      </View>
-    </RootTagContext.Provider>
+    <View pointerEvents="box-none" style={styles.appContainer}>
+      {innerView}
+    </View>
   );
 }
 
diff --git a/packages/react-native-web/src/exports/AppRegistry/ReactRootView.js b/packages/react-native-web/src/exports/AppRegistry/ReactRootView.js
new file mode 100644
index 0000000000..ca94a5d992
--- /dev/null
+++ b/packages/react-native-web/src/exports/AppRegistry/ReactRootView.js
@@ -0,0 +1,49 @@
+/**
+ * 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 * as React from 'react';
+import RootContext, { RootContextType } from './RootContext';
+import StyleResolver from '../StyleSheet/StyleResolver';
+import ResponderSystem from '../../modules/useResponderEvents/ResponderSystem';
+
+export type ReactRootViewProps = {
+  rootTag?: HTMLElement,
+  children?: React.Children,
+  _styleResolver?: StyleResolver,
+  _responderSystem?: ResponderSystem
+};
+
+export default function ReactRootView(props: ReactRootView): React.Node {
+  const styleResolver = React.useRef<StyleResolver>();
+  if (!styleResolver.current) {
+    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(() => {
+    return () => {
+      styleResolver.current.clear();
+      responderSystem.current.terminateResponder();
+    };
+  }, []);
+
+  const styleContext: RootContextType = {
+    rootTag: props.rootTag,
+    styleResolver: styleResolver.current,
+    responderSystem: responderSystem.current
+  };
+
+  return <RootContext.Provider value={styleContext}>{props.children}</RootContext.Provider>;
+}
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..acf8f70d23
--- /dev/null
+++ b/packages/react-native-web/src/exports/AppRegistry/RootContext.js
@@ -0,0 +1,23 @@
+/**
+ * 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 * as React from 'react';
+import ResponderSystem from '../../modules/useResponderEvents/ResponderSystem';
+import StyleResolver from '../StyleSheet/StyleResolver';
+
+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 20f919caf7..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
@@ -18,11 +18,30 @@ input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-web
 `;
 
 exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = `
-<AppContainer
-  rootTag={Object {}}
+<ReactRootView
+  _styleResolver={
+    StyleResolver {
+      "_cache": Object {},
+      "_inserted": Object {
+        "css": Object {},
+        "ltr": Object {},
+        "rtl": Object {},
+        "rtlNoSwap": Object {},
+      },
+      "_sheet": Object {
+        "clear": [Function],
+        "getTextContent": [Function],
+        "insert": [Function],
+      },
+      "_styleElement": null,
+    }
+  }
+  rootTag={<body />}
 >
-  <NoopComponent />
-</AppContainer>
+  <AppContainer>
+    <NoopComponent />
+  </AppContainer>
+</ReactRootView>
 `;
 
 exports[`AppRegistry getApplication returns "element" and "getStyleElement" 2`] = `
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/AppRegistry/renderApplication.js b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js
index 4ea3c4270d..919262a6b1 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 StyleResolver from '../StyleSheet/StyleResolver';
+import ReactRootView from '../AppRegistry/ReactRootView';
 
 export default function renderApplication<Props: Object>(
-  RootComponent: ComponentType<Props>,
-  WrapperComponent?: ?ComponentType<*>,
+  RootComponent: React.ComponentType<Props>,
+  WrapperComponent?: ?React.ComponentType<*>,
   callback?: () => void,
   options: {
     hydrate: boolean,
@@ -32,23 +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>,
+    <ReactRootView rootTag={rootTag}>
+      <AppContainer WrapperComponent={WrapperComponent}>
+        <RootComponent {...initialProps} />
+      </AppContainer>
+    </ReactRootView>,
     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={{}}>
-      <RootComponent {...initialProps} />
-    </AppContainer>
+    <ReactRootView _styleResolver={styleResolver} rootTag={document.body}>
+      <AppContainer WrapperComponent={WrapperComponent}>
+        <RootComponent {...initialProps} />
+      </AppContainer>
+    </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 e901ab00ef..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,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 renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/Button', () => {
   test('prop "accessibilityLabel"', () => {
-    const { container } = render(<Button accessibilityLabel="accessibility label" title="" />);
+    const { container } = renderRootView(
+      <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 } = renderRootView(<Button color={color} title="" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "disabled"', () => {
-    const { container } = render(<Button disabled={true} title="" />);
+    const { container } = renderRootView(<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="" />);
+      renderRootView(<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 } = renderRootView(<Button testID="123" title="" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "title"', () => {
-    const { container } = render(<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 ecee57950a..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 { render } from '@testing-library/react';
+import renderRootView from '../../AppRegistry/renderRootView';
 
 function findCheckbox(container) {
   return container.firstChild.querySelector('input');
@@ -13,40 +13,40 @@ function findCheckbox(container) {
 describe('CheckBox', () => {
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = render(<CheckBox accessibilityLabel="accessibility label" />);
+      const { container } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<CheckBox />);
       expect(findCheckbox(container).disabled).toBe(false);
     });
 
     test('when "true" a disabled checkbox is rendered', () => {
-      const { container } = render(<CheckBox disabled />);
+      const { container } = renderRootView(<CheckBox disabled />);
       expect(findCheckbox(container).disabled).toBe(true);
     });
   });
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = render(<CheckBox nativeID="123" />);
+      const { container } = renderRootView(<CheckBox nativeID="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -56,7 +56,7 @@ describe('CheckBox', () => {
       const onBlur = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<CheckBox onBlur={onBlur} ref={ref} />);
+        renderRootView(<CheckBox onBlur={onBlur} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       const body = createEventTarget(document.body);
@@ -71,7 +71,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 } = renderRootView(<CheckBox onChange={onChange} value={false} />);
       const checkbox = findCheckbox(container);
       checkbox.click(); // Needed to get ReactDOM to trigger 'change' event
       expect(onChange).toHaveBeenCalled();
@@ -83,7 +83,7 @@ describe('CheckBox', () => {
       const onFocus = jest.fn();
       const ref = React.createRef();
       act(() => {
-        render(<CheckBox onFocus={onFocus} ref={ref} />);
+        renderRootView(<CheckBox onFocus={onFocus} ref={ref} />);
       });
       const target = createEventTarget(ref.current);
       act(() => {
@@ -96,7 +96,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 } = renderRootView(
+        <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 +106,7 @@ describe('CheckBox', () => {
 
     test('when value is "true" it receives "false"', () => {
       const onValueChange = jest.fn();
-      const { container } = render(<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);
@@ -114,33 +116,33 @@ describe('CheckBox', () => {
   describe('prop "ref"', () => {
     test('value is set', () => {
       const ref = jest.fn();
-      render(<CheckBox ref={ref} />);
+      renderRootView(<CheckBox ref={ref} />);
       expect(ref).toBeCalled();
     });
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = render(<CheckBox style={{ borderWidth: 5 }} />);
+      const { container } = renderRootView(<CheckBox style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = render(<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 } = render(<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 } = render(<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 5c5bda2d7b..5d8433bb46 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__/__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/__tests__/index-test.js b/packages/react-native-web/src/exports/Image/__tests__/index-test.js
index a08bad5659..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 { render } from '@testing-library/react';
+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 } = render(
+    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 } = render(<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 } = render(<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 } = render(<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 } = render(<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 } = render(
+      const { container } = renderRootView(
         <Image defaultSource={defaultSource} style={{ height: 20, width: 40 }} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -74,17 +74,17 @@ describe('components/Image', () => {
 
   test('prop "draggable"', () => {
     const defaultSource = { uri: 'https://google.com/favicon.ico' };
-    const { container } = render(<Image defaultSource={defaultSource} draggable={true} />);
+    const { container } = renderRootView(<Image defaultSource={defaultSource} draggable={true} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "focusable"', () => {
-    const { container } = render(<Image focusable={true} />);
+    const { container } = renderRootView(<Image focusable={true} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "nativeID"', () => {
-    const { container } = render(<Image nativeID="nativeID" />);
+    const { container } = renderRootView(<Image nativeID="nativeID" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -97,7 +97,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      render(
+      renderRootView(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -119,7 +119,7 @@ describe('components/Image', () => {
       const onLoadEndStub = jest.fn();
       const uri = 'https://test.com/img.jpg';
       ImageUriCache.add(uri);
-      render(
+      renderRootView(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -136,7 +136,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      const { rerender } = render(
+      const { rerender } = renderRootView(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -162,7 +162,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      const { rerender } = render(
+      const { rerender } = renderRootView(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -188,7 +188,7 @@ describe('components/Image', () => {
       const onLoadStartStub = jest.fn();
       const onLoadStub = jest.fn();
       const onLoadEndStub = jest.fn();
-      const { rerender } = render(
+      const { rerender } = renderRootView(
         <Image
           onLoad={onLoadStub}
           onLoadEnd={onLoadEndStub}
@@ -214,7 +214,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 } = renderRootView(<Image resizeMode={resizeMode} />);
         expect(container.firstChild).toMatchSnapshot();
       });
     });
@@ -224,14 +224,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(() => 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 } = render(<Image source={source} />);
+      const { container } = renderRootView(<Image source={source} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
@@ -242,7 +242,9 @@ describe('components/Image', () => {
       });
       return Image.prefetch(uri).then(() => {
         const source = { uri };
-        const { container } = render(<Image source={source} />, { disableLifecycleMethods: true });
+        const { container } = renderRootView(<Image source={source} />, {
+          disableLifecycleMethods: true
+        });
         expect(container.firstChild).toMatchSnapshot();
         ImageUriCache.remove(uri);
       });
@@ -255,7 +257,7 @@ describe('components/Image', () => {
       ImageUriCache.add(uriTwo);
 
       // initial render
-      const { container, rerender } = render(<Image source={{ uri: uriOne }} />);
+      const { container, rerender } = renderRootView(<Image source={{ uri: uriOne }} />);
       ImageUriCache.remove(uriOne);
       expect(container.firstChild).toMatchSnapshot();
       // props update
@@ -268,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 } = render(<Image />);
+      const { container, rerender } = renderRootView(<Image />);
       act(() => {
         rerender(<Image source={{ uri }} />);
       });
@@ -282,7 +284,9 @@ describe('components/Image', () => {
       ImageLoader.load = jest.fn().mockImplementationOnce((_, onLoad, onError) => {
         loadCallback = onLoad;
       });
-      const { container } = render(<Image defaultSource={{ uri: defaultUri }} source={{ uri }} />);
+      const { container } = renderRootView(
+        <Image defaultSource={{ uri: defaultUri }} source={{ uri }} />
+      );
       expect(container.firstChild).toMatchSnapshot();
       act(() => {
         loadCallback();
@@ -299,12 +303,12 @@ describe('components/Image', () => {
       }));
 
       PixelRatio.get = jest.fn(() => 1.0);
-      let { container } = render(<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 } = render(<Image source={1} />));
+        ({ container } = renderRootView(<Image source={1} />));
       });
       expect(container.querySelector('img').src).toBe('http://localhost/static/img@2x.png');
     });
@@ -312,12 +316,12 @@ describe('components/Image', () => {
 
   describe('prop "style"', () => {
     test('supports "resizeMode" property', () => {
-      const { container } = render(<Image style={{ resizeMode: 'contain' }} />);
+      const { container } = renderRootView(<Image style={{ resizeMode: 'contain' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('supports "shadow" properties (convert to filter)', () => {
-      const { container } = render(
+      const { container } = renderRootView(
         <Image style={{ shadowColor: 'red', shadowOffset: { width: 1, height: 1 } }} />
       );
       expect(container.firstChild).toMatchSnapshot();
@@ -325,20 +329,22 @@ describe('components/Image', () => {
 
     test('supports "tintcolor" property (convert to filter)', () => {
       const defaultSource = { uri: 'https://google.com/favicon.ico' };
-      const { container } = render(
+      const { container } = renderRootView(
         <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 } = renderRootView(
+        <Image style={{ overlayColor: 'red', tintColor: 'blue' }} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('prop "testID"', () => {
-    const { container } = render(<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 7cbde9f587..4bb104f9a2 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..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 { render } from '@testing-library/react';
+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 } = render(
+      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 } = render(<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 } = render(<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 fece0d5979..33c82bc11f 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/ModalContent.js b/packages/react-native-web/src/exports/Modal/ModalContent.js
index ee11e7af8f..2e66625a1c 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 RootContext from '../AppRegistry/RootContext';
 
 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 rootContext = React.useContext(RootContext);
 
   React.useEffect(() => {
     if (canUseDOM) {
+      const document = rootContext.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, 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 5b11636af8..4fb37c00d2 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,14 +25,19 @@ 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) {
+function attemptFocus(element: any, document: Document) {
   if (!canUseDOM) {
     return false;
   }
@@ -45,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;
     }
   }
@@ -72,6 +78,7 @@ export type ModalFocusTrapProps = {|
 
 const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps): React.Node => {
   const trapElementRef = React.useRef<?HTMLElement>();
+  const rootContext = React.useContext(RootContext);
   const focusRef = React.useRef<{ trapFocusInProgress: boolean, lastFocusedElement: ?HTMLElement }>(
     {
       trapFocusInProgress: false,
@@ -81,6 +88,7 @@ const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps): React.Node =
 
   React.useEffect(() => {
     if (canUseDOM) {
+      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
@@ -102,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) {
@@ -123,20 +131,24 @@ const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps): React.Node =
       document.addEventListener('focus', trapFocus, true);
       return () => document.removeEventListener('focus', trapFocus, true);
     }
-  }, [active]);
+  }, [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 lastFocusedElementOutsideTrap = document.activeElement;
-      return function () {
-        if (lastFocusedElementOutsideTrap && document.contains(lastFocusedElementOutsideTrap)) {
-          UIManager.focus(lastFocusedElementOutsideTrap);
-        }
-      };
-    }
-  }, []);
+  React.useEffect(
+    function () {
+      if (canUseDOM) {
+        const document = rootContext.rootTag?.ownerDocument ?? window.document;
+        const lastFocusedElementOutsideTrap = document.activeElement;
+        return function () {
+          if (lastFocusedElementOutsideTrap && document.contains(lastFocusedElementOutsideTrap)) {
+            UIManager.focus(lastFocusedElementOutsideTrap);
+          }
+        };
+      }
+    },
+    [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 10fc4c2b49..7782d5e7d9 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 RootContext from '../AppRegistry/RootContext';
 
 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 rootContext = React.useContext(RootContext);
 
   if (canUseDOM && !elementRef.current) {
+    const document = rootContext.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 = rootContext.rootTag?.ownerDocument ?? window.document;
         if (document.body && elementRef.current) {
           document.body.removeChild(elementRef.current);
           elementRef.current = null;
         }
       };
     }
-  }, []);
+  }, [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 ea1e4fbac7..5cca2419ed 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 renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/Modal', () => {
   test('visible by default', () => {
-    const { getByTestId } = render(
+    const { getByTestId } = renderRootView(
       <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 } = renderRootView(
       <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 } = renderRootView(
       <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 } = renderRootView(
       <>
         <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 } = renderRootView(
       <>
         <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 } = renderRootView(
       <>
         <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 } = renderRootView(
       <>
         <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} />);
+    renderRootView(<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} />);
+    renderRootView(<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} />);
+    renderRootView(<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} />);
+    renderRootView(<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 } = renderRootView(<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 } = 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 } = render(<Modal animationType={'none'} visible={true} />);
+    const { rerender, baseElement } = renderRootView(
+      <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 } = renderRootView(
       <Modal visible={true}>
         <a href={'#hello'}>Hello</a>
       </Modal>
@@ -226,7 +229,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is trapped by default', () => {
-    render(
+    renderRootView(
       <>
         <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 } = renderRootView(
       <>
         <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 } = renderRootView(
       <>
         <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 } = renderRootView(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -396,7 +399,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is trapped when active', () => {
-    render(
+    renderRootView(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -416,7 +419,7 @@ describe('components/Modal', () => {
   });
 
   test('focus wraps forwards', () => {
-    render(
+    renderRootView(
       <>
         <Modal visible={true}>
           <a data-testid={'inside-a'} href={'#'}>
@@ -442,7 +445,7 @@ describe('components/Modal', () => {
   });
 
   test('focus wraps backwards', () => {
-    render(
+    renderRootView(
       <>
         <Modal visible={true}>
           <a data-testid={'inside-a'} href={'#'}>
@@ -468,7 +471,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is trapped without contents', () => {
-    render(
+    renderRootView(
       <>
         <a data-testid={'outside'} href={'#outside'}>
           Outside
@@ -485,7 +488,7 @@ describe('components/Modal', () => {
   });
 
   test('focus is not trapped when inactive', () => {
-    render(
+    renderRootView(
       <>
         <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 } = renderRootView(
       <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 } = renderRootView(
       <Modal visible={true}>
         <a data-testid={'hello'} href={'#hello'}>
           Hello World
@@ -540,7 +543,7 @@ describe('components/Modal', () => {
       );
     }
 
-    render(<TestComponent />);
+    renderRootView(<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} />);
+    renderRootView(<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(
+    renderRootView(
       <>
         <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 } = renderRootView(
       <>
         <Modal animationType={'slide'} onRequestClose={spyA} visible={false}>
           <a data-testid={'a'} />
diff --git a/packages/react-native-web/src/exports/Picker/PickerItem.js b/packages/react-native-web/src/exports/Picker/PickerItem.js
index 649b2cdf16..f12e54b119 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..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 { render } from '@testing-library/react';
+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 } = render(picker);
+      const { container } = renderRootView(picker);
       expect(container.firstChild.firstChild).toMatchSnapshot();
     });
 
     test('items', () => {
       const pickerItem = <Picker.Item label="label-1" value="value-1" />;
-      const { container } = render(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 } = render(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 } = render(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 } = render(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 } = render(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 1a3c297255..cd4b628d20 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,
@@ -51,6 +52,7 @@ const Picker: React.AbstractComponent<
   } = props;
 
   const hostRef = React.useRef(null);
+  const rootContext = React.useContext(RootContext);
 
   function handleChange(e: Object) {
     const { selectedIndex, value } = e.target;
@@ -76,7 +78,7 @@ const Picker: React.AbstractComponent<
 
   supportedProps.ref = setRef;
 
-  return createElement('select', supportedProps);
+  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 b9a4a2d8d2..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 { render } from '@testing-library/react';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/Pressable', () => {
   test('default', () => {
-    const { container } = render(<Pressable />);
+    const { container } = renderRootView(<Pressable />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
-      const { container } = render(<Pressable accessibilityLabel="label" />);
+      const { container } = renderRootView(<Pressable accessibilityLabel="label" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = render(<Pressable accessibilityLiveRegion="polite" />);
+      const { container } = renderRootView(<Pressable accessibilityLiveRegion="polite" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityRole"', () => {
     test('value is set', () => {
-      const { container } = render(<Pressable accessibilityRole="none" />);
+      const { container } = renderRootView(<Pressable accessibilityRole="none" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value is "button"', () => {
-      const { container } = render(<Pressable accessibilityRole="button" />);
+      const { container } = renderRootView(<Pressable accessibilityRole="button" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value alters HTML element', () => {
-      const { container } = render(<Pressable accessibilityRole="article" />);
+      const { container } = renderRootView(<Pressable accessibilityRole="article" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('prop "disabled"', () => {
-    const { container } = render(<Pressable disabled={true} />);
+    const { container } = renderRootView(<Pressable disabled={true} />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prop "href"', () => {
-    const { container } = render(<Pressable href="#href" />);
+    const { container } = renderRootView(<Pressable href="#href" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = render(<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 } = render(
+      ({ 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(() => {
-      render(<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 } = render(
+      ({ 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 } = render(
+      ({ container } = renderRootView(
         <Pressable
           children={({ pressed }) => (pressed ? <div data-testid="press-content" /> : null)}
           onContextMenu={onContextMenu}
@@ -206,7 +206,7 @@ describe('components/Pressable', () => {
     }
 
     act(() => {
-      ({ container } = render(<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();
-      render(<Pressable ref={ref} />);
+      renderRootView(<Pressable ref={ref} />);
       expect(ref).toBeCalled();
     });
 
     test('node has imperative methods', () => {
       const ref = React.createRef();
       act(() => {
-        render(<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 } = render(<Pressable pointerEvents="box-only" />);
+    const { container } = renderRootView(<Pressable pointerEvents="box-only" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = render(<Pressable style={{ borderWidth: 5 }} />);
+      const { container } = renderRootView(<Pressable style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = render(<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 db0d77cd61..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 { render } from '@testing-library/react';
+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 } = render(<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 } = render(<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 9fcc6c753c..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 { render } from '@testing-library/react';
+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(() => {
-        render(<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(() => {
-        render(
+        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();
-      render(<ScrollView ref={ref} />);
+      renderRootView(<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 } = renderRootView(
+          <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} />);
+        renderRootView(<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 } = renderRootView(<ScrollView style={{ backgroundColor: 'red' }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('with', () => {
-      const { container } = render(
+      const { container } = renderRootView(
         <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 62%
rename from packages/react-native-web/src/exports/StyleSheet/createStyleResolver.js
rename to packages/react-native-web/src/exports/StyleSheet/StyleResolver.js
index 4c8ceb40ea..cfe350d56a 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createStyleResolver.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';
@@ -25,56 +25,71 @@ 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: {} };
+export default class StyleResolver {
+  static _resolved = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
+  _inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
+  _sheet: ?CSSStyleSheet;
+  _styleElement: ?HTMLStyleElement;
+  _cache = {};
 
-  const init = () => {
-    inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
-    sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(STYLE_ELEMENT_ID));
-    cache = {};
-    modality((rule) => sheet.insert(rule, STYLE_GROUPS.modality));
+  constructor(rootTag?: HTMLElement) {
+    this._init(rootTag);
+  }
+
+  _init(rootTag?: HTMLElement) {
+    this._styleElement = createStyleSheet(STYLE_ELEMENT_ID, rootTag);
+    this._sheet = createOrderedCSSStyleSheet(this._styleElement?.sheet);
+
+    modality((rule) => this._sheet.insert(rule, STYLE_GROUPS.modality), rootTag?.ownerDocument);
     initialRules.forEach((rule) => {
-      sheet.insert(rule, STYLE_GROUPS.reset);
+      this._sheet.insert(rule, STYLE_GROUPS.reset);
     });
-  };
+  }
 
-  init();
+  // Clear all the content created by StyleSheed from the window. This call is irreversible.
+  clear() {
+    this._inserted = { css: {}, ltr: {}, rtl: {}, rtlNoSwap: {} };
+    this._cache = {};
+    this._sheet.clear();
+    destroyStyleSheet(this._styleElement);
+    this._sheet = undefined;
+    this._styleElement = undefined;
+  }
 
-  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 +100,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 +118,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 +139,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 +162,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 +181,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 +199,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 +221,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..e60e843f15 100644
--- a/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
+++ b/packages/react-native-web/src/exports/StyleSheet/createCSSStyleSheet.js
@@ -10,22 +10,29 @@
 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 function createStyleSheet(id: string, rootTag?: HTMLElement) /*: ?HTMLStyleElement*/ {
   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;
+      return element;
     } 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);
       }
-      return element.sheet;
+      return element;
     }
   } else {
     return null;
   }
 }
+
+export function destroyStyleSheet(element: ?HTMLStyleElement) {
+  if (element) {
+    element.remove();
+  }
+}
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/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/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..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 { render } from '@testing-library/react';
+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 } = render(<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 } = render(<Switch />);
+      const { container } = renderRootView(<Switch />);
       expect(findCheckbox(container).disabled).toBe(false);
     });
 
     test('when "true" a disabled checkbox is rendered', () => {
-      const { container } = render(<Switch disabled />);
+      const { container } = renderRootView(<Switch disabled />);
       expect(findCheckbox(container).disabled).toBe(true);
     });
   });
@@ -29,7 +29,7 @@ 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 } = renderRootView(<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 +37,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 } = renderRootView(<Switch onValueChange={onValueChange} value />);
       const checkbox = findCheckbox(container);
       checkbox.click(); // Needed to get ReactDOM to trigger 'change' event
       expect(onValueChange).toHaveBeenCalledWith(false);
@@ -46,12 +46,12 @@ describe('components/Switch', () => {
 
   describe('value', () => {
     test('when "false" an unchecked checkbox is rendered', () => {
-      const { container } = render(<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 } = render(<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 dbcca6f94c..dcbd6ac899 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..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,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 renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/Text', () => {
   test('default', () => {
-    const { container } = render(<Text />);
+    const { container } = renderRootView(<Text />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('nested', () => {
-    const { container } = render(<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 } = render(<Text accessibilityLabel="accessibility label" />);
+      const { container } = renderRootView(<Text accessibilityLabel="accessibility label" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLabelledBy"', () => {
     test('value is set', () => {
-      const { container } = render(<Text accessibilityLabelledBy="123" />);
+      const { container } = renderRootView(<Text accessibilityLabelledBy="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = render(<Text accessibilityLiveRegion="polite" />);
+      const { container } = renderRootView(<Text accessibilityLiveRegion="polite" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityRole"', () => {
     test('value is set', () => {
-      const { container } = render(<Text accessibilityRole="none" />);
+      const { container } = renderRootView(<Text accessibilityRole="none" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value is "button"', () => {
-      const { container } = render(<Text accessibilityRole="button" />);
+      const { container } = renderRootView(<Text accessibilityRole="button" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value alters HTML element', () => {
-      const { container } = render(<Text accessibilityRole="article" />);
+      const { container } = renderRootView(<Text accessibilityRole="article" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('allows "dir" to be overridden', () => {
-    const { container } = render(<Text dir="rtl" />);
+    const { container } = renderRootView(<Text dir="rtl" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "href"', () => {
     test('value is set', () => {
-      const { container } = render(<Text href="https://example.com" />);
+      const { container } = renderRootView(<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 } = renderRootView(
+        <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 } = renderRootView(<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 } = renderRootView(
+        <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 } = renderRootView(
+        <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 } = renderRootView(
+        <Text href="https://example.com" hrefAttrs={hrefAttrs} />
+      );
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "lang"', () => {
     test('undefined', () => {
-      const { container } = render(<Text />);
+      const { container } = renderRootView(<Text />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('fr', () => {
-      const { container } = render(<Text lang="fr" />);
+      const { container } = renderRootView(<Text lang="fr" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = render(<Text nativeID="nativeID" />);
+      const { container } = renderRootView(<Text nativeID="nativeID" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "numberOfLines"', () => {
     test('value is set', () => {
-      const { container } = render(<Text numberOfLines={3} />);
+      const { container } = renderRootView(<Text numberOfLines={3} />);
       expect(container.firstChild).toMatchSnapshot();
     });
     test('value is set to one', () => {
-      const { container } = render(<Text numberOfLines={1} />);
+      const { container } = renderRootView(<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} />);
+        renderRootView(<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} />);
+        renderRootView(<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} />);
+        renderRootView(<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} />);
+        renderRootView(<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} />);
+        renderRootView(<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} />);
+        renderRootView(<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} />);
+      renderRootView(<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 } = renderRootView(
+          <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} />);
+        renderRootView(<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 } = renderRootView(<Text selectable={false} />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value of true', () => {
-      const { container } = render(<Text selectable={true} />);
+      const { container } = renderRootView(<Text selectable={true} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = render(<Text style={{ borderWidth: 5 }} />);
+      const { container } = renderRootView(<Text style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = render(<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 a2a74ce474..13d92f5021 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..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 { render } from '@testing-library/react';
+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 } = render(<TextInput />);
+      const { container } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(input.getAttribute('autoComplete')).toEqual('on');
     });
 
     test('value "off"', () => {
-      const { container } = render(<TextInput autoComplete="off" />);
+      const { container } = renderRootView(<TextInput autoComplete="off" />);
       const input = findInput(container);
       expect(input.getAttribute('autoComplete')).toEqual('off');
     });
 
     test('autoCompleteType fallback', () => {
-      const { container } = render(<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 } = render(<TextInput />);
+      const { container } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(document.activeElement).not.toBe(input);
     });
 
     test('value "true"', () => {
-      const { container } = render(<TextInput autoFocus />);
+      const { container } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(
+        <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 } = renderRootView(<TextInput defaultValue={defaultValue} />);
     const input = findInput(container);
     expect(input.value).toEqual(defaultValue);
   });
 
   describe('prop "disabled"', () => {
     test('value "false"', () => {
-      const { container } = render(<TextInput />);
+      const { container } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(input.disabled).toEqual(false);
     });
 
     test('value "true"', () => {
-      const { container } = render(<TextInput disabled={true} />);
+      const { container } = renderRootView(<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 } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(input.readOnly).toEqual(false);
     });
 
     test('value "false"', () => {
-      const { container } = render(<TextInput editable={false} />);
+      const { container } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<TextInput keyboardType="number-pad" />);
       const input = findInput(container);
       expect(input.inputMode).toEqual('numeric');
     });
 
     test('value "numeric"', () => {
-      const { container } = render(<TextInput keyboardType="numeric" />);
+      const { container } = renderRootView(<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 } = renderRootView(<TextInput keyboardType="phone-pad" />);
       const input = findInput(container);
       expect(input.type).toEqual('tel');
     });
 
     test('value "url"', () => {
-      const { container } = render(<TextInput keyboardType="url" />);
+      const { container } = renderRootView(<TextInput keyboardType="url" />);
       const input = findInput(container);
       expect(input.type).toEqual('url');
     });
   });
 
   test('prop "maxLength"', () => {
-    let { container } = render(<TextInput />);
+    let { container } = renderRootView(<TextInput />);
     let input = findInput(container);
     expect(input.getAttribute('maxLength')).toEqual(null);
 
-    ({ container } = render(<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 } = render(<TextInput />);
+      const { container } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(input).toBeDefined();
     });
 
     test('value "true"', () => {
-      const { container } = render(<TextInput multiline />);
+      const { container } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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} />);
+      renderRootView(<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 } = 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 }));
@@ -265,7 +267,7 @@ describe('components/TextInput', () => {
 
   test.skip('prop "onChangeText"', () => {
     const onChangeText = jest.fn();
-    const { container } = render(<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' }));
@@ -278,7 +280,7 @@ describe('components/TextInput', () => {
     const onFocus = jest.fn();
     const ref = React.createRef();
     act(() => {
-      render(<TextInput onFocus={onFocus} ref={ref} />);
+      renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(<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 } = renderRootView(
         <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 } = 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 }));
@@ -516,7 +518,7 @@ describe('components/TextInput', () => {
 
   describe('prop "onSubmitEditing"', () => {
     test('single-line input', (done) => {
-      const { container } = render(
+      const { container } = renderRootView(
         <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 } = renderRootView(
         <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 } = renderRootView(
         <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 } = renderRootView(
         <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 } = renderRootView(<TextInput returnKeyType={returnKeyType} />);
     const input = findInput(container);
     expect(input.getAttribute('enterkeyhint')).toEqual(returnKeyType);
   });
 
   test('prop "secureTextEntry"', () => {
-    let { container } = render(<TextInput secureTextEntry />);
+    let { container } = renderRootView(<TextInput secureTextEntry />);
     const input = findInput(container);
     expect(input.getAttribute('type')).toEqual('password');
     // ignored for multiline
-    ({ container } = render(<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 } = render(<TextInput defaultValue={'text'} />);
+      const { container } = renderRootView(<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 } = 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 } = render(
+      const { container: customContainer } = renderRootView(
         <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 } = renderRootView(<TextInput />);
       const input = findInput(container);
       expect(input.getAttribute('spellCheck')).toEqual('true');
     });
 
     test('inherit from "autoCorrect"', () => {
-      const { container } = render(<TextInput autoCorrect={false} />);
+      const { container } = renderRootView(<TextInput autoCorrect={false} />);
       const input = findInput(container);
       expect(input.getAttribute('spellCheck')).toEqual('false');
     });
 
     test('value "false"', () => {
-      const { container } = render(<TextInput spellCheck={false} />);
+      const { container } = renderRootView(<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 } = renderRootView(<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} />);
+      renderRootView(<TextInput ref={ref} />);
       expect(typeof ref.current.clear).toBe('function');
     });
 
     test('node.isFocused()', () => {
       const ref = React.createRef();
-      render(<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 a37dd8ca86..4bf0c693c6 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
@@ -166,6 +167,7 @@ const TextInput: React.AbstractComponent<
 
   const dimensions = React.useRef({ height: null, width: null });
   const hostRef = React.useRef(null);
+  const rootContext = React.useContext(RootContext);
 
   const handleContentSizeChange = React.useCallback(
     (hostNode) => {
@@ -359,7 +361,7 @@ const TextInput: React.AbstractComponent<
 
   supportedProps.ref = setRef;
 
-  return createElement(component, supportedProps);
+  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 74aa89d6e7..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 { render } from '@testing-library/react';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 import TouchableWithoutFeedback from '../';
 import View from '../../View';
 
 describe('components/TouchableWithoutFeedback', () => {
   test('forwards ref', () => {
     const ref = jest.fn();
-    render(
+    renderRootView(
       <TouchableWithoutFeedback ref={ref}>
         <View />
       </TouchableWithoutFeedback>
@@ -16,7 +16,7 @@ describe('components/TouchableWithoutFeedback', () => {
 
   test('forwards ref of child', () => {
     const ref = jest.fn();
-    render(
+    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 592db3f678..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 { render } from '@testing-library/react';
+import renderRootView from '../../../exports/AppRegistry/renderRootView';
 
 describe('components/View', () => {
   test('default', () => {
-    const { container } = render(<View />);
+    const { container } = renderRootView(<View />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   test('non-text is rendered', () => {
     const children = <View testID="1" />;
-    const { container } = render(<View>{children}</View>);
+    const { container } = renderRootView(<View>{children}</View>);
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -30,12 +30,12 @@ describe('components/View', () => {
     });
 
     test('error logged (single)', () => {
-      render(<View>hello</View>);
+      renderRootView(<View>hello</View>);
       expect(console.error).toBeCalled();
     });
 
     test('error logged (array)', () => {
-      render(
+      renderRootView(
         <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 } = renderRootView(<View accessibilityLabel="accessibility label" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLabelledBy"', () => {
     test('value is set', () => {
-      const { container } = render(<View accessibilityLabelledBy="123" />);
+      const { container } = renderRootView(<View accessibilityLabelledBy="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityLiveRegion"', () => {
     test('value is set', () => {
-      const { container } = render(<View accessibilityLiveRegion="polite" />);
+      const { container } = renderRootView(<View accessibilityLiveRegion="polite" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "accessibilityRole"', () => {
     test('value is set', () => {
-      const { container } = render(<View accessibilityRole="none" />);
+      const { container } = renderRootView(<View accessibilityRole="none" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value is "button"', () => {
-      const { container } = render(<View accessibilityRole="button" />);
+      const { container } = renderRootView(<View accessibilityRole="button" />);
       expect(container.firstChild).toMatchSnapshot();
     });
 
     test('value alters HTML element', () => {
-      const { container } = render(<View accessibilityRole="article" />);
+      const { container } = renderRootView(<View accessibilityRole="article" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   test('allows "dir" to be overridden', () => {
-    const { container } = render(<View dir="rtl" />);
+    const { container } = renderRootView(<View dir="rtl" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "href"', () => {
     test('value is set', () => {
-      const { container } = render(<View href="https://example.com" />);
+      const { container } = renderRootView(<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 } = renderRootView(
+        <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 } = renderRootView(<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 } = renderRootView(
+        <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 } = renderRootView(
+        <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 } = renderRootView(
+        <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 } = renderRootView(<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} />);
+        renderRootView(<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} />);
+        renderRootView(<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} />);
+      renderRootView(<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 } = renderRootView(
+          <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} />);
+        renderRootView(<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 } = renderRootView(<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 } = renderRootView(
           <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 } = renderRootView(<View pointerEvents="box-only" />);
     expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('prop "style"', () => {
     test('value is set', () => {
-      const { container } = render(<View style={{ borderWidth: 5 }} />);
+      const { container } = renderRootView(<View style={{ borderWidth: 5 }} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('prop "testID"', () => {
     test('value is set', () => {
-      const { container } = render(<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 13c98b7b99..47e58388ba 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/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/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..e0569f6271 100644
--- a/packages/react-native-web/src/modules/usePlatformMethods/index.js
+++ b/packages/react-native-web/src/modules/usePlatformMethods/index.js
@@ -13,13 +13,22 @@ 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';
 
 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,6 +69,7 @@ export default function usePlatformMethods({
 }): (hostNode: any) => void {
   const previousStyleRef = useRef(null);
   const setNativePropsArgsRef = useRef(null);
+  const rootContext = useContext(RootContext);
   setNativePropsArgsRef.current = { classList, pointerEvents, style };
 
   // Avoid creating a new ref on every render. The props only need to be
@@ -72,7 +82,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,
+          rootContext.styleResolver,
+          nativeProps,
+          classList,
+          pointerEvents,
+          style,
+          previousStyleRef
+        );
       };
     }
   });
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..e6637aede9 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 RootContext from '../../exports/AppRegistry/RootContext';
 
 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 rootContext = useContext(RootContext);
   if (pressResponderRef.current == null) {
-    pressResponderRef.current = new PressResponder(config);
+    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);
-  }, [config, pressResponder]);
+    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 b9aaad7036..59c426aa21 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.
@@ -223,283 +223,279 @@ const shouldSetResponderEvents = {
 };
 
 const emptyResponder = { id: null, idPath: null, node: null };
-const responderListenersMap = new Map();
 
-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;
-}
-
-/**
- * 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.
- */
-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.
-   */
-
-  // 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);
-
-  /**
-   * Record the state of active pointers
-   */
+  _changeCurrentResponder(responder: ResponderInstance) {
+    this._currentResponder = responder;
+  }
 
-  if (isStartEvent || isMoveEvent || isEndEvent) {
-    if (domEvent.touches) {
-      trackedTouchCount = domEvent.touches.length;
-    } else {
-      if (isStartEvent) {
-        trackedTouchCount = 1;
-      } else if (isEndEvent) {
-        trackedTouchCount = 0;
-      }
-    }
-    ResponderTouchHistoryStore.recordTouchTrack(eventType, responderEvent.nativeEvent);
+  _getResponderConfig(id: ResponderId): ResponderConfig | Object {
+    const config = this._responderListenersMap.get(id);
+    return config != null ? config : emptyObject;
   }
 
   /**
-   * Responder System logic
+   * 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.
    */
-
-  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;
-      }
+  _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;
     }
-
-    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;
+    // 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 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);
+    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);
 
-    responderEvent.bubbles = false;
-    responderEvent.cancelable = false;
-    responderEvent.currentTarget = node;
+    /**
+     * Record the state of active pointers
+     */
 
-    // Start
-    if (isStartEvent) {
-      if (onResponderStart != null) {
-        responderEvent.dispatchConfig.registrationName = 'onResponderStart';
-        onResponderStart(responderEvent);
+    if (isStartEvent || isMoveEvent || isEndEvent) {
+      if (domEvent.touches) {
+        this._trackedTouchCount = domEvent.touches.length;
+      } else {
+        if (isStartEvent) {
+          this._trackedTouchCount = 1;
+        } else if (isEndEvent) {
+          this._trackedTouchCount = 0;
+        }
       }
+      this._responderTouchHistoryStore.recordTouchTrack(eventType, responderEvent.nativeEvent);
     }
-    // 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);
+
+    /**
+     * 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;
         }
       }
-      // Release
-      if (isReleaseEvent) {
-        if (onResponderRelease != null) {
-          responderEvent.dispatchConfig.registrationName = 'onResponderRelease';
-          onResponderRelease(responderEvent);
+
+      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;
         }
-        changeCurrentResponder(emptyResponder);
       }
-      // Terminate
-      if (isTerminateEvent) {
-        let shouldTerminate = true;
+    }
+
+    // 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;
 
-        // Responders can still avoid termination but only for these events.
-        if (
+      // 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' ||
-          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) {
+          // window blur
+          (eventType === 'blur' && eventTarget === this._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;
+              }
             }
           }
-        }
 
-        if (shouldTerminate) {
-          if (onResponderTerminate != null) {
-            responderEvent.dispatchConfig.registrationName = 'onResponderTerminate';
-            onResponderTerminate(responderEvent);
+          if (shouldTerminate) {
+            if (onResponderTerminate != null) {
+              responderEvent.dispatchConfig.registrationName = 'onResponderTerminate';
+              onResponderTerminate(responderEvent);
+            }
+            this._changeCurrentResponder(emptyResponder);
+            this._isEmulatingMouseEvents = false;
+            this._trackedTouchCount = 0;
           }
-          changeCurrentResponder(emptyResponder);
-          isEmulatingMouseEvents = false;
-          trackedTouchCount = 0;
         }
       }
     }
-  }
-}
-
-/**
- * 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
-
-  if (shouldSetCallbacks != null) {
-    const { idPath, nodePath } = eventPaths;
-
-    const shouldSetCallbackCaptureName = shouldSetCallbacks[0];
-    const shouldSetCallbackBubbleName = shouldSetCallbacks[1];
-    const { bubbles } = shouldSetCallbacks[2];
+  };
 
-    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 };
+  /**
+   * 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++) {
+      // capture
+      for (let i = idPath.length - 1; i >= 0; i--) {
         const id = idPath[i];
         const node = nodePath[i];
-        const result = check(id, node, shouldSetCallbackBubbleName);
+        const result = check(id, node, shouldSetCallbackCaptureName);
         if (result != null) {
           return result;
         }
@@ -507,159 +503,177 @@ function findWantsResponder(eventPaths, domEvent, responderEvent) {
           return;
         }
       }
-    } else {
-      const id = idPath[0];
-      const node = nodePath[0];
-      const target = domEvent.target;
-      if (target === node) {
-        return check(id, node, shouldSetCallbackBubbleName);
+
+      // 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.
- */
-function attemptTransfer(responderEvent: ResponderEvent, wantsResponder: ActiveResponderInstance) {
-  const { id: currentId, node: currentNode } = currentResponder;
-  const { id, node } = wantsResponder;
-
-  const { onResponderGrant, onResponderReject } = getResponderConfig(id);
+  /**
+   * Attempt to transfer the responder.
+   */
+  _attemptTransfer(responderEvent: ResponderEvent, wantsResponder: ActiveResponderInstance) {
+    const { id: currentId, node: currentNode } = this._currentResponder;
+    const { id, node } = wantsResponder;
 
-  responderEvent.bubbles = false;
-  responderEvent.cancelable = false;
-  responderEvent.currentTarget = node;
+    const { onResponderGrant, onResponderReject } = this._getResponderConfig(id);
 
-  // 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;
-      }
-    }
+    responderEvent.bubbles = false;
+    responderEvent.cancelable = false;
+    responderEvent.currentTarget = node;
 
-    if (allowTransfer) {
-      // Terminate existing responder
-      if (onResponderTerminate != null) {
-        responderEvent.currentTarget = currentNode;
-        responderEvent.dispatchConfig.registrationName = 'onResponderTerminate';
-        onResponderTerminate(responderEvent);
-      }
-      // Grant next responder
+    // 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);
+    }
+    // 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;
+        }
+      }
+
+      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);
+        }
       }
     }
   }
-}
 
-/* ------------ PUBLIC API ------------ */
+  /* ------------ 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;
+  /**
+   * 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.
- */
-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();
+  /**
+   * Register a node with the ResponderSystem.
+   */
+  addNode(id: ResponderId, node: any, config: ResponderConfig) {
+    setResponderId(node, id);
+    this._responderListenersMap.set(id, config);
   }
-  if (responderListenersMap.has(id)) {
-    responderListenersMap.delete(id);
+
+  /**
+   * 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.
- */
-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);
+  /**
+   * 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);
     }
-    changeCurrentResponder(emptyResponder);
+    this._isEmulatingMouseEvents = false;
+    this._trackedTouchCount = 0;
   }
-  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;
+  /**
+   * 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 07d97dc022..fa1476ac58 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,106 +87,117 @@ 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,
-    pageX: touch.pageX,
-    pageY: touch.pageY,
-    timestamp: timestampForTouch(touch)
-  });
-}
-
-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.');
           }
         }
       }
     }
-  },
+  }
+
+  get touchHistory() {
+    return this._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);
+  };
+
+  _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: ${this._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: ${this._printTouch(touch)}\n`,
+        `Touch Bank: ${this._printTouchBank()}`
+      );
+    }
+  };
 
-  touchHistory
-};
+  _printTouch(touch: Touch): string {
+    return JSON.stringify({
+      identifier: touch.identifier,
+      pageX: touch.pageX,
+      pageY: touch.pageY,
+      timestamp: timestampForTouch(touch)
+    });
+  }
 
-export default 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;
+  }
+}
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..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
@@ -4,7 +4,8 @@ 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 ReactRootView from '../../../exports/AppRegistry/ReactRootView';
 import {
   buttonType,
   buttonsType,
@@ -15,9 +16,15 @@ import {
 
 describe('useResponderEvents', () => {
   let container;
+  const responderSystem = new ResponderSystem(window);
 
   function render(element) {
-    ReactDOM.render(element, container);
+    ReactDOM.render(
+      <ReactRootView _responderSystem={responderSystem} rootTag={container}>
+        {element}
+      </ReactRootView>,
+      container
+    );
   }
 
   beforeEach(() => {
@@ -30,7 +37,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 +61,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 +90,7 @@ describe('useResponderEvents', () => {
         });
       });
     });
-    expect(getResponderNode()).toBe(null);
+    expect(responderSystem.getResponderNode()).toBe(null);
   });
 
   test('does nothing for "mousedown" with ignored modifier keys', () => {
@@ -109,14 +116,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 +255,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 +263,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 +305,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 +354,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 +419,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 +468,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 +517,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 +583,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 +633,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 +683,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 +749,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 +800,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 +850,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 +907,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 +944,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 +988,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 +1017,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 +1300,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 +1339,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 +1375,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 +1411,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 +1448,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 +1478,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 +1508,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 +1545,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 +1575,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 +1592,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 +1968,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 +1983,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 +1997,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 +2014,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 +2030,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 +2134,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 +2147,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 +2163,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 +2171,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 +2185,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 +2199,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 +2317,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 +2332,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 +2347,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 +2362,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 +2566,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 +2581,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 +2596,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 +2704,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 +2719,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 +2737,7 @@ describe('useResponderEvents', () => {
       act(() => {
         parent.scroll();
       });
-      expect(getResponderNode()).toBe(parentRef.current);
+      expect(responderSystem.getResponderNode()).toBe(parentRef.current);
       expect(eventLog).toEqual([
         'grandParent: onScrollShouldSetResponderCapture',
         'parent: onScrollShouldSetResponderCapture',
@@ -2801,7 +2808,7 @@ describe('useResponderEvents', () => {
         '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..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,
@@ -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..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 * as ResponderSystem from './ResponderSystem';
+import RootContext from '../../exports/AppRegistry/RootContext';
 
 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 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(() => {
-    ResponderSystem.attachListeners();
+    rootContext.responderSystem.attachListeners();
     return () => {
-      ResponderSystem.removeNode(id);
+      rootContext.responderSystem.removeNode(id);
     };
-  }, [id]);
+  }, [id, rootContext.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);
+      rootContext.responderSystem.addNode(id, node, config);
       isAttachedRef.current = true;
     } else if (isAttachedRef.current) {
-      ResponderSystem.removeNode(id);
+      rootContext.responderSystem.removeNode(id);
       isAttachedRef.current = false;
     }
-  }, [config, hostRef, id]);
+  }, [config, hostRef, id, rootContext.responderSystem]);
 
-  React.useDebugValue({ isResponder: hostRef.current === ResponderSystem.getResponderNode() });
+  React.useDebugValue({
+    isResponder: hostRef.current === rootContext.responderSystem.getResponderNode()
+  });
   React.useDebugValue(config);
 }