From 0388b9f9ec9c7458f4d047aeabf9bed465615e3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alfredo=20Alc=C3=A1ntara?= <alfredo.alcantara.r@gmail.com>
Date: Wed, 10 Nov 2021 16:58:57 -0800
Subject: [PATCH 1/3] Supports big screens mobile devices for popover menu

---
 src/components/Popover/index.native.js        | 13 ++++++-------
 src/components/PopoverMenu/BasePopoverMenu.js |  1 +
 src/pages/home/sidebar/SidebarScreen.js       |  1 +
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Popover/index.native.js b/src/components/Popover/index.native.js
index 8d912ff6c26a..908797d5708d 100644
--- a/src/components/Popover/index.native.js
+++ b/src/components/Popover/index.native.js
@@ -14,16 +14,15 @@ const propTypes = {
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
 const Popover = (props) => {
-    const propsWithoutAnimation = _.omit(props, ['animationIn', 'animationOut', 'popoverAnchorPosition']);
     return (
         <Modal
-            type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
+            type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
+            popoverAnchorPosition={props.isSmallScreenWidth ? undefined : props.anchorPosition}
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...propsWithoutAnimation}
-
-            // Mobile will always has fullscreen menu
-            // eslint-disable-next-line react/jsx-props-no-multi-spaces
-            fullscreen
+            {...props}
+            fullscreen={props.isSmallScreenWidth ? true : props.fullscreen}
+            animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
+            animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
         />
     );
 };
diff --git a/src/components/PopoverMenu/BasePopoverMenu.js b/src/components/PopoverMenu/BasePopoverMenu.js
index 2b4c926168aa..146017323fef 100644
--- a/src/components/PopoverMenu/BasePopoverMenu.js
+++ b/src/components/PopoverMenu/BasePopoverMenu.js
@@ -35,6 +35,7 @@ class BasePopoverMenu extends PureComponent {
                 onModalHide={this.props.onMenuHide}
                 animationIn={this.props.animationIn}
                 animationOut={this.props.animationOut}
+                isSmallScreenWidth={this.props.isSmallScreenWidth}
             >
                 <View style={this.props.isSmallScreenWidth ? {} : styles.createMenuContainer}>
                     {!_.isEmpty(this.props.headerText) && (
diff --git a/src/pages/home/sidebar/SidebarScreen.js b/src/pages/home/sidebar/SidebarScreen.js
index d89624980029..fe9560848618 100755
--- a/src/pages/home/sidebar/SidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen.js
@@ -153,6 +153,7 @@ class SidebarScreen extends Component {
                             animationIn="fadeInLeft"
                             animationOut="fadeOutLeft"
                             onItemSelected={this.onCreateMenuItemSelected}
+                            isSmallScreenWidth={this.props.isSmallScreenWidth}
                             menuItems={[
                                 {
                                     icon: ChatBubble,

From e30f27a9b367e0220cc5d4767e234b708a5d24bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alfredo=20Alc=C3=A1ntara?= <alfredo.alcantara.r@gmail.com>
Date: Wed, 10 Nov 2021 20:07:34 -0800
Subject: [PATCH 2/3] Refactor code

---
 src/components/Popover/index.native.js | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/Popover/index.native.js b/src/components/Popover/index.native.js
index 908797d5708d..6f560aa8a14f 100644
--- a/src/components/Popover/index.native.js
+++ b/src/components/Popover/index.native.js
@@ -13,19 +13,17 @@ const propTypes = {
  * 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) => {
-    return (
-        <Modal
-            type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
-            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}
-        />
-    );
-};
+const Popover = props => (
+    <Modal
+        type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
+        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}
+    />
+);
 
 Popover.propTypes = propTypes;
 Popover.defaultProps = defaultProps;

From 0bb3f0076b1a1bbd8539ff5349034c0148fc4c07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alfredo=20Alc=C3=A1ntara?= <alfredo@lunadna.com>
Date: Tue, 23 Nov 2021 11:09:25 -0800
Subject: [PATCH 3/3] Removes unnecessary space

---
 src/components/Popover/index.native.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Popover/index.native.js b/src/components/Popover/index.native.js
index b726dca58b70..6f560aa8a14f 100644
--- a/src/components/Popover/index.native.js
+++ b/src/components/Popover/index.native.js
@@ -13,7 +13,6 @@ const propTypes = {
  * 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={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}