chore: Upgrade zeego package (#880)

Author: muhsin-k

package.json

@@ -41,6 +41,7 @@
     "@react-native-community/netinfo": "^11.3.2",
     "@react-native-firebase/app": "^21.0.0",
     "@react-native-firebase/messaging": "^21.0.0",
+    "@react-native-menu/menu": "^1.2.0",
     "@react-navigation/bottom-tabs": "^6.6.1",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.10.1",
@@ -80,6 +81,8 @@
     "react-native-file-viewer": "^2.1.5",
     "react-native-gesture-handler": "^2.17.1",
     "react-native-image-picker": "^7.1.2",
+    "react-native-ios-context-menu": "^3.1.0",
+    "react-native-ios-utilities": "^5.1.0",
     "react-native-keyboard-controller": "^1.13.4",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-pager-view": "^6.2.1",
@@ -100,7 +103,7 @@
     "tailwindcss": "^3.4.12",
     "twrnc": "^4.5.1",
     "use-deep-compare-effect": "^1.8.1",
-    "zeego": "^1.10.0"
+    "zeego": "^2.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ImageSourcePropType, Keyboard, Pressable } from 'react-native';
+import { ImageSourcePropType, Keyboard, Platform, Pressable } from 'react-native';
 import { BottomSheetModal, useBottomSheetSpringConfigs } from '@gorhom/bottom-sheet';
 import Animated from 'react-native-reanimated';
 
@@ -80,7 +80,10 @@ export const ChatHeader = ({
           </Pressable>
         </Animated.View>
 
-        <Animated.View style={tailwind.style('flex flex-row flex-1 justify-end')}>
+        <Animated.View
+          style={tailwind.style(
+            `flex flex-row flex-1 justify-end ${Platform.OS === 'ios' ? 'gap-4' : ''}`,
+          )}>
           <Animated.View style={tailwind.style('flex flex-row items-center gap-4')}>
             {hasSla && (
               <Pressable hitSlop={8} onPress={toggleSlaEventsSheet}>

src/screens/chat-screen/components/chat-header/ChatHeader.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, PropsWithChildren, useCallback, useRef } from 'react';
-import { Platform, Pressable } from 'react-native';
+import { Platform, Pressable, View } from 'react-native';
 import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
@@ -18,6 +18,33 @@ export type DashboardList = {
   onSelect: (url: string | undefined, title: string | undefined) => void;
 };
 
+const DropdownMenuTrigger = DropdownMenu.create<React.ComponentProps<typeof DropdownMenu.Trigger>>(
+  props => (
+    <DropdownMenu.Trigger {...props} asChild>
+      <View aria-role="button" style={tailwind.style('ml-4')}>
+        {props.children}
+      </View>
+    </DropdownMenu.Trigger>
+  ),
+  'Trigger',
+);
+
+const DropdownMenuItem = DropdownMenu.create<React.ComponentProps<typeof DropdownMenu.Item>>(
+  props => (
+    <DropdownMenu.Item {...props}>
+      <View style={tailwind.style('flex flex-row items-center')}>
+        <DropdownMenu.ItemTitle
+          style={tailwind.style(
+            'text-base text-gray-950 font-inter-420-20 leading-[21px] tracking-[0.16px] capitalize',
+          )}>
+          {props.children}
+        </DropdownMenu.ItemTitle>
+      </View>
+    </DropdownMenu.Item>
+  ),
+  'Item',
+);
+
 // eslint-disable-next-line react/display-name
 const DropdownMenuBottomSheetBackdrop = forwardRef<
   React.RefObject<BottomSheetModal>,
@@ -136,21 +163,19 @@ export const ChatDropdownMenu = (props: PropsWithChildren<ChatDropdownMenuProps>
       </React.Fragment>
     );
   }
+
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger style={tailwind.style('ml-4')}>
-        {/* @ts-ignore */}
-        {children}
-      </DropdownMenu.Trigger>
+      <DropdownMenuTrigger>{children}</DropdownMenuTrigger>
       <DropdownMenu.Content>
         {dropdownMenuList.map(menuOption => {
           const handleOnOptionSelect = () => {
             menuOption.onSelect(menuOption.url, menuOption.title);
           };
           return (
-            <DropdownMenu.Item onSelect={handleOnOptionSelect} key={menuOption.title}>
-              <DropdownMenu.ItemTitle>{menuOption.title}</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
+            <DropdownMenuItem onSelect={handleOnOptionSelect} key={menuOption.title}>
+              {menuOption.title}
+            </DropdownMenuItem>
           );
         })}
       </DropdownMenu.Content>

src/screens/chat-screen/components/chat-header/DropdownMenu.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, PropsWithChildren, useCallback, useRef } from 'react';
-import { Platform, Pressable } from 'react-native';
+import { Platform, Pressable, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { interpolate, runOnJS, useAnimatedStyle } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -24,6 +24,26 @@ type MessageMenuProps = {
   menuOptions: MenuOption[];
 };
 
+const ContextMenuTrigger = ContextMenu.create<React.ComponentProps<typeof ContextMenu.Trigger>>(
+  props => (
+    <ContextMenu.Trigger {...props} asChild>
+      <View aria-role="button">{props.children}</View>
+    </ContextMenu.Trigger>
+  ),
+  'Trigger',
+);
+
+const ContextMenuItem = ContextMenu.create<React.ComponentProps<typeof ContextMenu.Item>>(
+  props => (
+    <ContextMenu.Item {...props}>
+      <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+        {props.children}
+      </View>
+    </ContextMenu.Item>
+  ),
+  'Item',
+);
+
 // eslint-disable-next-line react/display-name
 const ContextMenuBottomSheetBackdrop = forwardRef<
   React.RefObject<BottomSheetModal>,
@@ -131,27 +151,20 @@ export const MessageMenu = (props: PropsWithChildren<MessageMenuProps>) => {
       </React.Fragment>
     );
   }
+
   return menuOptions?.length > 0 ? (
     <ContextMenu.Root>
-      {/*
-          The below children is a React Element but is not as per the types
-          of the library so ignoring the issue
-      */}
-      <ContextMenu.Trigger action="longPress">
-        {/* @ts-ignore */}
-        {children}
-      </ContextMenu.Trigger>
-
+      <ContextMenuTrigger>{children}</ContextMenuTrigger>
       <ContextMenu.Content>
         {menuOptions?.map(option => {
           return (
-            <ContextMenu.Item
-              onSelect={option.handleOnPressMenuOption}
+            <ContextMenuItem
               key={option.title}
+              onSelect={option.handleOnPressMenuOption}
               destructive={option.destructive}>
-              <ContextMenu.ItemTitle>{option.title}</ContextMenu.ItemTitle>
               {option.icon}
-            </ContextMenu.Item>
+              <ContextMenu.ItemTitle>{option.title}</ContextMenu.ItemTitle>
+            </ContextMenuItem>
           );
         })}
       </ContextMenu.Content>