fix: dismiss menu on window layout change. closes #1005 (#1026)

Author: satya164

src/components/Appbar/AppbarHeader.tsx

@@ -3,7 +3,6 @@ import {
   StyleSheet,
   StyleProp,
   View,
-  Platform,
   SafeAreaView,
   ViewStyle,
 } from 'react-native';
@@ -12,6 +11,7 @@ import Appbar, { DEFAULT_APPBAR_HEIGHT } from './Appbar';
 import shadow from '../../styles/shadow';
 import { withTheme } from '../../core/theming';
 import { Theme } from '../../types';
+import { APPROX_STATUSBAR_HEIGHT } from '../../constants';
 
 type Props = React.ComponentProps<typeof Appbar> & {
   /**
@@ -37,16 +37,6 @@ type Props = React.ComponentProps<typeof Appbar> & {
   __expo?: any;
 };
 
-// @ts-ignore
-const expo = global.__expo;
-
-const DEFAULT_STATUSBAR_HEIGHT_EXPO =
-  expo && expo.Constants ? expo.Constants.statusBarHeight : 0;
-const DEFAULT_STATUSBAR_HEIGHT = Platform.select({
-  android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
-  ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0,
-});
-
 /**
  * A component to use as a header at the top of the screen.
  * It can contain the screen title, controls such as navigation buttons, menu button etc.
@@ -98,7 +88,7 @@ class AppbarHeader extends React.Component<Props> {
   render() {
     const {
       // Don't use default props since we check it to know whether we should use SafeAreaView
-      statusBarHeight = DEFAULT_STATUSBAR_HEIGHT,
+      statusBarHeight = APPROX_STATUSBAR_HEIGHT,
       style,
       ...rest
     } = this.props;

src/components/Menu/Menu.tsx

@@ -20,6 +20,7 @@ import Portal from '../Portal/Portal';
 import Surface from '../Surface';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import MenuItem, { MenuItem as _MenuItem } from './MenuItem';
+import { APPROX_STATUSBAR_HEIGHT } from '../../constants';
 
 type Props = {
   /**
@@ -30,6 +31,13 @@ type Props = {
    * The anchor to open the menu from. In most cases, it will be a button that opens the menu.
    */
   anchor: React.ReactNode;
+  /**
+   * Extra margin to add at the top of the menu to account for translucent status bar on Android.
+   * If you are using Expo, we assume translucent status bar and set a height for status bar automatically.
+   * Pass `0` or a custom value to and customize it.
+   * This is automatically handled on iOS.
+   */
+  statusBarHeight?: number;
   /**
    * Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called.
    */
@@ -45,11 +53,14 @@ type Props = {
   theme: Theme;
 };
 
+type Layout = Omit<Omit<LayoutRectangle, 'x'>, 'y'>;
+
 type State = {
   top: number;
   left: number;
-  menuLayout: LayoutRectangle;
-  anchorLayout: LayoutRectangle;
+  windowLayout: Layout;
+  menuLayout: Layout;
+  anchorLayout: Layout;
   opacityAnimation: Animated.Value;
   scaleAnimation: Animated.ValueXY;
 };
@@ -116,11 +127,16 @@ class Menu extends React.Component<Props, State> {
   // @component ./MenuItem.tsx
   static Item = MenuItem;
 
+  static defaultProps = {
+    statusBarHeight: APPROX_STATUSBAR_HEIGHT,
+  };
+
   state = {
     top: 0,
     left: 0,
-    menuLayout: { width: 0, height: 0, x: 0, y: 0 },
-    anchorLayout: { width: 0, height: 0, x: 0, y: 0 },
+    windowLayout: { width: 0, height: 0 },
+    menuLayout: { width: 0, height: 0 },
+    anchorLayout: { width: 0, height: 0 },
     opacityAnimation: new Animated.Value(0),
     scaleAnimation: new Animated.ValueXY({ x: 0, y: 0 }),
   };
@@ -132,7 +148,8 @@ class Menu extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
-    BackHandler.removeEventListener('hardwareBackPress', this.props.onDismiss);
+    BackHandler.removeEventListener('hardwareBackPress', this._handleDismiss);
+    Dimensions.removeEventListener('change', this._handleDismiss);
   }
 
   _anchor?: View | null;
@@ -164,8 +181,17 @@ class Menu extends React.Component<Props, State> {
     }
   };
 
