From 52879d0cf95003d180a0840be23676af78fa284d Mon Sep 17 00:00:00 2001
From: kirillzyusko <kiryl@margelo.io>
Date: Tue, 24 Dec 2024 17:01:10 +0100
Subject: [PATCH 1/2] fix: smooth keyboard handling in BaseModal

---
 src/components/Modal/BaseModal.tsx | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index e1c5a7c48b86..cb2ea21a3f17 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -1,13 +1,14 @@
 import {PortalHost} from '@gorhom/portal';
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
-import {View} from 'react-native';
+import {Animated, View} from 'react-native';
+import {useKeyboardAnimation} from 'react-native-keyboard-controller';
 import ReactNativeModal from 'react-native-modal';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
-import useKeyboardState from '@hooks/useKeyboardState';
 import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -64,7 +65,6 @@ function BaseModal(
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct modal width
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
-    const keyboardStateContextValue = useKeyboardState();
 
     const safeAreaInsets = useSafeAreaInsets();
 
@@ -194,7 +194,7 @@ function BaseModal(
               safeAreaPaddingRight,
               shouldAddBottomSafeAreaMargin,
               shouldAddTopSafeAreaMargin,
-              shouldAddBottomSafeAreaPadding: (!avoidKeyboard || !keyboardStateContextValue?.isKeyboardShown) && shouldAddBottomSafeAreaPadding,
+              shouldAddBottomSafeAreaPadding,
               shouldAddTopSafeAreaPadding,
               modalContainerStyleMarginTop: modalContainerStyle.marginTop,
               modalContainerStyleMarginBottom: modalContainerStyle.marginBottom,
@@ -214,6 +214,13 @@ function BaseModal(
         }),
         [isVisible, type],
     );
+    const {height, progress} = useKeyboardAnimation();
+    const {unmodifiedPaddings} = useStyledSafeAreaInsets();
+    const removeSafeAreaPadding = progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, unmodifiedPaddings.bottom],
+        extrapolate: 'clamp',
+    });
 
     return (
         <ModalContext.Provider value={modalContextValue}>
@@ -260,7 +267,7 @@ function BaseModal(
                     statusBarTranslucent={statusBarTranslucent}
                     navigationBarTranslucent={navigationBarTranslucent}
                     onLayout={onLayout}
-                    avoidKeyboard={avoidKeyboard}
+                    avoidKeyboard={false}
                     customBackdrop={shouldUseCustomBackdrop ? <Overlay onPress={handleBackdropPress} /> : undefined}
                 >
                     <ModalContent
@@ -272,12 +279,18 @@ function BaseModal(
                             active={isVisible}
                             initialFocus={initialFocus}
                         >
-                            <View
-                                style={[styles.defaultModalContainer, modalPaddingStyles, modalContainerStyle, !isVisible && styles.pointerEventsNone]}
+                            <Animated.View
+                                style={[
+                                    styles.defaultModalContainer,
+                                    modalPaddingStyles,
+                                    modalContainerStyle,
+                                    !isVisible && styles.pointerEventsNone,
+                                    avoidKeyboard && {transform: [{translateY: Animated.add(height, removeSafeAreaPadding)}]},
+                                ]}
                                 ref={ref}
                             >
                                 <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
-                            </View>
+                            </Animated.View>
                         </FocusTrapForModal>
                     </ModalContent>
                 </ReactNativeModal>

From b5da9edd58b95a0913d4d62f35e132c3fae7c53b Mon Sep 17 00:00:00 2001
From: kirillzyusko <kiryl@margelo.io>
Date: Thu, 26 Dec 2024 11:59:27 +0100
Subject: [PATCH 2/2] fix: remove re-specifying default property

---
 src/components/Modal/BaseModal.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index cb2ea21a3f17..9db744b49aa7 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -267,7 +267,6 @@ function BaseModal(
                     statusBarTranslucent={statusBarTranslucent}
                     navigationBarTranslucent={navigationBarTranslucent}
                     onLayout={onLayout}
-                    avoidKeyboard={false}
                     customBackdrop={shouldUseCustomBackdrop ? <Overlay onPress={handleBackdropPress} /> : undefined}
                 >
                     <ModalContent