Menu doesn't open on the Next.js web app after upgrading to React 18

[reck753]

Current behaviour

What I managed to find out is that the animations are not firing and hence the menu doesn't pop up where it should be nor it gets sized accordingly. The menu appears in the DOM, but it's size (height I think) remains 0. The Menu works perfectly on plain RN web.

Expected behaviour

Code sample

Screenshots (if applicable)

What have you tried

I tried upgrading Next.js to a larger version, as I thought it might be connected to them, however it didn't help. Tried upgrading the React as well, also, it didn't help.

Your Environment

software	version
ios or android
react-native
react-native-paper
node
npm or yarn
expo sdk

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

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

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

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

[popejs]

I found the same issue when upgrading Next.js web Reac 18

[reck753]

UPDATE: I did some further debugging and found out that sending the Menu through its Portal somehow causes the issue. For example, replacing Portal with React.Fragment, in Menu.tsx would make menu appear and show (of course, displaced since we removed Portal). With further debugging I found out that setting of this.menu in View ref (here) "lags" behind for the next render and that's why it doesn't show up:

With Portal:

Without Portal, kind-a working (we can see the menu):

I couldn't find any solution for the problem... I hope this can help a bit someone else in the debugging process.

[gatouillatpy]

this.menu is null sometimes when rendered for the first time, as commented here https://github.com/callstack/react-native-paper/blob/main/src/components/Menu/Menu.tsx#L275-L280 (especially since React 18, I have the same problem)

This leads https://github.com/callstack/react-native-paper/blob/main/src/components/Menu/Menu.tsx#L270 to never return.

Solution is to replace https://github.com/callstack/react-native-paper/blob/main/src/components/Menu/Menu.tsx#L183-L187 with:

if (this.menu) {
	this.menu.measureInWindow((x, y, width, height) => {
		resolve({ x, y, width, height });
	});
} else {
	resolve({ x: 0, y: 0, width: 0, height: 0 });
}

[lukewalczak]

@gatouillatpy would you like to prepare the fix for it?

[mathias-berg]

Can confirm the above solution works. Just upgraded from Expo 45 to Expo 46 (React 18) and the menu stopped showing in my app, forked this repo and did the above and everything works now.

[lukewalczak]

I will be happy to accept your contribution

[mathias-berg]

@lukewalczak I will see if I can pull something together in the upcoming days.

[mathias-berg]

This seems to be fixed in RC, I'm sorry for not helping out, a lot of things got in the way.

[lukewalczak]

This seems to be fixed in RC, I'm sorry for not helping out, a lot of things got in the way.

Based on that information, closing the issue.