fix(menu): dropdown position with translucent status bar

Author: alex-fournier

Diff for: example/metro.config.js

@@ -13,7 +13,6 @@ const defaultConfig = getDefaultConfig(__dirname);
 
 const modules = [
   '@expo/vector-icons',
-  'expo-constants',
   ...Object.keys(pak.peerDependencies),
   '@react-navigation/native',
 ];

Diff for: example/src/Examples/MenuExample.tsx

@@ -48,7 +48,7 @@ const MenuExample = ({ navigation }: Props) => {
       x: nativeEvent.pageX,
       y: nativeEvent.pageY,
     });
-    setVisible({ menu3: true });
+    setVisible({ menu4: true });
   };
 
   React.useLayoutEffect(() => {
@@ -127,9 +127,25 @@ const MenuExample = ({ navigation }: Props) => {
               )}
             </Menu>
           </View>
+          <View style={styles.alignCenter}>
+            <Menu
+              visible={_getVisible('menu3')}
+              onDismiss={_toggleMenu('menu3')}
+              anchor={
+                <Button mode="outlined" onPress={_toggleMenu('menu3')}>
+                  Menu with anchorPosition bottom
+                </Button>
+              }
+              anchorPosition="bottom"
+            >
+              <Menu.Item onPress={() => {}} title="One" />
+              <Menu.Item onPress={() => {}} title="Two" />
+              <Menu.Item onPress={() => {}} title="Three" />
+            </Menu>
+          </View>
           <Menu
-            visible={_getVisible('menu3')}
-            onDismiss={_toggleMenu('menu3')}
+            visible={_getVisible('menu4')}
+            onDismiss={_toggleMenu('menu4')}
             anchor={contextualMenuCoord}
           >
             <Menu.Item onPress={() => {}} title="Item 1" />
@@ -149,10 +165,10 @@ const MenuExample = ({ navigation }: Props) => {
 
         <View style={styles.bottomMenu}>
           <Menu
-            visible={_getVisible('menu4')}
-            onDismiss={_toggleMenu('menu4')}
+            visible={_getVisible('menu5')}
+            onDismiss={_toggleMenu('menu5')}
             anchor={
-              <Button mode="outlined" onPress={_toggleMenu('menu4')}>
+              <Button mode="outlined" onPress={_toggleMenu('menu5')}>
                 Menu at bottom
               </Button>
             }
@@ -181,6 +197,7 @@ const styles = StyleSheet.create({
   },
   alignCenter: {
     alignItems: 'center',
+    marginVertical: 8,
   },
   md3Divider: {
     marginVertical: 8,

Diff for: example/yarn.lock

@@ -83,7 +83,6 @@
     "eslint": "8.31.0",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-local-rules": "^1.3.2",
-    "expo-constants": "^9.3.5",
     "glob": "^7.1.3",
     "husky": "^1.3.1",
     "jest": "^29.2.1",

Diff for: package.json

@@ -20,8 +20,12 @@ import {
   Pressable,
 } from 'react-native';
 
+import {
+  withSafeAreaInsets,
+  WithSafeAreaInsetsProps,
+} from 'react-native-safe-area-context';
+
 import MenuItem from './MenuItem';
-import { APPROX_STATUSBAR_HEIGHT } from '../../constants';
 import { withInternalTheme } from '../../core/theming';
 import type { $Omit, InternalTheme, MD3Elevation } from '../../types';
 import { ElevationLevels } from '../../types';
@@ -30,7 +34,7 @@ import { BackHandler } from '../../utils/BackHandler/BackHandler';
 import Portal from '../Portal/Portal';
 import Surface from '../Surface';
 
-export type Props = {
+export type Props = WithSafeAreaInsetsProps & {
   /**
    * Whether the Menu is currently visible.
    */
@@ -45,10 +49,9 @@ export type Props = {
    */
   anchorPosition?: 'top' | 'bottom';
   /**
-   * 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.
+   * Extra margin to add at the top of the menu to handle specific cases with the status bar on Android.
    * This is automatically handled on iOS.
+   * Pass `0` or a custom value to customize it.
    */
   statusBarHeight?: number;
   /**
@@ -170,12 +173,11 @@ const DEFAULT_MODE = 'elevated';
  * `Modal` contents within a `PaperProvider` in order for the menu to show. This
  * wrapping is not necessary if you use Paper's `Modal` instead.
  */
-class Menu extends React.Component<Props, State> {
+class MenuComponent extends React.Component<Props, State> {
   // @component ./MenuItem.tsx
   static Item = MenuItem;
 
   static defaultProps = {
-    statusBarHeight: APPROX_STATUSBAR_HEIGHT,
     overlayAccessibilityLabel: 'Close menu',
     testID: 'menu',
   };
@@ -436,6 +438,7 @@ class Menu extends React.Component<Props, State> {
       overlayAccessibilityLabel,
       keyboardShouldPersistTaps,
       testID,
+      insets,
     } = this.props;
 
     const {
@@ -455,7 +458,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: statusBarHeight,
+      android: statusBarHeight ?? insets.top,
       default: 0,
     });
 
@@ -706,4 +709,13 @@ const styles = StyleSheet.create({
   },
 });
 
-export default withInternalTheme(Menu);
+const MenuWithHOC = withInternalTheme(withSafeAreaInsets(MenuComponent));
+
+const Menu = MenuWithHOC as typeof MenuWithHOC & {
+  Item: typeof MenuItem;
+};
+
+// we need to attach again MenuItem as it is lost after using withSafeAreaInsets
+Menu.Item = MenuItem;
+
+export default Menu;

Diff for: src/components/Menu/Menu.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
 
 import { render } from '@testing-library/react-native';
+import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
 
 import Checkbox from '../Checkbox';
 import DataTable from '../DataTable/DataTable';
 
+jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
+
 describe('DataTable.Header', () => {
   it('renders data table header', () => {
     const tree = render(
@@ -133,17 +136,19 @@ describe('DataTable.Pagination', () => {
 
   it('renders data table pagination with options select', () => {
     const { getByLabelText, toJSON } = render(
-      <DataTable.Pagination
-        page={3}
-        numberOfPages={15}
-        onPageChange={() => {}}
-        label="11-20 of 150"
-        showFastPaginationControls
-        numberOfItemsPerPageList={[2, 4, 6]}
-        numberOfItemsPerPage={2}
-        onItemsPerPageChange={() => {}}
-        selectPageDropdownLabel={'Rows per page'}
-      />
+      <mockSafeAreaContext.SafeAreaProvider>
+        <DataTable.Pagination
+          page={3}
+          numberOfPages={15}
+          onPageChange={() => {}}
+          label="11-20 of 150"
+          showFastPaginationControls
+          numberOfItemsPerPageList={[2, 4, 6]}
+          numberOfItemsPerPage={2}
+          onItemsPerPageChange={() => {}}
+          selectPageDropdownLabel={'Rows per page'}
+        />
+      </mockSafeAreaContext.SafeAreaProvider>
     );
 
     expect(getByLabelText('Options Select')).toBeTruthy();

Diff for: src/components/__tests__/DataTable.test.tsx

@@ -2,23 +2,34 @@ import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
 import { render, waitFor, screen } from '@testing-library/react-native';
+import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
 
 import { getTheme } from '../../core/theming';
 import { MD3Elevation } from '../../types';
 import Button from '../Button/Button';
 import Menu, { ELEVATION_LEVELS_MAP } from '../Menu/Menu';
 import Portal from '../Portal/Portal';
 
+jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
+
 const styles = StyleSheet.create({
   contentStyle: {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
   },
 });
 
+const TestContextProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <mockSafeAreaContext.SafeAreaProvider>
+    <Portal.Host>{children}</Portal.Host>
+  </mockSafeAreaContext.SafeAreaProvider>
+);
+
 it('renders visible menu', () => {
   const tree = render(
-    <Portal.Host>
+    <TestContextProvider>
       <Menu
         visible
         onDismiss={jest.fn()}
@@ -27,15 +38,15 @@ it('renders visible menu', () => {
         <Menu.Item onPress={jest.fn()} title="Undo" />
         <Menu.Item onPress={jest.fn()} title="Redo" />
       </Menu>
-    </Portal.Host>
+    </TestContextProvider>
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders not visible menu', () => {
   const tree = render(
-    <Portal.Host>
+    <TestContextProvider>
       <Menu
         visible={false}
         onDismiss={jest.fn()}
@@ -44,15 +55,15 @@ it('renders not visible menu', () => {
         <Menu.Item onPress={jest.fn()} title="Undo" />
         <Menu.Item onPress={jest.fn()} title="Redo" />
       </Menu>
-    </Portal.Host>
+    </TestContextProvider>
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders menu with content styles', () => {
   const tree = render(
-    <Portal.Host>
+    <TestContextProvider>
       <Menu
         visible
         onDismiss={jest.fn()}
@@ -62,7 +73,7 @@ it('renders menu with content styles', () => {
         <Menu.Item onPress={jest.fn()} title="Undo" />
         <Menu.Item onPress={jest.fn()} title="Redo" />
       </Menu>
-    </Portal.Host>
+    </TestContextProvider>
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -73,7 +84,7 @@ it('renders menu with content styles', () => {
     const theme = getTheme(false, true);
 
     const { getByTestId } = render(
-      <Portal.Host>
+      <TestContextProvider>
         <Menu
           visible
           onDismiss={jest.fn()}
@@ -83,7 +94,7 @@ it('renders menu with content styles', () => {
           <Menu.Item onPress={jest.fn()} title="Undo" />
           <Menu.Item onPress={jest.fn()} title="Redo" />
         </Menu>
-      </Portal.Host>
+      </TestContextProvider>
     );
 
     expect(getByTestId('menu-surface')).toHaveStyle({
@@ -95,7 +106,7 @@ it('renders menu with content styles', () => {
 it('uses the default anchorPosition of top', async () => {
   function makeMenu(visible: boolean) {
     return (
-      <Portal.Host>
+      <TestContextProvider>
         <Menu
           visible={visible}
           onDismiss={jest.fn()}
@@ -109,7 +120,7 @@ it('uses the default anchorPosition of top', async () => {
           <Menu.Item onPress={jest.fn()} title="Undo" />
           <Menu.Item onPress={jest.fn()} title="Redo" />
         </Menu>
-      </Portal.Host>
+      </TestContextProvider>
     );
   }
 
@@ -138,7 +149,7 @@ it('uses the default anchorPosition of top', async () => {
 it('respects anchorPosition bottom', async () => {
   function makeMenu(visible: boolean) {
     return (
-      <Portal.Host>
+      <TestContextProvider>
         <Menu
           visible={visible}
           onDismiss={jest.fn()}
@@ -153,7 +164,7 @@ it('respects anchorPosition bottom', async () => {
           <Menu.Item onPress={jest.fn()} title="Undo" />
           <Menu.Item onPress={jest.fn()} title="Redo" />
         </Menu>
-      </Portal.Host>
+      </TestContextProvider>
     );
   }
 
@@ -178,7 +189,7 @@ it('respects anchorPosition bottom', async () => {
 it('animated value changes correctly', () => {
   const value = new Animated.Value(1);
   const { getByTestId } = render(
-    <Portal.Host>
+    <TestContextProvider>
       <Menu
         visible
         onDismiss={jest.fn()}
@@ -188,7 +199,7 @@ it('animated value changes correctly', () => {
       >
         <Menu.Item onPress={jest.fn()} title="Test" />
       </Menu>
-    </Portal.Host>
+    </TestContextProvider>
   );
   expect(getByTestId('menu-surface-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
@@ -209,7 +220,7 @@ it('animated value changes correctly', () => {
 
 it('renders menu with mode "elevated"', () => {
   const { getByTestId } = render(
-    <Portal.Host>
+    <TestContextProvider>
       <Menu
         visible
         onDismiss={jest.fn()}
@@ -219,7 +230,7 @@ it('renders menu with mode "elevated"', () => {
         <Menu.Item onPress={jest.fn()} title="Undo" />
         <Menu.Item onPress={jest.fn()} title="Redo" />
       </Menu>
-    </Portal.Host>
+    </TestContextProvider>
   );
 
   const menuSurface = getByTestId('menu-surface');
@@ -233,7 +244,7 @@ it('renders menu with mode "elevated"', () => {
 
 it('renders menu with mode "flat"', () => {
   const { getByTestId } = render(
-    <Portal.Host>
+    <TestContextProvider>
       <Menu
         visible
         onDismiss={jest.fn()}
@@ -243,7 +254,7 @@ it('renders menu with mode "flat"', () => {
         <Menu.Item onPress={jest.fn()} title="Undo" />
         <Menu.Item onPress={jest.fn()} title="Redo" />
       </Menu>
-    </Portal.Host>
+    </TestContextProvider>
   );
 
   const menuSurface = getByTestId('menu-surface');