[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.

[Ge0ffreyS]

Hello,
I've also noticed this bug on Android when the menu is displayed from an Appbar. I've tried to compensate by adding some padding, but it doesn't work.
Have you managed to fix it?

[alex-fournier]

Hello, I have this fix in my code:

import Constants from 'expo-constants'

<Menu
  statusBarHeight={Constants.statusBarHeight}
  ...
/>

The PR with the fix is still open...

[Vadko]

+1, @alex-fournier solution worked for me