callstack
[Android] Wrong menu position in Menu component
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 |
Hey, yes, there seems to be something on Android that requires a deeper investigation. Would you like to contribute?
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.
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';
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?
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...
