Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Menu item isn't render production build #70

Open
dimaportenko opened this issue Jun 2, 2022 · 10 comments
Open

Menu item isn't render production build #70

dimaportenko opened this issue Jun 2, 2022 · 10 comments
Labels
bug Something isn't working

Comments

@dimaportenko
Copy link

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

CleanShot 2022-06-02 at 23 36 24@2x

CleanShot 2022-06-02 at 23 36 41@2x

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 dimaportenko added the bug Something isn't working label Jun 2, 2022
@dimaportenko
Copy link
Author

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]);

CleanShot 2022-06-06 at 13 36 30@2x

@Pyroboomka
Copy link

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
Copy link
Author

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

@dimaportenko
Copy link
Author

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

@enesozturk
Copy link
Owner

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
Copy link

fukemy commented Jun 11, 2022

hi @dimaportenko , did u ever try with adding customview like this?
165982759-5a5d6eb2-592c-4568-88c0-719d23012d6b

@dimaportenko
Copy link
Author

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

@dimaportenko
Copy link
Author

@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
Copy link

fukemy commented Jun 13, 2022

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
Copy link

fukemy commented Jun 17, 2022

Screen Shot 2022-06-17 at 11 23 59
hi bro @enesozturk , i just found stream chat done it, they using TypeScript Reanimated2 only and didnt use context menu api from Apple

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants