fix: correct menu position with translucent status bar (#4685)

Author: lukewalczak

example/src/Examples/MenuExample.tsx

@@ -153,7 +153,7 @@ const MenuExample = ({ navigation }: Props) => {
             anchorPosition="bottom"
             anchor={
               <Button mode="outlined" onPress={_toggleMenu('menu5')}>
-                Menu with anchor position
+                Menu with anchor position bottom
               </Button>
             }
           >

package.json

@@ -84,7 +84,6 @@
     "eslint": "8.31.0",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-local-rules": "^1.3.2",
-    "expo-constants": "~15.4.6",
     "glob": "^7.1.3",
     "husky": "^1.3.1",
     "jest": "^29.6.3",

src/components/Menu/Menu.tsx

@@ -20,8 +20,9 @@ import {
   Pressable,
 } from 'react-native';
 
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
 import MenuItem from './MenuItem';
-import { APPROX_STATUSBAR_HEIGHT } from '../../constants';
 import { useInternalTheme } from '../../core/theming';
 import type { MD3Elevation, ThemeProp } from '../../types';
 import { ElevationLevels } from '../../types';
@@ -182,7 +183,7 @@ const isBrowser = () => Platform.OS === 'web' && 'document' in global;
 
 const Menu = ({
   visible,
-  statusBarHeight = APPROX_STATUSBAR_HEIGHT,
+  statusBarHeight,
   overlayAccessibilityLabel = 'Close menu',
   testID = 'menu',
   anchor,
@@ -197,6 +198,7 @@ const Menu = ({
   keyboardShouldPersistTaps,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const insets = useSafeAreaInsets();
   const [rendered, setRendered] = React.useState(visible);
   const [left, setLeft] = React.useState(0);
   const [top, setTop] = React.useState(0);
@@ -444,7 +446,7 @@ const Menu = ({
 
   // 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,
   });
 

src/components/__tests__/DataTable.test.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(

src/components/__tests__/Menu.test.tsx

@@ -2,13 +2,16 @@ import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
 import { act, render, screen, waitFor } 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,