Menu can only be opened once on expo 54 / RN 0.81

[LiamMorrow]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-paper@5.14.5 for the project I'm working on.
I noticed that the Menu component in expo 54 (RN 0.81) can only be opened once, then it stays closed. This affects both iOS and Android.
For some reason I noticed that the finished flag was always false on the hide callback, I'm unsure why this would be. This patch isn't perfect, it now seems like animations only work the first time, however it at least opens and closes fine.

Video of bug

CleanShot.2025-09-17.at.11.09.55.mp4

Video of patched version (no animations after first, but at least opens)

CleanShot.2025-09-17.at.11.10.20.mp4

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-paper/src/components/Menu/Menu.tsx b/node_modules/react-native-paper/src/components/Menu/Menu.tsx
index 55922c1..9b53403 100644
--- a/node_modules/react-native-paper/src/components/Menu/Menu.tsx
+++ b/node_modules/react-native-paper/src/components/Menu/Menu.tsx
@@ -359,11 +359,9 @@ const Menu = ({
         easing: EASING,
         useNativeDriver: true,
       }),
-    ]).start(({ finished }) => {
-      if (finished) {
-        focusFirstDOMNode(menuRef.current);
-        prevRendered.current = true;
-      }
+    ]).start(() => {
+      focusFirstDOMNode(menuRef.current);
+      prevRendered.current = true;
     });
   }, [anchor, attachListeners, measureAnchorLayout, theme]);
 
@@ -377,13 +375,11 @@ const Menu = ({
       duration: ANIMATION_DURATION * animation.scale,
       easing: EASING,
       useNativeDriver: true,
-    }).start(({ finished }) => {
-      if (finished) {
-        setMenuLayout({ width: 0, height: 0 });
-        setRendered(false);
-        prevRendered.current = false;
-        focusFirstDOMNode(anchorRef.current);
-      }
+    }).start(() => {
+      setMenuLayout({ width: 0, height: 0 });
+      setRendered(false);
+      prevRendered.current = false;
+      focusFirstDOMNode(anchorRef.current);
     });
   }, [removeListeners, theme]);
 

This issue body was partially generated by patch-package.

[yanyao2333]

I also encountered the issue in Expo 54 where the menu can only be opened once. However, the problem with the transition animation only working the first time has been around for a while and doesn't seem to have been introduced by the Expo 54 update.

Btw, I tried your patch, and it works!

[RohovDmytro]

+1

[gogupaul123]

Happening to me as well, same setup.

[shoffing]

+1, I noticed this issue affecting https://github.com/fateh999/react-native-paper-dropdown. Hoping for a quick fix!

[alemar11]

+1, I applied the patch to fix the exact same issue on RN 0.80 (without Expo).

[RohovDmytro]

btw, the patch fix is working.

[samuelbadru]

wow spent a good couple hours trying to debug and just seen this, feel silly. will try the patch 👌

[JameDodgers]

I believe it's also necessary to patch the file inside lib/module for it to work in production. If you're using Expo, you can test this by running npx expo start --no-dev --minify

[LiamMorrow]

I believe it's also necessary to patch the file inside lib/module for it to work in production. If you're using Expo, you can test this by running npx expo start --no-dev --minify

Yeah it's definitely interesting. I'm not sure why but my app uses the typescript sources of this lib when building/running

[icedevml]

+1

[Bk49]

+1, I noticed this issue affecting https://github.com/fateh999/react-native-paper-dropdown. Hoping for a quick fix!

I believe this library is no longer maintained since there last update is more than a year ago, and it's sole maintainer is fateh999 himself

[Bk49]

+1 patch does work as what the developer has mentioned. For anyone wondering how to work with patch package

1. npm i -D patch-package postinstall-postinstall
2. Create a new directory patches where you have your package.json
3. Add the following file to the directory
4. Add a new script to you package.json => "postinstall": "patch-package",
5. Commit it to Github
   react-native-paper+5.14.5.patch

For bun users

1. npm i first to create a lock file
2. Follow the steps above

If directly using the file doesn't work...

1. After following step 1 of the first set of instructions, navigate to node_modules/react-native-paper/src/components/Menu/Menu.tsx
2. Replace line 359+ and 377+ like how the owner of this issue did
3. Run npx patch-package react-native-paper

[Bk49]

I believe it's also necessary to patch the file inside lib/module for it to work in production. If you're using Expo, you can test this by running npx expo start --no-dev --minify

How about for EAS Builds?

[Bk49]

I've tried this with EAS, doesn't seems to function correctly even when the patch is included