Menu component closes and fails to open again on re-render

[julwil]

Current behaviour

• Open the Menu component
• The parent component re-renders
• Menu component closes and can't be opened again

Expected behaviour

• Open the Menu component
• The parent component re-renders
• Menu component stays open

How to reproduce?

import React, {useState} from 'react';
import {View} from 'react-native';
import {Button, Menu, PaperProvider} from 'react-native-paper';

const MyComponent = () => {
  const [randomVarialbeToForceRerender, setRandomVarialbeToForceRerender] =
    useState(0);
  const [visible, setVisible] = useState(false);

  const openMenu = () => {
    console.debug('Opening menu');
    setVisible(true);

    /**
     * We update a state variable to force a re-render of the component.
     * A real-world example could be a network request or some other
     * asynchronous operation that updates the state.
     */
    setTimeout(() => setRandomVarialbeToForceRerender(Math.random()), 1000);
  };

  const closeMenu = () => {
    setVisible(false);
    console.debug('Closing menu');
  };

  console.debug('visible', visible);
  return (
    <PaperProvider>
      <View
        style={{
          paddingTop: 50,
          flexDirection: 'row',
          justifyContent: 'center',
        }}>
        <Menu
          visible={visible}
          onDismiss={closeMenu}
          anchor={<Button onPress={openMenu}>Show menu</Button>}>
          <Menu.Item
            onPress={() => {}}
            title={`Random  ${randomVarialbeToForceRerender}`}
          />
        </Menu>
      </View>
    </PaperProvider>
  );
};

export default MyComponent;

Preview

Simulator.Screen.Recording.-.iPhone.16.-.2025-06-23.at.12.55.03.mp4

What have you tried so far?

Memoization to avoid re-rendering the menu. However, this approach is limited and breaks
when the menu items are non-static (c.f. example)

Your Environment

software	version
ios	18.5
android	x
react-native	0.77.2
react-native-paper	5.13.1
node	18.20.8
npm or yarn	3.8.7
expo sdk	x.x.x

[bjeld]

We ran into the same issue after upgrading to React Native 0.80 ("react-native-paper": "5.14.5")
Only solution for now is to downgrade to React Native 0.79.4

[bjeld]

Menu_Bug.mov

[atheck]

Same here with react-native 0.80.1

[adamgajzlerowicz]

Also react-native 0.80.1

[hussainahmad]

@julwil did you find any workaround ?

[vpzomtrrfrt]

This seems to fix it:

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..3c9f295 100644
--- a/node_modules/react-native-paper/src/components/Menu/Menu.tsx
+++ b/node_modules/react-native-paper/src/components/Menu/Menu.tsx
@@ -20,6 +20,7 @@ import {
 } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import useLatestCallback from 'use-latest-callback';
 
 import MenuItem from './MenuItem';
 import { useInternalTheme } from '../../core/theming';
@@ -387,7 +390,7 @@ const Menu = ({
     });
   }, [removeListeners, theme]);
 
-  const updateVisibility = React.useCallback(
+  const updateVisibility = useLatestCallback(
     async (display: boolean) => {
       // Menu is rendered in Portal, which updates items asynchronously
       // We need to do the same here so that the ref is up-to-date
@@ -404,7 +407,6 @@ const Menu = ({
         return;
       });
     },
-    [hide, show]
   );
 
   React.useEffect(() => {

[loekTheDreamer]

thank you @vpzomtrrfrt your solution works

[haykerman]

Manually providing position coordinates didn't help either.

[haykerman]

+import useLatestCallback from 'use-latest-callback';

Obviously would be good to get that merged in.
But there's another issue, on the first try, it looks like the menu is opening 2 times. Or at least I see a weird duplicated animation. Not sure what to make of it

[pori4ka]

Any updates? Same issue with react-native 0.80.2 + react-native-paper 5.14.5.
On the first try there's some flickering, feels like it is opening multiple times. After closing it, it can't be opened again.

UPD: Tried to experiment and downgraded react-native to 0.79.5 in a sample project. Now the menu seem to be working, but the issue with flickering on first try still persists.

[LongTailedCat]

I am experiencing this on RN 0.80.0 as well. I am hoping to not have to downgrade RN.

[koz-spyro]

This seems to fix it:

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..3c9f295 100644
--- a/node_modules/react-native-paper/src/components/Menu/Menu.tsx
+++ b/node_modules/react-native-paper/src/components/Menu/Menu.tsx
@@ -20,6 +20,7 @@ import {
} from 'react-native';

import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import useLatestCallback from 'use-latest-callback';

import MenuItem from './MenuItem';
import { useInternalTheme } from '../../core/theming';
@@ -387,7 +390,7 @@ const Menu = ({
});
}, [removeListeners, theme]);

• const updateVisibility = React.useCallback(

• const updateVisibility = useLatestCallback(
  async (display: boolean) => {
  // Menu is rendered in Portal, which updates items asynchronously
  // We need to do the same here so that the ref is up-to-date
  @@ -404,7 +407,6 @@ const Menu = ({
  return;
  });
  },

• [hide, show]
  );

React.useEffect(() => {

Be cautious with that. This works for static screens that don't change size, however on lists (Flatlist, ScrollView etc.) it makes the Menu not being calculated again for each item making it to appear wildly on the screen. For me it's not the solution, nor the workaround unfortunately.

EDIT: after playing with React Native Paper and React Native, I think it's more complex problem connected to RN itself. When used (I wanted to simulate similar component as Menu) simple Portal with menu and calculating the width and height with ref, it still behaves the same, e.g. renders not below / above the anchor but rather in totally different place. It looks to me like any next anchor on the list is displaying menu with previous anchor calculations.

tl;dr

this fix works, the problem is probably with the React Native, not RN Paper.

[shockdesign]

So I encountered this bug and have been trying to find out why it's failing. It turns out when you dismiss the menu and hide is called, the animation never actually finishes. Moving the prevRendered.current = false to before the Animation is set and started seemed to solve the problem for me.

However any logging for when finished is set on that anim never seems to show.

  const hide = React.useCallback(() => {
    removeListeners();

    const { animation } = theme;

+   prevRendered.current = false;

    Animated.timing(opacityAnimationRef.current, {
      toValue: 0,
      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);
      }
    });
  }, [removeListeners, theme]);

I hope this helps maybe resolve what the issue could be?

Looking at the RN documentation, the callback will always be called but finished is only true if the animation wasn't interrupted..

So we don't need to check if it finished or not before setting everything..

Working with animations
Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with {finished: true}. If the animation is done because stop() was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.

^^ from the RN documentation

[santhosh-umapathi-wikifolio]

+1, Experiencing the same issue