fix: Menu not showing inside of react-native modal component

[milankyncl]

Current behaviour

Menu component is not showing inside of react-native modal

Expected behaviour

Menu component to be show even in react-native model.

Code sample

https://snack.expo.io/L5vLMUFpG

What have you tried

I tried to check if my setup is correct. Outside of modal my menu is working fine, when using inside of react-native Modal component, no menu after triggering shows up.

Your Environment

software	version
ios or android	iOS 14.4
react-native	0.63.4
react-native-paper	4.7.1
node	14.5.0
npm or yarn	1.22.5
expo sdk

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-paper (found: 4.7.1, latest: 4.7.2)
• yarn (found: 1.22.5, latest: 1.22.10)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[TOPCODER10192]

@milankyncl were you able to solve this issue?

[PunainenAurinko]

This is issue is still happening to me with RN Paper v. 4.10.0 - Menu is not showing up when triggered from insider a RN modal, unless it is wrapped in a Provider tag. NOTE: The Provider tag must be at the top level of the view inside the RN modal that shows the menu. Then it works without a problem.

[fivecar]

Still happening, with the very latest of everything as of today. Snack here.

The proximate cause is right here in the code. Basically Menu.tsx infinite-spins when this.menu.measureInWindow returns zeros, causing it to constantly call this.show forever.

Interestingly, when this happens, onLayout here gives the right measurements, despite measureInWindow returning zeros. This suggests that using onLayout for the window measurements might actually be the right thing, but I don't know the code well enough to be certain that it'll work in all cases.

@lukewalczak : could we re-open this issue? I'm happy to help with a PR if people who understand Menu can review my changes.

[fivecar]

@lukewalczak : I've opened #3502, which shows how the infinite loop in Menu can be averted by using onLayout instead of measureInWindow. However, note that this still doesn't show the menu in an RN Modal unless you wrap all modal contents within their own Provider.

I unfortunately don't understand the Provider/Menu relationship well enough to know why the Menu, even if measured, doesn't show in RN Modals.

[MathisBarre]

Have you tried to use the <Portal.Host> container in or around your modal ?

[fivecar]

@MathisBarre : Thanks for that suggestion. Yes, using either <Portal.Host> or <Provider> within an RN Modal solves the issue (since <Provider> has a Portal.Host). Here's a snack that shows it.

My previously-linked PR (#3503) was already merged into main's docs to address this.