apply safe area insets to menu

[mehranabi]

Current behaviour

When I have a large component in a Menu, it can go out of the safe-area-view going behind the statusbar and the notch (photos below).

Expected behaviour

Menu should consider the SafeArea Insets when calculating the available space to show the menu on Top.

How to reproduce?

Render a large enough component in a Menu and scroll to a point that including the statusbar/notch there's enough space on top of the anchor. The menu opens on top and goes under the statusbar/notch.

Preview

iPhone 13 mini:

What have you tried so far?

Adding SafeArea Top Inset value to the additionalVerticalValue calculated here fixes the issue: https://github.com/callstack/react-native-paper/blob/beab66e074e2b0dfa1251ae221308178003d4a9b/src/components/Menu/Menu.tsx#L447-L451

Although after doing this, when the menu opens below the anchor, it has a space from anchor equal to the top-inset, so more changes are needed to correctly apply the insets.

Your Environment

software	version
ios	18.1
android	SDK 34
react-native	0.76.9
react-native-paper	5.13.3
node	v22.12.0
npm or yarn	yarn 4.7.0
expo sdk	~52.0.46

[github-actions[bot]]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

[mehranabi]

Here's a snack that showcases the issue: https://snack.expo.dev/eyP4gey6Hr1QVrmzBVgnz