+  _handleDismiss = () => {
+    if (this.props.visible) {
+      this.props.onDismiss();
+    }
+  };
+
   _show = async () => {
-    BackHandler.addEventListener('hardwareBackPress', this.props.onDismiss);
+    BackHandler.addEventListener('hardwareBackPress', this._handleDismiss);
+    Dimensions.addEventListener('change', this._handleDismiss);
+
+    const windowLayout = Dimensions.get('window');
     const [menuLayout, anchorLayout] = await Promise.all([
       this._measureMenuLayout(),
       this._measureAnchorLayout(),
@@ -178,34 +204,31 @@ class Menu extends React.Component<Props, State> {
     // so we have to wait until views are ready
     // and rerun this function to show menu
     if (
+      !windowLayout.width ||
+      !windowLayout.height ||
       !menuLayout.width ||
       !menuLayout.height ||
       !anchorLayout.width ||
       !anchorLayout.height
     ) {
-      BackHandler.removeEventListener(
-        'hardwareBackPress',
-        this.props.onDismiss
-      );
-      setTimeout(() => {
-        this._show();
-      }, ANIMATION_DURATION);
+      BackHandler.removeEventListener('hardwareBackPress', this._handleDismiss);
+      setTimeout(this._show, ANIMATION_DURATION);
       return;
     }
 
     this.setState(
-      state => ({
+      () => ({
         left: anchorLayout.x,
         top: anchorLayout.y,
+        windowLayout: {
+          height: windowLayout.height,
+          width: windowLayout.width,
+        },
         anchorLayout: {
-          x: state.anchorLayout.x,
-          y: state.anchorLayout.y,
           height: anchorLayout.height,
           width: anchorLayout.width,
         },
         menuLayout: {
-          x: state.menuLayout.x,
-          y: state.menuLayout.y,
           width: menuLayout.width,
           height: menuLayout.height,
         },
@@ -230,7 +253,8 @@ class Menu extends React.Component<Props, State> {
   };
 
   _hide = () => {
-    BackHandler.removeEventListener('hardwareBackPress', this.props.onDismiss);
+    BackHandler.removeEventListener('hardwareBackPress', this._handleDismiss);
+    Dimensions.removeEventListener('change', this._handleDismiss);
 
     Animated.timing(this.state.opacityAnimation, {
       toValue: 0,
@@ -245,9 +269,18 @@ class Menu extends React.Component<Props, State> {
   };
 
   render() {
-    const { visible, anchor, style, children, theme, onDismiss } = this.props;
+    const {
+      visible,
+      anchor,
+      style,
+      children,
+      theme,
+      statusBarHeight,
+      onDismiss,
+    } = this.props;
 
     const {
+      windowLayout,
       menuLayout,
       anchorLayout,
       opacityAnimation,
@@ -256,7 +289,7 @@ class Menu extends React.Component<Props, State> {
 
     // I don't know why but on Android measure function is wrong by 24
     const additionalVerticalValue = Platform.select({
-      android: 24,
+      android: statusBarHeight,
       default: 0,
     });
 
@@ -280,12 +313,8 @@ class Menu extends React.Component<Props, State> {
     // We need to translate menu while animating scale to imitate transform origin for scale animation
     const positionTransforms = [];
 
-    const { width: screenWidth, height: screenHeight } = Dimensions.get(
-      'screen'
-    );
-
     // Check if menu fits horizontally and if not align it to right.
-    if (left <= screenWidth - menuLayout.width - SCREEN_INDENT) {
+    if (left <= windowLayout.width - menuLayout.width - SCREEN_INDENT) {
       positionTransforms.push({
         translateX: scaleAnimation.x.interpolate({
           inputRange: [0, menuLayout.width],
@@ -309,13 +338,16 @@ class Menu extends React.Component<Props, State> {
 
       const right = left + menuLayout.width;
       // Check if menu position has enough space from right side
-      if (right <= screenWidth && right > screenWidth - SCREEN_INDENT) {
-        left = screenWidth - SCREEN_INDENT - menuLayout.width;
+      if (
+        right <= windowLayout.width &&
+        right > windowLayout.width - SCREEN_INDENT
+      ) {
+        left = windowLayout.width - SCREEN_INDENT - menuLayout.width;
       }
     }
 
     // Check if menu fits vertically and if not align it to bottom.
-    if (top <= screenHeight - menuLayout.height - SCREEN_INDENT) {
+    if (top <= windowLayout.width - menuLayout.height - SCREEN_INDENT) {
       positionTransforms.push({
         translateY: scaleAnimation.y.interpolate({
           inputRange: [0, menuLayout.height],
@@ -339,9 +371,12 @@ class Menu extends React.Component<Props, State> {
 
       const bottom = top + menuLayout.height + additionalVerticalValue;
       // Check if menu position has enough space from bottom side
-      if (bottom <= screenHeight && bottom > screenHeight - SCREEN_INDENT) {
+      if (
+        bottom <= windowLayout.height &&
+        bottom > windowLayout.height - SCREEN_INDENT
+      ) {
         top =
-          screenHeight -
+          windowLayout.height -
           SCREEN_INDENT -
           menuLayout.height -
           additionalVerticalValue;

src/constants.ts

@@ -0,0 +1,14 @@
+/* @flow */
+
+import { Platform } from 'react-native';
+
+// @ts-ignore
+const expo = global.__expo;
+
+const DEFAULT_STATUSBAR_HEIGHT_EXPO =
+  expo && expo.Constants ? expo.Constants.statusBarHeight : 0;
+
+export const APPROX_STATUSBAR_HEIGHT = Platform.select({
+  android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
+  ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0,
+});