fix: use GestureAppPressable instead of AppPressable for modals IconButton

Author: tfomkin

libs/mobile/shared/ui/ui-kit/src/icon-button/component.tsx

@@ -1,31 +1,68 @@
 import { ReactElement } from 'react';
+import { PressableProps as GesturePressableProps } from 'react-native-gesture-handler';
 import { cn } from '@open-webui-react-native/mobile/shared/ui/styles';
 import { Icon, IconProps } from '../icon/component';
 import { IconName } from '../icon/types';
-import { AppPressable, AppPressableProps } from '../pressable';
+import { AppPressable, AppPressableProps, GestureAppPressable } from '../pressable';
 import { AppSpinner } from '../spinner';
 
-export interface IconButtonProps extends AppPressableProps {
+interface BaseIconButtonProps {
   iconName: IconName;
   iconProps?: Omit<IconProps, 'name'>;
   isLoading?: boolean;
+  className?: string;
 }
 
-export function IconButton({
-  className,
+export type IconButtonProps =
+  | (BaseIconButtonProps &
+      AppPressableProps & {
+        useGestureHandler?: false;
+      })
+  | (BaseIconButtonProps &
+      GesturePressableProps & {
+        useGestureHandler: true;
+      });
+
+const IconButtonContent = ({
+  isLoading,
   iconName,
   iconProps,
-  isLoading,
-  disabled,
-  ...restProps
-}: IconButtonProps): ReactElement {
+}: Pick<BaseIconButtonProps, 'isLoading' | 'iconName' | 'iconProps'>): ReactElement =>
+  isLoading ? <AppSpinner size='small' /> : <Icon name={iconName} {...iconProps} />;
+
+export function IconButton(props: IconButtonProps): ReactElement {
+  const baseClassName = cn('p-8 disabled:opacity-30 items-center justify-center', props.className);
+
+  // NOTE: Pressable from react-native does not work correctly with react-native-modal - https://github.com/react-native-modal/react-native-modal/issues/582#issuecomment-1156723062
+  if (props.useGestureHandler) {
+    const { useGestureHandler, iconName, iconProps, isLoading, className, ...gestureProps } = props;
+
+    return (
+      <GestureAppPressable
+        {...gestureProps}
+        hitSlop={8}
+        className={baseClassName}
+        disabled={gestureProps.disabled || isLoading}>
+        <IconButtonContent
+          iconName={iconName}
+          iconProps={iconProps}
+          isLoading={isLoading} />
+      </GestureAppPressable>
+    );
+  }
+
+  const { useGestureHandler, iconName, iconProps, isLoading, className, ...rnProps } = props;
+
   return (
     <AppPressable
+      {...rnProps}
       hitSlop={8}
-      disabled={disabled || isLoading}
-      className={cn('p-8 disabled:opacity-30 items-center justify-center', className)}
-      {...restProps}>
-      {isLoading ? <AppSpinner size='small' /> : <Icon name={iconName} {...iconProps} />}
+      className={baseClassName}
+      disabled={rnProps.disabled || isLoading}>
+      <IconButtonContent
+        iconName={iconName}
+        iconProps={iconProps}
+        isLoading={isLoading} />
     </AppPressable>
   );
 }

libs/mobile/shared/ui/ui-kit/src/modal/component.tsx

@@ -43,6 +43,7 @@ export function AppModal({ modalRef, children, ...modalProps }: AppModalProps):
             onPress={close}
             className='absolute active:opacity-1 active:bg-background-secondary bg-background-primary border border-text-secondary p-0 rounded-full items-center justify-center w-[24] h-[24] top-4 right-4'
             iconProps={{ className: 'color-text-primary', width: 16 }}
+            useGestureHandler
           />
         </View>
       )}