diff --git a/README.md b/README.md
index 061cda02b..f137c3298 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 000000000..89aad1d32
--- /dev/null
+++ b/packages/docs/src/components/Modal/Modal.stories.mdx
@@ -0,0 +1,86 @@
+import { Meta, Props, 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
+
+## Props
+
+| Name                      | Type      | Default |
+| ------------------------- | --------- | ------- |
+| animationType             | ?string   | 'none' |
+| disabled                  | ?boolean  | false |
+| onDismiss                 | ?Function | |
+| onRequestClose            | ?Function | |
+| onShow                    | ?Function | |
+| transparent               | ?boolean  | false |
+| visible                   | ?boolean  | false |
+
+
+### 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="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="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="transparent">
+    <Stories.transparentModal />
+  </Story>
+</Preview>
+
+### visible
+
+Whether or not the modal is visible.
+
+When set to `false` the contents are not rendered and the modal removes itself
+from the screen.
+
+<Preview withSource='none'>
+  <Story name="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 000000000..72ebf0bff
--- /dev/null
+++ b/packages/docs/src/components/Modal/examples/Animated.js
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Modal, Text, Button } from 'react-native';
+
+function Animated({ animationType }) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setIsVisible(true)} title={`Open Modal with '${animationType}'`} />
+      <Modal
+        animationType={animationType}
+        onRequestClose={() => setIsVisible(false)}
+        visible={isVisible}
+      >
+        <Text>This is in the {animationType} Modal. Hello!</Text>
+        <Button onPress={() => setIsVisible(false)} title={'Close Modal'} />
+      </Modal>
+    </>
+  );
+}
+
+export default function() {
+  return (
+    <>
+      <Animated animationType={'none'} />
+      <Text>&nbsp;</Text>
+      <Animated animationType={'slide'} />
+      <Text>&nbsp;</Text>
+      <Animated animationType={'fade'} />
+    </>
+  );
+}
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 000000000..d7291c463
--- /dev/null
+++ b/packages/docs/src/components/Modal/examples/Modalception.js
@@ -0,0 +1,55 @@
+import React, { useState, useMemo } from 'react';
+import { Modal, View, Text, Button } from 'react-native';
+
+const WIGGLE_ROOM = 128;
+
+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={[style.backdrop]} />
+        <View style={[style.modal, offset]}>
+          <View style={[style.container]}>
+            <Text>This is in Modal {depth}. Hello!</Text>
+            <Modalception depth={depth + 1} />
+            <Button onPress={() => setIsVisible(false)} title={'Close Modal'} />
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+const style = {
+  backdrop: {
+    zIndex: -1,
+    position: 'fixed',
+    background: 'rgba(255, 255, 255, 0.6)',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  modal: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative'
+  },
+  container: {
+    width: 600,
+    background: 'white',
+    border: '1px solid black',
+    margin: '40px',
+    padding: '20px'
+  }
+};
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 000000000..659d1942f
--- /dev/null
+++ b/packages/docs/src/components/Modal/examples/Simple.js
@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { Modal, Text, Button } from 'react-native';
+
+export default function() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setIsVisible(true)} title={'Open Modal'} />
+      <Modal onRequestClose={() => setIsVisible(false)} visible={isVisible}>
+        <Text>Hello, World!</Text>
+        <Button onPress={() => setIsVisible(false)} title={'Close Modal'} />
+      </Modal>
+    </>
+  );
+}
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 000000000..160440ebc
--- /dev/null
+++ b/packages/docs/src/components/Modal/examples/Transparent.js
@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { Modal, Text, Button } from 'react-native';
+
+export default function() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setIsVisible(true)} title={'Open Modal'} />
+      <Modal transparent visible={isVisible}>
+        <Text>This Modal has a Transparent Background.</Text>
+        <Button onPress={() => setIsVisible(false)} title={'Close Modal'} />
+      </Modal>
+    </>
+  );
+}
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 000000000..e04964815
--- /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 000000000..652a586d4
--- /dev/null
+++ b/packages/react-native-web/src/exports/Modal/ModalAnimation.js
@@ -0,0 +1,130 @@
+/**
+ * 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, useState, useCallback } 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 = {|
+  children?: any,
+  animationType: ?('none' | 'slide' | 'fade'),
+  visible?: ?boolean,
+  onShow?: ?() => void,
+  onDismiss?: ?() => void
+|};
+
+function ModalAnimation(props: ModalAnimationProps) {
+  const { children, animationType, visible, onShow, onDismiss } = props;
+
+  const [isRendered, setIsRendered] = useState(visible);
+
+  const isAnimated = animationType !== 'none';
+
+  const animationEndCallback = useCallback(() => {
+    if (visible) {
+      if (onShow != null) {
+        onShow();
+      }
+    } else {
+      setIsRendered(false);
+      if (onDismiss != null) {
+        onDismiss();
+      }
+    }
+  }, [onDismiss, onShow, visible]);
+
+  useEffect(() => {
+    if (visible) {
+      setIsRendered(true);
+    }
+    if (!isAnimated) {
+      // Manually call `animationEndCallback` if no animation
+      animationEndCallback();
+    }
+  }, [isAnimated, visible, animationEndCallback]);
+
+  return isRendered
+    ? createElement('div', {
+        children,
+        onAnimationEnd: animationEndCallback,
+        style: getAnimationStyle(animationType, visible)
+      })
+    : 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 000000000..ecbc8ba5c
--- /dev/null
+++ b/packages/react-native-web/src/exports/Modal/ModalContent.js
@@ -0,0 +1,81 @@
+/**
+ * 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, useEffect } from 'react';
+
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+
+import View from '../View';
+import StyleSheet from '../StyleSheet';
+
+export type ModalContentProps = {|
+  children?: any,
+  active?: ?(boolean | (() => boolean)),
+  transparent?: ?boolean,
+  onRequestClose?: ?() => void
+|};
+
+const ModalContent = forwardRef<ModalContentProps, *>((props, forwardedRef) => {
+  const { active, children, onRequestClose, transparent } = props;
+
+  const closeOnEscapeCallback = useCallback(
+    (e: KeyboardEvent) => {
+      if (active && e.key === 'Escape') {
+        e.stopPropagation();
+        if (onRequestClose) {
+          onRequestClose();
+        }
+      }
+    },
+    [active, onRequestClose]
+  );
+
+  useEffect(() => {
+    if (canUseDOM) {
+      document.addEventListener('keyup', closeOnEscapeCallback, false);
+      return () => {
+        document.removeEventListener('keyup', closeOnEscapeCallback, false);
+      };
+    }
+  }, [closeOnEscapeCallback]);
+
+  return (
+    <View
+      accessibilityRole={active ? 'dialog' : null}
+      aria-modal
+      ref={forwardedRef}
+      style={[styles.modal, transparent ? styles.modalTransparent : styles.modalOpaque]}
+    >
+      <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: {
+    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 000000000..f6f1025d5
--- /dev/null
+++ b/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js
@@ -0,0 +1,149 @@
+/**
+ * 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, useCallback, useEffect } from 'react';
+
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+
+import View from '../View';
+import createElement from '../createElement';
+import StyleSheet from '../StyleSheet';
+
+/**
+ * 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', {
+    accessible: true,
+    accessibilityRole: 'none',
+    importantForAccessibility: 'no-hide-descendants',
+    style: styles.focusBracket,
+    tabIndex: 0
+  });
+};
+
+function attemptFocus(element: any) {
+  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 = {|
+  children?: any,
+  active?: boolean | (() => boolean)
+|};
+
+const ModalFocusTrap = ({ active, children }: ModalFocusTrapProps) => {
+  const trapElementRef = useRef();
+
+  // Ref used to track trapping of focus and to prevent focus from leaving a modal
+  // for accessibility reasons per W3CAG.
+  const focusRef = useRef<{ trapFocusInProgress: boolean, lastFocusedElement: ?HTMLElement }>({
+    trapFocusInProgress: false,
+    lastFocusedElement: null
+  });
+
+  const trapFocus = useCallback(() => {
+    // 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 (eg, we're refocusing)
+    // - isTrapActive prop being false-ish tells us to do nothing
+    if (!trapElementRef.current || focusRef.current.trapFocusInProgress || !active) {
+      return;
+    }
+
+    try {
+      focusRef.current.trapFocusInProgress = true;
+
+      // Only muck with the focus if the event target isn't within this modal
+      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 blur the active element
+        if (!hasFocused && document.activeElement) {
+          document.activeElement.blur();
+        }
+      }
+    } finally {
+      focusRef.current.trapFocusInProgress = false;
+    }
+
+    focusRef.current.lastFocusedElement = document.activeElement;
+  }, [active]);
+
+  // Bind to the document itself for this component
+  useEffect(() => {
+    if (canUseDOM) {
+      document.addEventListener('focus', trapFocus, true);
+      // Call the trapFocus callback at least once when this modal has been
+      // re-rendered / trapFocus has changed!
+      trapFocus();
+      return () => {
+        document.removeEventListener('focus', trapFocus, true);
+      };
+    }
+  }, [trapFocus]);
+
+  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 000000000..ef69707e2
--- /dev/null
+++ b/packages/react-native-web/src/exports/Modal/ModalPortal.js
@@ -0,0 +1,40 @@
+/**
+ * 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, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+
+export type ModalPortalProps = {|
+  children: any
+|};
+
+function ModalPortal(props: ModalPortalProps) {
+  const { children } = props;
+  // Only create the element once.
+  const element = useMemo(() => document.createElement('div'), []);
+
+  useEffect(() => {
+    if (canUseDOM) {
+      const body = document.body;
+      if (body != null) {
+        body.appendChild(element);
+        return () => {
+          body.removeChild(element);
+        };
+      }
+    }
+  }, [element]);
+
+  return ReactDOM.createPortal(children, element);
+}
+
+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 000000000..e3d77d0f7
--- /dev/null
+++ b/packages/react-native-web/src/exports/Modal/__tests__/index.js
@@ -0,0 +1,406 @@
+/* eslint-env jasmine, jest */
+
+import Modal from '..';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+describe('components/Modal', () => {
+  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('executes onDismiss callback when initially hidden', () => {
+    const onDismissCallback = jest.fn();
+    render(
+      <>
+        <Modal onDismiss={onDismissCallback} visible={false} />
+      </>
+    );
+    expect(onDismissCallback).toBeCalledTimes(1);
+  });
+
+  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 not 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"]');
+    outsideElement.focus();
+    expect(document.activeElement).toBe(outsideElement);
+  });
+
+  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 is trapped without contents', () => {
+    render(
+      <>
+        <a data-testid={'outside'} href={'#outside'}>
+          Outside
+        </a>
+        <Modal visible={true}>
+          <div data-testid={'inside'}>There are no focusable contents.</div>
+        </Modal>
+      </>
+    );
+
+    const outsideElement = document.querySelector('[data-testid="outside"]');
+    outsideElement.focus();
+    expect(document.activeElement).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');
+  });
+});
diff --git a/packages/react-native-web/src/exports/Modal/index.js b/packages/react-native-web/src/exports/Modal/index.js
index 9cd4039d7..3111fe0a8 100644
--- a/packages/react-native-web/src/exports/Modal/index.js
+++ b/packages/react-native-web/src/exports/Modal/index.js
@@ -1,2 +1,125 @@
-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,
+  onDismiss?: ?() => void,
+  onRequestClose?: ?() => void,
+  onShow?: ?() => void,
+  transparent?: ?boolean,
+  visible?: ?boolean
+|};
+
+let uniqueModalIdentifier = 0;
+
+const activeModalStack = [];
+const activeModalListeners = {};
+
+function notifyActiveModalListeners() {
+  if (activeModalStack.length > 0) {
+    const activeModalId = activeModalStack[activeModalStack.length - 1];
+    activeModalStack.forEach(modalId => {
+      if (activeModalListeners[modalId] != null) {
+        activeModalListeners[modalId](modalId === activeModalId);
+      }
+    });
+  }
+}
+
+function addActiveModal(modalId, listener) {
+  removeActiveModal(modalId);
+  activeModalStack.push(modalId);
+  activeModalListeners[modalId] = listener;
+  notifyActiveModalListeners();
+}
+
+function removeActiveModal(modalId) {
+  if (activeModalListeners[modalId] != null) {
+    // Notify the active modal that is it closing
+    activeModalListeners[modalId](false);
+    delete activeModalListeners[modalId];
+  }
+  const index = activeModalStack.indexOf(modalId);
+  if (index !== -1) {
+    activeModalStack.splice(index, 1);
+    notifyActiveModalListeners();
+  }
+}
+
+const Modal = forwardRef<ModalProps, *>((props, forwardedRef) => {
+  const {
+    visible = false,
+    animationType = 'none',
+    transparent = false,
+    children,
+    onShow,
+    onDismiss,
+    onRequestClose
+  } = props;
+
+  const [isActive, setIsActive] = useState(false);
+
+  // Set a unique model identifier to correctly route dismissals and check
+  // the layering of modals.
+  const modalId = useMemo(() => uniqueModalIdentifier++, []);
+
+  // Search the stack and remove the exact modal.
+  const onDismissCallback = useCallback(() => {
+    removeActiveModal(modalId);
+    if (onDismiss) {
+      onDismiss();
+    }
+  }, [modalId, onDismiss]);
+
+  const onShowCallback = useCallback(() => {
+    addActiveModal(modalId, setIsActive);
+    if (onShow) {
+      onShow();
+    }
+  }, [modalId, onShow]);
+
+  // Remove the modal from the active modals stack when this component
+  // undergoes a cleanup (e.g., unmounting).
+  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;