Merge pull request #3635 from parasharrajat/context-menu

fix menu placement is broken on mobile

src/components/Modal/index.ios.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import withWindowDimensions from '../withWindowDimensions';
+import BaseModal from './BaseModal';
+import {propTypes, defaultProps} from './ModalPropTypes';
+
+const Modal = props => (
+    <BaseModal
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    >
+        {props.children}
+    </BaseModal>
+);
+
+Modal.propTypes = propTypes;
+Modal.defaultProps = defaultProps;
+Modal.displayName = 'Modal';
+export default withWindowDimensions(Modal);

src/components/Popover/index.js

@@ -30,6 +30,7 @@ const Popover = (props) => {
             popoverAnchorPosition={props.isSmallScreenWidth ? undefined : props.anchorPosition}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
+            fullscreen={props.isSmallScreenWidth ? true : props.fullscreen}
             animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
             animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
         />

src/components/Popover/index.native.js

@@ -0,0 +1,32 @@
+import _ from 'underscore';
+import React from 'react';
+import {propTypes as popoverPropTypes, defaultProps} from './PopoverPropTypes';
+import CONST from '../../CONST';
+import Modal from '../Modal';
+import {windowDimensionsPropTypes} from '../withWindowDimensions';
+
+const propTypes = {
+    ...(_.omit(popoverPropTypes, _.keys(windowDimensionsPropTypes))),
+};
+
+/*
+ * This is a convenience wrapper around the Modal component for a responsive Popover.
+ * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
+ */
+const Popover = props => (
+    <Modal
+        type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+
+        // Mobile will always has fullscreen menu
+        // eslint-disable-next-line react/jsx-props-no-multi-spaces
+        fullscreen
+    />
+);
+
+Popover.propTypes = propTypes;
+Popover.defaultProps = defaultProps;
+Popover.displayName = 'Popover';
+
+export default Popover;