Remove animations from the Popover menus

src/components/Popover/index.js

@@ -19,6 +19,8 @@ const Popover = (props) => {
                 {...props}
                 animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
                 animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
+                animationInTiming={props.disableAnimation ? 1 : props.animationInTiming}
+                animationOutTiming={props.disableAnimation ? 1 : props.animationOutTiming}
                 shouldCloseOnOutsideClick
             />,
             document.body,
@@ -33,6 +35,8 @@ const Popover = (props) => {
             fullscreen={props.isSmallScreenWidth ? true : props.fullscreen}
             animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
             animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
+            animationInTiming={props.disableAnimation && !props.isSmallScreenWidth ? 1 : props.animationInTiming}
+            animationOutTiming={props.disableAnimation && !props.isSmallScreenWidth ? 1 : props.animationOutTiming}
         />
     );
 };

src/components/Popover/index.native.js

@@ -14,7 +14,7 @@ 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']);
+    const propsWithoutAnimation = _.omit(props, ['animationIn', 'animationOut', 'popoverAnchorPosition', 'disableAnimation']);
     return (
         <Modal
             type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}

src/components/Popover/popoverPropTypes.js

@@ -12,13 +12,17 @@ const propTypes = {
         bottom: PropTypes.number,
         left: PropTypes.number,
     }),
+
+    /** Whether disable the animations */
+    disableAnimation: PropTypes.bool,
 };
 
 const defaultProps = {
     ...(_.omit(defaultModalProps, ['type', 'popoverAnchorPosition'])),
 
     // Anchor position is optional only because it is not relevant on mobile
     anchorPosition: {},
+    disableAnimation: true,
 };
 
 export {propTypes, defaultProps};

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}
+                disableAnimation={this.props.disableAnimation}
             >
                 <View style={this.props.isSmallScreenWidth ? {} : styles.createMenuContainer}>
                     {!_.isEmpty(this.props.headerText) && (

src/components/PopoverMenu/popoverMenuPropTypes.js

@@ -46,12 +46,16 @@ const propTypes = {
 
     /** Optional non-interactive text to display as a header for any create menu */
     headerText: PropTypes.string,
+
+    /** Whether disable the animations */
+    disableAnimation: PropTypes.bool,
 };
 
 const defaultProps = {
     animationIn: 'fadeIn',
     animationOut: 'fadeOut',
     headerText: undefined,
+    disableAnimation: true,
 };
 
 export {propTypes, defaultProps};

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js

@@ -258,6 +258,7 @@ class PopoverReportActionContextMenu extends React.Component {
                     onModalHide={this.runAndResetOnPopoverHide}
                     anchorPosition={this.state.popoverAnchorPosition}
                     animationIn="fadeIn"
+                    disableAnimation={false}
                     animationOutTiming={1}
                     measureContent={this.measureContent}
                     shouldSetModalVisibility={false}

src/pages/home/sidebar/SidebarScreen.js

@@ -150,8 +150,6 @@ class SidebarScreen extends Component {
                             onClose={this.toggleCreateMenu}
                             isVisible={this.state.isCreateMenuActive}
                             anchorPosition={styles.createMenuPositionSidebar}
-                            animationIn="fadeInLeft"
-                            animationOut="fadeOutLeft"
                             onItemSelected={this.onCreateMenuItemSelected}
                             menuItems={[
                                 {