Menu item isn't render production build

[dimaportenko]

Describe the bug I have a chat app and a simple menu with only one item - delete. In debug mode everything looks good but in the production build it does not always render menu item text (see screenshots).

const menuItems: MenuItemProps[] = [
    {
      text: 'Delete',
      isDestructive: true,
      onPress: deleteMsg,
    },
  ];

Screenshots

Package versions

• React: "react": "17.0.2",
• React Native: "react-native": "0.67.3",
• React Native Reanimated: "react-native-reanimated": "2.8.0",
• React Native Hold Menu: "react-native-hold-menu": "0.1.3",
• Expo: "expo": "^45.0.0",

Additional context Please let me know where to look. I guess it could be something related to the menuItem height or opacity.

[dimaportenko]

I did some debug with coloring views and I found out that the menu item height is incorrect. It has green color on the screenshot

So I added height explicitly to the menuItem styles and it solves my issue.

--- a/node_modules/react-native-hold-menu/src/components/menu/MenuItem.tsx
+++ b/node_modules/react-native-hold-menu/src/components/menu/MenuItem.tsx
@@ -13,6 +13,7 @@ import { BORDER_LIGHT_COLOR, BORDER_DARK_COLOR } from './constants';
 import isEqual from 'lodash.isequal';
 import { getColor } from './calculations';
 import { AnimatedIcon } from '../provider/Provider';
+import {MenuItemHeight} from '../../utils/calculations';

 const ItemComponent = IS_IOS ? TouchableOpacity : GHTouchableOpacity;
 // @ts-ignore
@@ -33,6 +34,7 @@ const MenuItemComponent = ({ item, isLast }: MenuItemComponentProps) => {
     return {
       borderBottomColor,
       borderBottomWidth: isLast ? 0 : 1,
+      height: MenuItemHeight(),
     };
   }, [theme, isLast, item]);

[Pyroboomka]

Thanks for the tip, it happens to us sometimes too. Sometimes it's wrong menu item height, sometimes menu shows not alongside the item tapped but with some offset so it's partially visible. Sometimes the UI elements below the holdable item are not pressable (some portal/overlays don't get unmounted?) I did some coloring too, but didn't spent much time and had no success debugging this. Have you encountered same issues by chance?

[dimaportenko]

@dimaportenko with fix I shared above, I don't see any issues on my side so far.

[dimaportenko]

@enesozturk if you fine to add menu height. I can prepare PR.

[enesozturk]

Hi @dimaportenko, sorry I couldn't spend time on this for a while that is why couldn't try. Glad to hear you solved it, highly appreciate it if you can open a PR. Thanks!

[fukemy]

hi @dimaportenko , did u ever try with adding customview like this?

[dimaportenko]

@enesozturk np, same for me I haven't time to prepare pr yet. But it is still somewhere on my list.

[dimaportenko]

@fukemy nope, I haven't tried anything like this. Tbh I've just started to use the library with the simple case you can see in my first post on this issue. But I think I'll try more later on.

[fukemy]

tks, even in native i didnt see any app can apply it's inside their app, but Message and Telegram did it with very nice ui, i will waiting for your update

[fukemy]

hi bro @enesozturk , i just found stream chat done it, they using TypeScript + Reanimated2 only and didnt use context menu api from Apple