diff --git a/README.md b/README.md
index 061cda02..f137c329 100644
--- a/README.md
+++ b/README.md
@@ -118,7 +118,7 @@ React Native v0.60
 | Image                    | ✓      | Missing multiple sources ([#515](https://github.com/necolas/react-native-web/issues/515)) and HTTP headers ([#1019](https://github.com/necolas/react-native-web/issues/1019)). |
 | ImageBackground          | ✓      |  |
 | KeyboardAvoidingView     | (✓)    | Mock. No equivalent web APIs. |
-| Modal                    | ✘      | Not started ([#1020](https://github.com/necolas/react-native-web/issues/1020)). |
+| Modal                    | ✓      |  |
 | Picker                   | ✓      |  |
 | Pressable                | ✓      |  |
 | RefreshControl           | ✘      | Not started ([#1027](https://github.com/necolas/react-native-web/issues/1027)). |
diff --git a/packages/docs/src/components/Modal/Modal.stories.mdx b/packages/docs/src/components/Modal/Modal.stories.mdx
new file mode 100644
index 00000000..31c8ef08
--- /dev/null
+++ b/packages/docs/src/components/Modal/Modal.stories.mdx
@@ -0,0 +1,83 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import * as Stories from './examples';
+
+<Meta title="Components|Modal" />
+
+# Modal
+
+The Modal component is a basic way to present content above an enclosing view.
+Modals may be nested within other Modals.
+
+## Props
+
+| Name                      | Type           | Default |
+| ------------------------- | -------------- | ------- |
+| animationType             | ?AnimationType | 'none' |
+| children                  | ?any           | |
+| onDismiss                 | ?Function      | |
+| onRequestClose            | ?Function      | |
+| onShow                    | ?Function      | |
+| transparent               | ?boolean       | false |
+| visible                   | ?boolean       | true |
+
+### animationType
+
+The `animationType` prop can be used to add animation to the modal
+being opened or dismissed.
+
+* `none` - the modal appears without any animation.
+* `slide` - the modal slides up from the bottom of the screen.
+* `fade` - the modal fades in.
+
+By default this is `none`.
+
+<Preview withSource='none'>
+  <Story name="propsExample-animationType">
+    <Stories.animatedModal />
+  </Story>
+</Preview>
+
+### onDismiss
+
+The `onDismiss` callback is called after the modal has been dismissed and is no longer visible.
+
+### onRequestClose
+
+The `onRequestClose` callback is called when the user is attempting to close the modal -
+such as when they hit `Escape`.
+
+Only the top-most Modal responds to hitting `Escape`.
+
+<Preview withSource='none'>
+  <Story name="propsExample-onRequestClose">
+    <Stories.modalception />
+  </Story>
+</Preview>
+
+### onShow
+
+The `onShow` callback is called once the modal has been shown and may be visible.
+
+### transparent
+
+The `transparent` prop determines if the modal is rendered with a `transparent` backdrop or
+a `white` backdrop.
+
+<Preview withSource='none'>
+  <Story name="propsExample-transparent">
+    <Stories.transparentModal />
+  </Story>
+</Preview>
+
+### visible
+
+Whether or not the modal is visible.
+
+When set to `false` the contents are not rendered & the modal removes itself
+from the screen.
+
+<Preview withSource='none'>
+  <Story name="propsExample-visible">
+    <Stories.simpleModal />
+  </Story>
+</Preview>
diff --git a/packages/docs/src/components/Modal/examples/Animated.js b/packages/docs/src/components/Modal/examples/Animated.js
new file mode 100644
index 00000000..f62e9cc3
--- /dev/null
+++ b/packages/docs/src/components/Modal/examples/Animated.js
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Modal, Text, Button, View, StyleSheet } from 'react-native';
+
+function Gap() {
+  return <View style={styles.gap} />;
+}
+
+function AnimatedModal({ animationType }) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setIsVisible(true)} title={`Open Modal with '${animationType}'`} />
+      <Modal
+        animationType={animationType}
+        onRequestClose={() => setIsVisible(false)}
+        visible={isVisible}
+      >
+        <View style={styles.container}>
+          <Text>Modal with "animationType" of "{animationType}"</Text>
+          <Gap />
+          <Button onPress={() => setIsVisible(false)} title={'Close Modal'} />
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+export default function AnimatedModalStack() {
+  return (
+    <>
+      <AnimatedModal animationType={'none'} />
+      <Gap />
+      <AnimatedModal animationType={'slide'} />
+      <Gap />
+      <AnimatedModal animationType={'fade'} />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center'
+  },
+  gap: {
+    height: 10
+  }
+});
diff --git a/packages/docs/src/components/Modal/examples/Modalception.js b/packages/docs/src/components/Modal/examples/Modalception.js
new file mode 100644
index 00000000..9d1253e0
--- /dev/null
+++ b/packages/docs/src/components/Modal/examples/Modalception.js
@@ -0,0 +1,52 @@
+import React, { useState, useMemo } from 'react';
+import { Modal, View, Text, Button, StyleSheet } from 'react-native';
+
+const WIGGLE_ROOM = 128;
+
+function Gap() {
+  return <View style={styles.gap} />;
+}
+
+export default function Modalception({ depth = 1 }) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const offset = useMemo(() => {
+    return {
+      top: Math.random() * WIGGLE_ROOM - WIGGLE_ROOM / 2,
+      left: Math.random() * WIGGLE_ROOM - WIGGLE_ROOM / 2
+    };
+  }, []);
+
+  return (
+    <>
+      <Button onPress={() => setIsVisible(true)} title={'Open Modal'} />
+      <Modal onRequestClose={() => setIsVisible(false)} transparent visible={isVisible}>
+        <View style={[styles.container, offset]}>
+          <Text>This is in Modal {depth}</Text>
+          <Gap />
+          {isVisible ? <Modalception depth={depth + 1} /> : null}
+          <Gap />
+          <Button color="red" onPress={() => setIsVisible(false)} title={'Close Modal'} />
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderColor: '#eee',
+    borderRadius: 10,
+    borderWidth: 1,
+    justifyContent: 'center',
+    height: 300,
+    margin: 'auto',
+    padding: 30,
+    width: 300
+  },
+  gap: {
+    height: 10
+  }
+});
diff --git a/packages/docs/src/components/Modal/examples/Simple.js b/packages/docs/src/components/Modal/examples/Simple.js
new file mode 100644
index 00000000..987bd09b
--- /dev/null
+++ b/packages/docs/src/components/Modal/examples/Simple.js
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { Modal, Text, View, Button, StyleSheet } from 'react-native';
+
+function Gap() {
+  return <View style={styles.gap} />;
+}
+
+export default function SimpleModal() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setIsVisible(true)} title={'Open Modal'} />
+      <Modal onRequestClose={() => setIsVisible(false)} visible={isVisible}>
+        <View style={styles.container}>
+          <Text>Hello, World!</Text>
+          <Gap />
+          <Button onPress={() => setIsVisible(false)} title={'Close Modal'} />
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center'
+  },
+  gap: {
+    height: 10
+  }
+});
diff --git a/packages/docs/src/components/Modal/examples/Transparent.js b/packages/docs/src/components/Modal/examples/Transparent.js
new file mode 100644
index 00000000..aacc2f8d
--- /dev/null
+++ b/packages/docs/src/components/Modal/examples/Transparent.js
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Modal, Text, View, Button, StyleSheet } from 'react-native';
+
+function Gap() {
+  return <View style={styles.gap} />;
+}
+
+export default function TransparentModal() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setIsVisible(true)} title={'Open Modal'} />
+      <Modal onRequestClose={() => setIsVisible(false)} transparent visible={isVisible}>
+        <View style={styles.container}>
+          <Text style={{ textAlign: 'center' }}>Modal with "transparent" value</Text>
+          <Gap />
+          <Button onPress={() => setIsVisible(false)} title={'Close Modal'} />
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderColor: '#eee',
+    borderRadius: 10,
+    borderWidth: 1,
+    justifyContent: 'center',
+    height: 300,
+    margin: 'auto',
+    padding: 30,
+    width: 300
+  },
+  gap: {
+    height: 10
+  }
+});
diff --git a/packages/docs/src/components/Modal/examples/index.js b/packages/docs/src/components/Modal/examples/index.js
new file mode 100644
index 00000000..e0496481
--- /dev/null
+++ b/packages/docs/src/components/Modal/examples/index.js
@@ -0,0 +1,4 @@
+export { default as transparentModal } from './Transparent';
+export { default as simpleModal } from './Simple';
+export { default as animatedModal } from './Animated';
+export { default as modalception } from './Modalception';
diff --git a/packages/react-native-web/src/exports/Modal/ModalAnimation.js b/packages/react-native-web/src/exports/Modal/ModalAnimation.js
new file mode 100644
index 00000000..3fb9f322
--- /dev/null
+++ b/packages/react-native-web/src/exports/Modal/ModalAnimation.js
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import { useEffect, useCallback, useState, useRef } from 'react';
+import StyleSheet from '../StyleSheet';
+import createElement from '../createElement';
+
+const ANIMATION_DURATION = 300;
+
+function getAnimationStyle(animationType, visible) {
+  if (animationType === 'slide') {
+    return visible ? animatedSlideInStyles : animatedSlideOutStyles;
+  }
+  if (animationType === 'fade') {
+    return visible ? animatedFadeInStyles : animatedFadeOutStyles;
+  }
+  return visible ? styles.container : styles.hidden;
+}
+
+export type ModalAnimationProps = {|
+  animationType?: ?('none' | 'slide' | 'fade'),
+  children?: any,
+  onDismiss?: ?() => void,
+  onShow?: ?() => void,
+  visible?: ?boolean
+|};
+
+function ModalAnimation(props: ModalAnimationProps) {
+  const { animationType, children, onDismiss, onShow, visible } = props;
+
+  const [isRendering, setIsRendering] = useState(false);
+  const wasVisible = useRef(false);
+
+  const isAnimated = animationType && animationType !== 'none';
+
+  const animationEndCallback = useCallback(() => {
+    if (visible) {
+      if (onShow) {
+        onShow();
+      }
+    } else {
+      setIsRendering(false);
+      if (onDismiss) {
+        onDismiss();
+      }
+    }
+  }, [onDismiss, onShow, visible]);
+
+  useEffect(() => {
+    if (visible) {
+      setIsRendering(true);
+    }
+    if (visible !== wasVisible.current && !isAnimated) {
+      // Manually call `animationEndCallback` if no animation is used
+      animationEndCallback();
+    }
+    wasVisible.current = visible;
+  }, [isAnimated, visible, animationEndCallback]);
+
+  return isRendering || visible
+    ? createElement('div', {
+        style: isRendering ? getAnimationStyle(animationType, visible) : styles.hidden,
+        onAnimationEnd: animationEndCallback,
+        children
+      })
+    : null;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  },
+  animatedIn: {
+    animationDuration: `${ANIMATION_DURATION}ms`,
+    animationTimingFunction: 'ease-in'
+  },
+  animatedOut: {
+    pointerEvents: 'none',
+    animationDuration: `${ANIMATION_DURATION}ms`,
+    animationTimingFunction: 'ease-out'
+  },
+  fadeIn: {
+    opacity: 1,
+    animationKeyframes: {
+      '0%': { opacity: 0 },
+      '100%': { opacity: 1 }
+    }
+  },
+  fadeOut: {
+    opacity: 0,
+    animationKeyframes: {
+      '0%': { opacity: 1 },
+      '100%': { opacity: 0 }
+    }
+  },
+  slideIn: {
+    transform: [{ translateY: '0%' }],
+    animationKeyframes: {
+      '0%': { transform: [{ translateY: '100%' }] },
+      '100%': { transform: [{ translateY: '0%' }] }
+    }
+  },
+  slideOut: {
+    transform: [{ translateY: '100%' }],
+    animationKeyframes: {
+      '0%': { transform: [{ translateY: '0%' }] },
+      '100%': { transform: [{ translateY: '100%' }] }
+    }
+  },
+  hidden: {
+    display: 'none'
+  }
+});
+
+const animatedSlideInStyles = [styles.container, styles.animatedIn, styles.slideIn];
+const animatedSlideOutStyles = [styles.container, styles.animatedOut, styles.slideOut];
+const animatedFadeInStyles = [styles.container, styles.animatedIn, styles.fadeIn];
+const animatedFadeOutStyles = [styles.container, styles.animatedOut, styles.fadeOut];
+
+export default ModalAnimation;
diff --git a/packages/react-native-web/src/exports/Modal/ModalContent.js b/packages/react-native-web/src/exports/Modal/ModalContent.js
new file mode 100644
index 00000000..347e2fcf
--- /dev/null
+++ b/packages/react-native-web/src/exports/Modal/ModalContent.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React, { forwardRef, useMemo, useEffect } from 'react';
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import View from '../View';
+import StyleSheet from '../StyleSheet';
+
+export type ModalContentProps = {|
+  active?: ?(boolean | (() => boolean)),
+  children?: any,
+  onRequestClose?: ?() => void,
+  transparent?: ?boolean
+|};
+
+const ModalContent = forwardRef<ModalContentProps, *>((props, forwardedRef) => {
+  const { active, children, onRequestClose, transparent } = props;
+
+  useEffect(() => {
+    if (canUseDOM) {
+      const closeOnEscape = (e: KeyboardEvent) => {
+        if (active && e.key === 'Escape') {
+          e.stopPropagation();
+          if (onRequestClose) {
+            onRequestClose();
+          }
+        }
+      };
+      document.addEventListener('keyup', closeOnEscape, false);
+      return () => document.removeEventListener('keyup', closeOnEscape, false);
+    }
+  }, [active, onRequestClose]);
+
+  const style = useMemo(() => {
+    return [styles.modal, transparent ? styles.modalTransparent : styles.modalOpaque];
+  }, [transparent]);
+
+  return (
+    <View accessibilityRole={active ? 'dialog' : null} aria-modal ref={forwardedRef} style={style}>
+      <View style={styles.container}>{children}</View>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  modal: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 9999
+  },
+  modalTransparent: {
+    backgroundColor: 'transparent'
+  },
+  modalOpaque: {
+    backgroundColor: 'white'
+  },
+  container: {
+    top: 0,
+    flex: 1
+  }
+});
+
+export default ModalContent;
diff --git a/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
new file mode 100644
index 00000000..b58227e0
--- /dev/null
+++ b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React, { useRef, useEffect } from 'react';
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import View from '../View';
+import createElement from '../createElement';
+import StyleSheet from '../StyleSheet';
+import UIManager from '../UIManager';
+
+/**
+ * This Component is used to "wrap" the modal we're opening
+ * so that changing focus via tab will never leave the document.
+ *
+ * This allows us to properly trap the focus within a modal
+ * even if the modal is at the start or end of a document.
+ */
+
+const FocusBracket = () => {
+  return createElement('div', {
+    accessibilityRole: 'none',
+    tabIndex: 0,
+    style: styles.focusBracket
+  });
+};
+
+function attemptFocus(element: any) {
+  if (!canUseDOM) {
+    return false;
+  }
+
+  try {
+    element.focus();
+  } catch (e) {
+    // Do nothing
+  }
+
+  return document.activeElement === element;
+}
+
+function focusFirstDescendant(element: any) {
+  for (let i = 0; i < element.childNodes.length; i++) {
+    const child = element.childNodes[i];
+    if (attemptFocus(child) || focusFirstDescendant(child)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function focusLastDescendant(element: any) {
+  for (let i = element.childNodes.length - 1; i >= 0; i--) {
+    const child = element.childNodes[i];
+    if (attemptFocus(child) || focusLastDescendant(child)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export type ModalFocusTrapProps = {|
+  active?: boolean | (() => boolean),
+  children?: any
+|};
+
+const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps) => {
+  const trapElementRef = useRef<?HTMLElement>();
+  const focusRef = useRef<{ trapFocusInProgress: boolean, lastFocusedElement: ?HTMLElement }>({
+    trapFocusInProgress: false,
+    lastFocusedElement: null
+  });
+
+  useEffect(() => {
+    if (canUseDOM) {
+      const trapFocus = () => {
+        // We should not trap focus if:
+        // - The modal hasn't fully initialized with an HTMLElement ref
+        // - Focus is already in the process of being trapped (e.g., we're refocusing)
+        // - isTrapActive prop being falsey tells us to do nothing
+        if (trapElementRef.current == null || focusRef.current.trapFocusInProgress || !active) {
+          return;
+        }
+
+        try {
+          focusRef.current.trapFocusInProgress = true;
+          if (
+            document.activeElement instanceof Node &&
+            !trapElementRef.current.contains(document.activeElement)
+          ) {
+            // To handle keyboard focusing we can make an assumption here.
+            // If you're tabbing through the focusable elements, the previously
+            // active element will either be the first or the last.
+            // 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);
+            if (focusRef.current.lastFocusedElement === document.activeElement) {
+              hasFocused = focusLastDescendant(trapElementRef.current);
+            }
+            // If we couldn't focus a new element then we need to focus onto the trap target
+            if (!hasFocused && trapElementRef.current != null && document.activeElement) {
+              UIManager.focus(trapElementRef.current);
+            }
+          }
+        } finally {
+          focusRef.current.trapFocusInProgress = false;
+        }
+        focusRef.current.lastFocusedElement = document.activeElement;
+      };
+
+      // Call the trapFocus callback at least once when this modal has been activated.
+      trapFocus();
+
+      document.addEventListener('focus', trapFocus, true);
+      return () => document.removeEventListener('focus', trapFocus, true);
+    }
+  }, [active]);
+
+  return (
+    <>
+      <FocusBracket />
+      <View ref={trapElementRef}>{children}</View>
+      <FocusBracket />
+    </>
+  );
+};
+
+export default ModalFocusTrap;
+
+const styles = StyleSheet.create({
+  focusBracket: {
+    outlineStyle: 'none'
+  }
+});
diff --git a/packages/react-native-web/src/exports/Modal/ModalPortal.js b/packages/react-native-web/src/exports/Modal/ModalPortal.js
new file mode 100644
index 00000000..217dc48c
--- /dev/null
+++ b/packages/react-native-web/src/exports/Modal/ModalPortal.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import { useEffect, useRef } from 'react';
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import ReactDOM from 'react-dom';
+
+export type ModalPortalProps = {|
+  children: any
+|};
+
+function ModalPortal(props: ModalPortalProps) {
+  const { children } = props;
+  const elementRef = useRef(null);
+
+  if (canUseDOM && !elementRef.current) {
+    const element = document.createElement('div');
+
+    if (element && document.body) {
+      document.body.appendChild(element);
+      elementRef.current = element;
+    }
+  }
+
+  useEffect(() => {
+    if (canUseDOM) {
+      return () => {
+        if (document.body && elementRef.current) {
+          document.body.removeChild(elementRef.current);
+          elementRef.current = null;
+        }
+      };
+    }
+  }, []);
+
+  return elementRef.current && canUseDOM
+    ? ReactDOM.createPortal(children, elementRef.current)
+    : null;
+}
+
+export default ModalPortal;
diff --git a/packages/react-native-web/src/exports/Modal/__tests__/index.js b/packages/react-native-web/src/exports/Modal/__tests__/index.js
new file mode 100644
index 00000000..1078a542
--- /dev/null
+++ b/packages/react-native-web/src/exports/Modal/__tests__/index.js
@@ -0,0 +1,429 @@
+/* eslint-env jasmine, jest */
+
+import Modal from '..';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+describe('components/Modal', () => {
+  test('visible by default', () => {
+    const { getByTestId } = render(
+      <Modal>
+        <a data-testid={'inside'} href={'#hello'}>
+          Hello
+        </a>
+      </Modal>
+    );
+    const insideElement = getByTestId('inside');
+    expect(insideElement).not.toBeNull();
+    expect(insideElement).not.toBe(document.body);
+  });
+
+  test('render children when visible', () => {
+    const { getByTestId } = render(
+      <Modal visible={true}>
+        <a data-testid={'inside'} href={'#hello'}>
+          Hello
+        </a>
+      </Modal>
+    );
+    const insideElement = getByTestId('inside');
+    expect(insideElement).not.toBeNull();
+    expect(insideElement).not.toBe(document.body);
+  });
+
+  test('does not render children when not visible', () => {
+    const { container } = render(
+      <Modal visible={false}>
+        <a data-testid={'inside'} href={'#hello'}>
+          Hello
+        </a>
+      </Modal>
+    );
+    expect(container.children.length).toBe(0);
+  });
+
+  test('invisible modals will not be the active modal', () => {
+    const { getByTestId } = render(
+      <>
+        <Modal key={'modal-a'} visible={true}>
+          <a data-testid={'inside-a'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+        <Modal key={'modal-b'} visible={false}>
+          <a data-testid={'inside-b'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+      </>
+    );
+    const insideElement = getByTestId('inside-a');
+    const dialogElements = document.body.querySelectorAll('[role=dialog]');
+    expect(dialogElements.length).toBe(1);
+    expect(dialogElements[0].contains(insideElement)).toBeTruthy();
+  });
+
+  test('multiple modals will only mark one as active', () => {
+    const { getByTestId } = render(
+      <>
+        <Modal key={'modal-a'} visible={true}>
+          <a data-testid={'inside-a'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+        <Modal key={'modal-b'} visible={true}>
+          <a data-testid={'inside-b'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+      </>
+    );
+    const insideElement = getByTestId('inside-b');
+    const dialogElements = document.body.querySelectorAll('[role=dialog]');
+    expect(dialogElements.length).toBe(1);
+    expect(dialogElements[0].contains(insideElement)).toBeTruthy();
+  });
+
+  test('modal active state changes propogate', () => {
+    const { rerender, getByTestId } = render(
+      <>
+        <Modal key={'modal-a'} visible={true}>
+          <a data-testid={'inside-a'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+        <Modal key={'modal-b'} visible={false}>
+          <a data-testid={'inside-b'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+      </>
+    );
+
+    rerender(
+      <>
+        <Modal key={'modal-a'} visible={true}>
+          <a data-testid={'inside-a'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+        <Modal key={'modal-b'} visible={true}>
+          <a data-testid={'inside-b'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+      </>
+    );
+
+    const insideElement = getByTestId('inside-b');
+    const dialogElements = document.body.querySelectorAll('[role=dialog]');
+    expect(dialogElements.length).toBe(1);
+    expect(dialogElements[0].contains(insideElement)).toBeTruthy();
+  });
+
+  test('removed modal sets others active state', () => {
+    const { rerender, getByTestId } = render(
+      <>
+        <Modal key={'modal-a'} visible={true}>
+          <a data-testid={'inside-a'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+        <Modal key={'modal-b'} visible={true}>
+          <a data-testid={'inside-b'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+      </>
+    );
+
+    rerender(
+      <Modal key={'modal-a'} visible={true}>
+        <a data-testid={'inside-a'} href={'#hello'}>
+          Hello
+        </a>
+      </Modal>
+    );
+
+    const insideElement = getByTestId('inside-a');
+    const dialogElements = document.body.querySelectorAll('[role=dialog]');
+    expect(dialogElements.length).toBe(1);
+    expect(dialogElements[0].contains(insideElement)).toBeTruthy();
+  });
+
+  test('executes onShow callback when initially showing', () => {
+    const onShowCallback = jest.fn();
+    render(<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} />);
+    expect(onShowCallback).toBeCalledTimes(0);
+  });
+
+  test('does not execute onDismiss callback when initially hidden', () => {
+    const onDismissCallback = jest.fn();
+    render(<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} />);
+    expect(onDismissCallback).toBeCalledTimes(0);
+  });
+
+  test('executes onShow callback when visibility changes', () => {
+    const onShowCallback = jest.fn();
+    const { rerender } = render(<Modal onShow={onShowCallback} visible={false} />);
+    expect(onShowCallback).toBeCalledTimes(0);
+    rerender(<Modal onShow={onShowCallback} visible={true} />);
+    expect(onShowCallback).toBeCalledTimes(1);
+  });
+
+  test('executes onDismiss callback when visibility changes', () => {
+    const onDismissCallback = jest.fn();
+    const { rerender } = render(<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 animationNoneElement = baseElement.lastChild.lastChild;
+    const animationNoneStyle = window.getComputedStyle(animationNoneElement, null);
+    rerender(<Modal visible={true} />);
+    const animationMissingElement = baseElement.lastChild.lastChild;
+    const animationMissingStyle = window.getComputedStyle(animationMissingElement, null);
+    const styleProps = new Set();
+
+    for (let i = 0; i < animationNoneStyle.length; i++) {
+      styleProps.add(animationNoneStyle[i]);
+    }
+
+    for (let i = 0; i < animationMissingStyle.length; i++) {
+      styleProps.add(animationMissingStyle[i]);
+    }
+
+    for (const prop of styleProps) {
+      expect(animationNoneStyle[prop]).toEqual(animationMissingStyle[prop]);
+    }
+  });
+
+  test('creates view with role="modal" when active', () => {
+    const { baseElement } = render(
+      <Modal visible={true}>
+        <a href={'#hello'}>Hello</a>
+      </Modal>
+    );
+    const dialogElement = baseElement.lastChild.querySelector('[role="dialog"]');
+    expect(dialogElement).not.toBeNull();
+    expect(dialogElement.getAttribute('role')).toBe('dialog');
+    expect(dialogElement.getAttribute('aria-modal')).toBe('true');
+  });
+
+  test('focus is trapped by default', () => {
+    render(
+      <>
+        <a data-testid={'outside'} href={'#outside'}>
+          Outside
+        </a>
+        <Modal>
+          <a data-testid={'inside'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+      </>
+    );
+
+    const outsideElement = document.querySelector('[data-testid="outside"]');
+    const insideElement = document.querySelector('[data-testid="inside"]');
+    outsideElement.focus();
+    expect(document.activeElement).toBe(insideElement);
+  });
+
+  test('focus is trapped when active flag changes', () => {
+    const { rerender } = render(
+      <>
+        <a data-testid={'outside'} href={'#outside'}>
+          Outside
+        </a>
+        <Modal visible={false}>
+          <a data-testid={'inside'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+      </>
+    );
+
+    const outsideElement = document.querySelector('[data-testid="outside"]');
+    outsideElement.focus();
+    expect(document.activeElement).toBe(outsideElement);
+
+    rerender(
+      <>
+        <a data-testid={'outside'} href={'#outside'}>
+          Outside
+        </a>
+        <Modal visible={true}>
+          <a data-testid={'inside'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+      </>
+    );
+
+    const insideElement = document.querySelector('[data-testid="inside"]');
+    expect(document.activeElement).toBe(insideElement);
+  });
+
+  test('focus is trapped when active', () => {
+    render(
+      <>
+        <a data-testid={'outside'} href={'#outside'}>
+          Outside
+        </a>
+        <Modal visible={true}>
+          <a data-testid={'inside'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+      </>
+    );
+
+    const outsideElement = document.querySelector('[data-testid="outside"]');
+    const insideElement = document.querySelector('[data-testid="inside"]');
+    outsideElement.focus();
+    expect(document.activeElement).toBe(insideElement);
+  });
+
+  test('focus wraps forwards', () => {
+    render(
+      <>
+        <Modal visible={true}>
+          <a data-testid={'inside-a'} href={'#'}>
+            Inside A
+          </a>
+          <a data-testid={'inside-b'} href={'#'}>
+            Inside B
+          </a>
+          <a data-testid={'inside-c'} href={'#'}>
+            Inside C
+          </a>
+        </Modal>
+      </>
+    );
+
+    const insideStartElement = document.querySelector('[data-testid="inside-a"]');
+    const insideEndElement = document.querySelector('[data-testid="inside-c"]');
+    // This is ugly - perhaps there's a better way?
+    const focusBracket = insideEndElement.parentNode.parentNode.parentNode.nextSibling;
+    insideEndElement.focus();
+    focusBracket.focus();
+    expect(document.activeElement).toBe(insideStartElement);
+  });
+
+  test('focus wraps backwards', () => {
+    render(
+      <>
+        <Modal visible={true}>
+          <a data-testid={'inside-a'} href={'#'}>
+            Inside A
+          </a>
+          <a data-testid={'inside-b'} href={'#'}>
+            Inside B
+          </a>
+          <a data-testid={'inside-c'} href={'#'}>
+            Inside C
+          </a>
+        </Modal>
+      </>
+    );
+
+    const insideStartElement = document.querySelector('[data-testid="inside-a"]');
+    const insideEndElement = document.querySelector('[data-testid="inside-c"]');
+    // This is ugly - perhaps there's a better way?
+    const focusBracket = insideEndElement.parentNode.parentNode.parentNode.previousSibling;
+    insideStartElement.focus();
+    focusBracket.focus();
+    expect(document.activeElement).toBe(insideEndElement);
+  });
+
+  test('focus is trapped without contents', () => {
+    render(
+      <>
+        <a data-testid={'outside'} href={'#outside'}>
+          Outside
+        </a>
+        <Modal visible={true}>
+          <div>There are no focusable contents.</div>
+        </Modal>
+      </>
+    );
+    const outsideElement = document.querySelector('[data-testid="outside"]');
+    outsideElement.focus();
+    expect(document.activeElement).not.toBe(outsideElement);
+    expect(document.activeElement).not.toBe(document.body);
+  });
+
+  test('focus is not trapped when inactive', () => {
+    render(
+      <>
+        <a data-testid={'outside'} href={'#outside'}>
+          Outside
+        </a>
+        <Modal visible={false}>
+          <a data-testid={'inside'} href={'#hello'}>
+            Hello
+          </a>
+        </Modal>
+      </>
+    );
+    const outsideElement = document.querySelector('[data-testid="outside"]');
+    outsideElement.focus();
+    expect(document.activeElement).toBe(outsideElement);
+  });
+
+  test('creates portal outside of the react container', () => {
+    const { container, baseElement } = render(
+      <Modal visible={true}>
+        <a data-testid={'hello'} href={'#hello'}>
+          Hello World
+        </a>
+      </Modal>
+    );
+    const helloAnchor = document.querySelector('[data-testid="hello"]');
+    expect(container.children.length).toBe(0);
+    expect(helloAnchor).not.toBeNull();
+    expect(baseElement.firstChild).toBe(container);
+    expect(baseElement.lastChild.firstChild.contains(helloAnchor)).toBeTruthy();
+  });
+
+  test('portal created is a div', () => {
+    const { baseElement } = render(
+      <Modal visible={true}>
+        <a data-testid={'hello'} href={'#hello'}>
+          Hello World
+        </a>
+      </Modal>
+    );
+    expect(baseElement.lastChild.tagName).toBe('DIV');
+  });
+
+  test('ref must be set before `mount` hook', () => {
+    const spy = jest.fn();
+
+    function TestComponent() {
+      React.useEffect(() => spy('mount'), []);
+      return <Modal visible={true}><a ref={(ref) => ref ? spy('ref') : spy('noref')} /></Modal>;
+    }
+
+    render(<TestComponent />)
+
+    expect(spy).toHaveBeenNthCalledWith(1, 'ref');
+    expect(spy).toHaveBeenNthCalledWith(2, 'mount');
+  });
+});
diff --git a/packages/react-native-web/src/exports/Modal/index.js b/packages/react-native-web/src/exports/Modal/index.js
index 9cd4039d..addabc89 100644
--- a/packages/react-native-web/src/exports/Modal/index.js
+++ b/packages/react-native-web/src/exports/Modal/index.js
@@ -1,2 +1,130 @@
-import UnimplementedView from '../../modules/UnimplementedView';
-export default UnimplementedView;
+/**
+ * Copyright (c) Nicolas Gallagher.
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React, { forwardRef, useCallback, useMemo, useEffect, useState } from 'react';
+import ModalPortal from './ModalPortal';
+import ModalAnimation from './ModalAnimation';
+import ModalContent from './ModalContent';
+import ModalFocusTrap from './ModalFocusTrap';
+
+export type ModalProps = {|
+  animationType?: 'none' | 'slide' | 'fade',
+  children: any,
+  hardwareAccelerated?: ?boolean,
+  onDismiss?: ?() => mixed,
+  onOrientationChange?: ?(e: {| orientation: 'portrait' | 'landscape' |}) => void,
+  onRequestClose?: ?() => void,
+  onShow?: ?() => void,
+  presentationStyle?: ?('fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'),
+  statusBarTranslucent?: ?boolean,
+  supportedOrientations?: ?Array<
+    'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right'
+  >,
+  transparent?: ?boolean,
+  visible?: ?boolean
+|};
+
+let uniqueModalIdentifier = 0;
+
+const activeModalStack = [];
+const activeModalListeners = {};
+
+function notifyActiveModalListeners() {
+  if (activeModalStack.length === 0) {
+    return;
+  }
+  const activeModalId = activeModalStack[activeModalStack.length - 1];
+  activeModalStack.forEach(modalId => {
+    if (modalId in activeModalListeners) {
+      activeModalListeners[modalId](modalId === activeModalId);
+    }
+  });
+}
+
+function removeActiveModal(modalId) {
+  if (modalId in activeModalListeners) {
+    // Before removing this listener we should probably tell it
+    // that it's no longer the active modal for sure.
+    activeModalListeners[modalId](false);
+    delete activeModalListeners[modalId];
+  }
+  const index = activeModalStack.indexOf(modalId);
+  if (index !== -1) {
+    activeModalStack.splice(index, 1);
+    notifyActiveModalListeners();
+  }
+}
+
+function addActiveModal(modalId, listener) {
+  removeActiveModal(modalId);
+  activeModalStack.push(modalId);
+  activeModalListeners[modalId] = listener;
+  notifyActiveModalListeners();
+}
+
+const Modal = forwardRef<ModalProps, *>((props, forwardedRef) => {
+  const {
+    animationType,
+    children,
+    onDismiss,
+    onRequestClose,
+    onShow,
+    transparent,
+    visible = true
+  } = props;
+
+  // Set a unique model identifier so we can correctly route
+  // dismissals and check the layering of modals.
+  const modalId = useMemo(() => uniqueModalIdentifier++, []);
+
+  const [isActive, setIsActive] = useState(false);
+
+  const onDismissCallback = useCallback(() => {
+    removeActiveModal(modalId);
+    if (onDismiss) {
+      onDismiss();
+    }
+  }, [modalId, onDismiss]);
+
+  const onShowCallback = useCallback(() => {
+    addActiveModal(modalId, setIsActive);
+    if (onShow) {
+      onShow();
+    }
+  }, [modalId, onShow]);
+
+  useEffect(() => {
+    return () => removeActiveModal(modalId);
+  }, [modalId]);
+
+  return (
+    <ModalPortal>
+      <ModalAnimation
+        animationType={animationType}
+        onDismiss={onDismissCallback}
+        onShow={onShowCallback}
+        visible={visible}
+      >
+        <ModalFocusTrap active={isActive}>
+          <ModalContent
+            active={isActive}
+            onRequestClose={onRequestClose}
+            ref={forwardedRef}
+            transparent={transparent}
+          >
+            {children}
+          </ModalContent>
+        </ModalFocusTrap>
+      </ModalAnimation>
+    </ModalPortal>
+  );
+});
+
+export default Modal;