React-native-paper: Menu crashes on the second open

[rolandjitsu]

Environment

Running a react-native app on a Pixel 3 with the latest Android version.

Description

It seems like every 2nd open of a <Menu> triggers some error. This is happening after 3.0.0-alpha.4. I think it might have been introduced with https://github.com/callstack/react-native-paper/commit/fa22a68.
Might be related to https://github.com/callstack/react-native-paper/issues/1329.

Reproducible Demo

Made a simple snack, but this is more or less the component I'm rendering the menu in:

import React, {
  useCallback,
  useMemo,
  useState
} from 'react';
import {
  ScrollView,
  StyleSheet,
  Vibration,
  View
} from 'react-native';
import {SafeAreaView} from 'react-navigation';
import {
  Appbar,
  Divider,
  Menu,
  Provider
} from 'react-native-paper';

export default function MyComp() {
  const [menuVisible, setMenuVisible] = useState(false);
  const hideMenu = useCallback(() => setMenuVisible(false), [setMenuVisible]);
  const showMenu = useCallback(() => setMenuVisible(true), [setMenuVisible]);
  const menuAnchor = useMemo(() => (
    <Appbar.Action
      onPress={showMenu}
      icon="dots-vertical"
    />
  ), []);

  return (
    <SafeAreaView>
      <Provider>
       <Appbar.Header>
         <Appbar.Content
            title="Title"
            subtitle="Subtitle"
          />
          <Menu
            visible={menuVisible}
            onDismiss={hideMenu}
            anchor={menuAnchor}
          >
            <Menu.Item onPress={hideMenu} title="Item 1" />
            <Menu.Item onPress={hideMenu} title="Item 2" />
            <Divider />
            <Menu.Item
              // onPress={() => {}}
              title="Logout"
              icon="logout"
            />
          </Menu>
        </Appbar.Header>
      </Provider>
    </SafeAreaView>
  );
}

[solace]

I'm experiencing this issue, so installed 3.0.0-alpha.4, but now get Cannot find module '../../dist/mappings.json' which is mentioned in #1302 that is fixed in 3.0.0-alpha.5.

Any suggestions on a workaround for either?

[satya164]

The current stable version is 3.2.1

[solace]

@satya164 Yes, but as indicated by OP, it crashes on second tap. alpha.4 is the last version where it works as expected.

[SwitiSM]

Any solution for this !?

[solace]

@SwitiSM Updated to most recent version of react-native-paper and replaced the menu with react-native-material-menu.

[SwitiSM]

@solace thank you

[github-actions[bot]]

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.

[rolandjitsu]

This is still a valid issue.

[Trancever]

@rolandjitsu What is a Paper version and android version on which you can reproduce the issue? Could you provide us a Snack so we can easily test it?

[Nitheeshsalian]

"react-native-paper": "3.3.0"

[Subway19]

This is still a valid issue.
App works on debug mode but crashes on production
"react-native-paper": "^3.1.0"

[AlfonsoCerrato]

It still happens for me at the first menu dismiss.

"react-native": "^0.59.9", "react-native-paper": "^3.8.0"

Crashes on production.

[github-actions[bot]]

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.

[LRNZ09]

This is still a problem with 4.0.1, causing the same error as OP