Merge pull request #37 from RonasIT/PRD-2157-modal-close-button-behavior-fix

PRD-2157: modal close button on scroll behavior fix

Author: veliseev93

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

@@ -0,0 +1,33 @@
+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 { GestureAppPressable } from '../pressable';
+import { AppSpinner } from '../spinner';
+
+export interface GesturePressableIconButtonProps extends GesturePressableProps {
+  iconName: IconName;
+  iconProps?: Omit<IconProps, 'name'>;
+  isLoading?: boolean;
+  className?: string;
+}
+
+export function GesturePressableIconButton({
+  iconName,
+  iconProps,
+  isLoading,
+  disabled,
+  className,
+  ...pressableProps
+}: GesturePressableIconButtonProps): ReactElement {
+  return (
+    <GestureAppPressable
+      {...pressableProps}
+      hitSlop={8}
+      disabled={disabled || isLoading}
+      className={cn('p-8 disabled:opacity-30 items-center justify-center', className)}>
+      {isLoading ? <AppSpinner size='small' /> : <Icon name={iconName} {...iconProps} />}
+    </GestureAppPressable>
+  );
+}

libs/mobile/shared/ui/ui-kit/src/gesture-pressable-icon-button/index.ts

@@ -0,0 +1 @@
+export * from './component';

libs/mobile/shared/ui/ui-kit/src/index.ts

@@ -41,3 +41,4 @@ export * from './sheet-header';
 export * from './keyboard-aware-scroll-view';
 export * from './pressable-search-input';
 export * from './full-screen-search-modal';
+export * from './gesture-pressable-icon-button';

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

@@ -1,5 +1,7 @@
 import { useState, ReactElement, PropsWithChildren, useImperativeHandle, ForwardedRef } from 'react';
+import { Platform } from 'react-native';
 import Modal, { ModalProps } from 'react-native-modal';
+import { GesturePressableIconButton } from '../gesture-pressable-icon-button';
 import { IconButton } from '../icon-button';
 import { AppToast } from '../toast';
 import { View } from '../view';
@@ -37,13 +39,23 @@ export function AppModal({ modalRef, children, ...modalProps }: AppModalProps):
       {isVisible && (
         <View className='bg-background-primary px-24 py-20 rounded-xl border border-text-secondary'>
           {children}
-          <IconButton
-            iconName='close'
-            hitSlop={8}
-            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 }}
-          />
+          {Platform.OS === 'ios' ? (
+            <GesturePressableIconButton
+              iconName='close'
+              hitSlop={8}
+              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 }}
+            />
+          ) : (
+            <IconButton
+              iconName='close'
+              hitSlop={8}
+              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 }}
+            />
+          )}
         </View>
       )}
       <AppToast />