Fix PR comments

Author: jmusial

src/components/FeatureTrainingModal.tsx

@@ -6,6 +6,7 @@ import {Image, InteractionManager, View} from 'react-native';
 import type {ImageResizeMode, ImageSourcePropType, LayoutChangeEvent, ScrollView as RNScrollView, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import type {MergeExclusive} from 'type-fest';
+import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -215,6 +216,7 @@ function FeatureTrainingModal({
     const [containerHeight, setContainerHeight] = useState(0);
     const [contentHeight, setContentHeight] = useState(0);
     const insets = useSafeAreaInsets();
+    const {isKeyboardActive} = useKeyboardState();
 
     useEffect(() => {
         InteractionManager.runAfterInteractions(() => {
@@ -371,7 +373,10 @@ function FeatureTrainingModal({
 
     const Wrapper = shouldUseScrollView ? ScrollView : View;
 
-    const wrapperStyles = useMemo(() => (shouldUseScrollView ? StyleUtils.getScrollableFeatureTrainingModalStyles(insets) : {}), [shouldUseScrollView, StyleUtils, insets]);
+    const wrapperStyles = useMemo(
+        () => (shouldUseScrollView ? StyleUtils.getScrollableFeatureTrainingModalStyles(insets, isKeyboardActive) : {}),
+        [shouldUseScrollView, StyleUtils, insets, isKeyboardActive],
+    );
 
     return (
         <Modal

src/components/Modal/BaseModal.tsx

@@ -20,7 +20,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
-import getPlatform from '@libs/getPlatform';
+import {canUseTouchScreen as canUseTouchScreenCheck} from '@libs/DeviceCapabilities';
 import NarrowPaneContext from '@libs/Navigation/AppNavigator/Navigators/NarrowPaneContext';
 import Overlay from '@libs/Navigation/AppNavigator/Navigators/Overlay';
 import Navigation from '@libs/Navigation/Navigation';
@@ -110,6 +110,7 @@ function BaseModal(
     const StyleUtils = useStyleUtils();
     const {windowWidth, windowHeight} = useWindowDimensions();
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct modal width
+    const canUseTouchScreen = canUseTouchScreenCheck();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const {sidePanelOffset} = useSidePanel();
@@ -216,23 +217,13 @@ function BaseModal(
 
     // Checks if modal overlaps with topSafeArea. Used to offset tall bottom docked modals with keyboard.
     useEffect(() => {
-        if (type !== CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED || getPlatform() === CONST.PLATFORM.WEB) {
+        if (type !== CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED || !canUseTouchScreen || !isSmallScreenWidth) {
             return;
         }
         const {paddingTop} = StyleUtils.getPlatformSafeAreaPadding(insets);
         const availableHeight = windowHeight - modalHeight - keyboardStateContextValue.keyboardActiveHeight - paddingTop;
         setModalOverlapsWithTopSafeArea((keyboardStateContextValue.isKeyboardAnimatingRef.current || keyboardStateContextValue.isKeyboardActive) && Math.floor(availableHeight) <= 0);
-    }, [
-        StyleUtils,
-        insets,
-        keyboardStateContextValue.isKeyboardActive,
-        keyboardStateContextValue.isKeyboardAnimatingRef,
-        keyboardStateContextValue.keyboardActiveHeight,
-        modalHeight,
-        type,
-        windowHeight,
-        modalOverlapsWithTopSafeArea,
-    ]);
+    }, [StyleUtils, insets, keyboardStateContextValue.isKeyboardActive, keyboardStateContextValue.isKeyboardAnimatingRef, keyboardStateContextValue.keyboardActiveHeight, modalHeight, type, windowHeight, modalOverlapsWithTopSafeArea, canUseTouchScreen, isSmallScreenWidth]);
 
     const onViewLayout = (e: LayoutChangeEvent) => {
         setModalHeight(e.nativeEvent.layout.height);
@@ -264,7 +255,7 @@ function BaseModal(
                 shouldUseModalPaddingStyle,
                 {
                     modalOverlapsWithTopSafeArea,
-                    shouldDisableBottomSafeAreaPadding,
+                    shouldDisableBottomSafeAreaPadding: !!shouldDisableBottomSafeAreaPadding,
                 },
                 shouldUseReanimatedModal,
             ),

src/styles/utils/index.ts

@@ -1834,13 +1834,14 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         }, {} as Nullable<K>) as K,
     getScrollableFeatureTrainingModalStyles: (
         insets: EdgeInsets,
+        isKeyboardOpen = false,
     ): {
         style?: ViewStyle;
         containerStyle?: ViewStyle;
     } => {
         const {paddingBottom: safeAreaPaddingBottom} = getPlatformSafeAreaPadding(insets);
-
-        const paddingBottom = getCombinedSpacing(styles.pb5.paddingBottom, safeAreaPaddingBottom, true);
+        // When keyboard is open and we want to disregard safeAreaPaddingBottom.
+        const paddingBottom = getCombinedSpacing(styles.pb5.paddingBottom, safeAreaPaddingBottom, !isKeyboardOpen);
         // Forces scroll on modal when keyboard is open and the modal larger than remaining screen height.
         return {
             style: isMobileChrome()