[Android] Wrong menu position in Menu component

[alex-fournier]

Current behaviour

In Menu component, the menu is not positioned as expected when visible. For example with anchorPosition="bottom", the menu comes over the anchor.

Expected behaviour

The menu should appear under anchor.

How to reproduce?

https://snack.expo.dev/@alexfournier/ludicrous-green-churros

Tested with two physical devices: Google Pixel 7 and Samsung Galaxy S24.

actual	expected

What have you tried so far?

When passing the correct status bar height using statusBarHeight, it works fine. I think this piece of code is not working as expected as it returns 0 on my two devices:

// src/constants.tsx
const estimatedStatusBarHeight =
  NativeModules.NativeUnimoduleProxy?.modulesConstants?.ExponentConstants
    ?.statusBarHeight ?? 0;

Your Environment

software	version
android	14
react-native	0.74.5
react-native-paper	5.12.5
node	20.10.0
npm or yarn	1.22.19
expo sdk	51.0.32

[gedu]

Hey, yes, there seems to be something on Android that requires a deeper investigation. Would you like to contribute?

[alex-fournier]

I think the regression comes from this commit in Expo: https://github.com/expo/expo/pull/28014/files

Constants from expo-constants are not exported anymore so NativeModules.NativeUnimoduleProxy.modulesConstants is now empty.

We could use StatusBar.currentHeight and apply this value only when status bar is set as translucent but I didn't find a way to know this without native code yet.

Or maybe using insets from react-native-safe-area-context could do the job.

[gedu]

Yes, there is a comment that we should replace it with react-native-safe-area-context probably with

import { useSafeAreaInsets } from 'react-native-safe-area-context';

[alex-fournier]

I am working on a PR to fix that.