Merge pull request Expensify#66160 from software-mansion-labs/update-mobile-test-drive-for-better-scroll

Gonals · web-flow · commit 10af833269fd · 2025-07-24T11:09:39.000+02:00
Improve native top spacing for bottom docked modals when keyboard shows v2
diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
@@ -1,13 +1,16 @@
 import type {VideoReadyForDisplayEvent} from 'expo-av';
 import type {ImageContentFit} from 'expo-image';
-import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {Image, InteractionManager, View} from 'react-native';
-import type {ImageResizeMode, ImageSourcePropType, StyleProp, TextStyle, ViewStyle} from 'react-native';
+// eslint-disable-next-line no-restricted-imports
+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';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {parseFSAttributes} from '@libs/Fullstory';
@@ -209,6 +212,11 @@ function FeatureTrainingModal({
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {isOffline} = useNetwork();
     const hasHelpButtonBeenPressed = useRef(false);
+    const scrollViewRef = useRef<RNScrollView>(null);
+    const [containerHeight, setContainerHeight] = useState(0);
+    const [contentHeight, setContentHeight] = useState(0);
+    const insets = useSafeAreaInsets();
+    const {isKeyboardActive} = useKeyboardState();
 
     useEffect(() => {
         InteractionManager.runAfterInteractions(() => {
@@ -355,8 +363,21 @@ function FeatureTrainingModal({
      */
     useLayoutEffect(parseFSAttributes, []);
 
+    // Scrolls modal to the bottom when keyboard appears so the action buttons are visible.
+    useEffect(() => {
+        if (contentHeight <= containerHeight || onboardingIsMediumOrLargerScreenWidth || !shouldUseScrollView) {
+            return;
+        }
+        scrollViewRef.current?.scrollToEnd({animated: false});
+    }, [contentHeight, containerHeight, onboardingIsMediumOrLargerScreenWidth, shouldUseScrollView]);
+
     const Wrapper = shouldUseScrollView ? ScrollView : View;
 
+    const wrapperStyles = useMemo(
+        () => (shouldUseScrollView ? StyleUtils.getScrollableFeatureTrainingModalStyles(insets, isKeyboardActive) : {}),
+        [shouldUseScrollView, StyleUtils, insets, isKeyboardActive],
+    );
+
     return (
         <Modal
             avoidKeyboard={avoidKeyboard}
@@ -384,11 +405,16 @@ function FeatureTrainingModal({
                 onHelp();
             }}
             shouldUseReanimatedModal
+            shouldDisableBottomSafeAreaPadding={shouldUseScrollView}
         >
             <Wrapper
-                style={[styles.mh100, onboardingIsMediumOrLargerScreenWidth && StyleUtils.getWidthStyle(width)]}
-                contentContainerStyle={shouldUseScrollView ? styles.pb5 : undefined}
+                scrollsToTop={false}
+                style={[styles.mh100, onboardingIsMediumOrLargerScreenWidth && StyleUtils.getWidthStyle(width), wrapperStyles.style]}
+                contentContainerStyle={wrapperStyles.containerStyle}
                 keyboardShouldPersistTaps={shouldUseScrollView ? 'handled' : undefined}
+                ref={shouldUseScrollView ? scrollViewRef : undefined}
+                onLayout={shouldUseScrollView ? (e: LayoutChangeEvent) => setContainerHeight(e.nativeEvent.layout.height) : undefined}
+                onContentSizeChange={shouldUseScrollView ? (_w: number, h: number) => setContentHeight(h) : undefined}
                 fsClass={CONST.FULL_STORY.UNMASK}
                 testID={CONST.FULL_STORY.UNMASK}
             >
@@ -397,9 +423,20 @@ function FeatureTrainingModal({
                 </View>
                 <View style={[styles.mt5, styles.mh5, contentOuterContainerStyles]}>
                     {!!title && !!description && (
-                        <View style={[onboardingIsMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10], contentInnerContainerStyles]}>
+                        <View
+                            style={[
+                                onboardingIsMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [shouldRenderHTMLDescription ? styles.mb5 : styles.mb10],
+                                contentInnerContainerStyles,
+                            ]}
+                        >
                             {typeof title === 'string' ? <Text style={[styles.textHeadlineH1, titleStyles]}>{title}</Text> : title}
-                            {shouldRenderHTMLDescription ? <RenderHTML html={description} /> : <Text style={styles.textSupporting}>{description}</Text>}
+                            {shouldRenderHTMLDescription ? (
+                                <View style={styles.mb2}>
+                                    <RenderHTML html={description} />
+                                </View>
+                            ) : (
+                                <Text style={styles.textSupporting}>{description}</Text>
+                            )}
                             {secondaryDescription.length > 0 && <Text style={[styles.textSupporting, styles.mt4]}>{secondaryDescription}</Text>}
                             {children}
                         </View>
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
@@ -1,4 +1,5 @@
-import React, {forwardRef, useCallback, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import type {LayoutChangeEvent} from 'react-native';
 // Animated required for side panel navigation
 // eslint-disable-next-line no-restricted-imports
 import {Animated, View} from 'react-native';
@@ -19,6 +20,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
+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';
@@ -97,6 +99,7 @@ function BaseModal(
         hasBackdrop,
         backdropOpacity,
         shouldUseReanimatedModal = false,
+        shouldDisableBottomSafeAreaPadding = false,
     }: BaseModalProps,
     ref: React.ForwardedRef<View>,
 ) {
@@ -107,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();
@@ -115,6 +119,9 @@ function BaseModal(
         shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {transform: [{translateX: Animated.multiply(sidePanelOffset.current, -1)}]} : undefined;
     const keyboardStateContextValue = useKeyboardState();
 
+    const [modalOverlapsWithTopSafeArea, setModalOverlapsWithTopSafeArea] = useState(false);
+    const [modalHeight, setModalHeight] = useState(0);
+
     const insets = useSafeAreaInsets();
 
     const shouldCallHideModalOnUnmount = useRef(false);
@@ -208,6 +215,32 @@ function BaseModal(
         ComposerFocusManager.setReadyToFocus(uniqueModalId);
     };
 
+    // Checks if modal overlaps with topSafeArea. Used to offset tall bottom docked modals with keyboard.
+    useEffect(() => {
+        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,
+        canUseTouchScreen,
+        isSmallScreenWidth,
+    ]);
+
+    const onViewLayout = (e: LayoutChangeEvent) => {
+        setModalHeight(e.nativeEvent.layout.height);
+    };
+
     const {
         modalStyle,
         modalContainerStyle,
@@ -232,6 +265,10 @@ function BaseModal(
                 innerContainerStyle,
                 outerStyle,
                 shouldUseModalPaddingStyle,
+                {
+                    modalOverlapsWithTopSafeArea,
+                    shouldDisableBottomSafeAreaPadding: !!shouldDisableBottomSafeAreaPadding,
+                },
                 shouldUseReanimatedModal,
             ),
         [
@@ -245,6 +282,8 @@ function BaseModal(
             innerContainerStyle,
             outerStyle,
             shouldUseModalPaddingStyle,
+            modalOverlapsWithTopSafeArea,
+            shouldDisableBottomSafeAreaPadding,
             shouldUseReanimatedModal,
         ],
     );
@@ -369,6 +408,7 @@ function BaseModal(
                                 shouldPreventScroll={shouldPreventScrollOnFocus}
                             >
                                 <Animated.View
+                                    onLayout={onViewLayout}
                                     style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone, sidePanelReanimatedStyle]}
                                     ref={ref}
                                 >
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
@@ -124,6 +124,11 @@ type BaseModalProps = Partial<ReactNativeModalProps> &
          */
         shouldApplySidePanelOffset?: boolean;
 
+        /**
+         * Disables the bottom safe area padding in the modal. Used in for scrollable FeatureTrainingModal.
+         */
+        shouldDisableBottomSafeAreaPadding?: boolean;
+
         /**
          * Whether the modal should use ReanimatedModal implementation.
          */
diff --git a/src/components/withKeyboardState.tsx b/src/components/withKeyboardState.tsx
@@ -1,4 +1,4 @@
-import type {MutableRefObject, ReactElement} from 'react';
+import type {ReactElement, RefObject} from 'react';
 import React, {createContext, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {KeyboardEvents, useKeyboardHandler} from 'react-native-keyboard-controller';
 import {runOnJS} from 'react-native-reanimated';
@@ -16,20 +16,25 @@ type KeyboardStateContextValue = {
     /** Height of the keyboard in pixels */
     keyboardHeight: number;
 
+    /** Future or present height of the keyboard in pixels. Available together with isKeyboardActive. */
+    keyboardActiveHeight: number;
+
     /** Ref to check if the keyboard is animating */
-    isKeyboardAnimatingRef: MutableRefObject<boolean>;
+    isKeyboardAnimatingRef: RefObject<boolean>;
 };
 
 const KeyboardStateContext = createContext<KeyboardStateContextValue>({
     isKeyboardShown: false,
     isKeyboardActive: false,
     keyboardHeight: 0,
+    keyboardActiveHeight: 0,
     isKeyboardAnimatingRef: {current: false},
 });
 
 function KeyboardStateProvider({children}: ChildrenProps): ReactElement | null {
     const {bottom} = useSafeAreaInsets();
     const [keyboardHeight, setKeyboardHeight] = useState(0);
+    const [keyboardActiveHeight, setKeyboardActiveHeight] = useState(0);
     const isKeyboardAnimatingRef = useRef(false);
     const [isKeyboardActive, setIsKeyboardActive] = useState(false);
 
@@ -42,11 +47,13 @@ function KeyboardStateProvider({children}: ChildrenProps): ReactElement | null {
             setKeyboardHeight(0);
             setIsKeyboardActive(false);
         });
-        const keyboardWillShowListener = KeyboardEvents.addListener('keyboardWillShow', () => {
+        const keyboardWillShowListener = KeyboardEvents.addListener('keyboardWillShow', (e) => {
             setIsKeyboardActive(true);
+            setKeyboardActiveHeight(e.height);
         });
         const keyboardWillHideListener = KeyboardEvents.addListener('keyboardWillHide', () => {
             setIsKeyboardActive(false);
+            setKeyboardActiveHeight(0);
         });
 
         return () => {
@@ -80,11 +87,12 @@ function KeyboardStateProvider({children}: ChildrenProps): ReactElement | null {
     const contextValue = useMemo(
         () => ({
             keyboardHeight,
+            keyboardActiveHeight,
             isKeyboardShown: keyboardHeight !== 0,
             isKeyboardAnimatingRef,
             isKeyboardActive,
         }),
-        [isKeyboardActive, keyboardHeight],
+        [isKeyboardActive, keyboardActiveHeight, keyboardHeight],
     );
     return <KeyboardStateContext.Provider value={contextValue}>{children}</KeyboardStateContext.Provider>;
 }
diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts
@@ -1,5 +1,6 @@
 import type {ViewStyle} from 'react-native';
 import type {ModalProps} from 'react-native-modal';
+import {isMobileSafari} from '@libs/Browser';
 import type {ThemeStyles} from '@styles/index';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -43,6 +44,10 @@ type GetModalStylesStyleUtil = {
         innerContainerStyle?: ViewStyle,
         outerStyle?: ViewStyle,
         shouldUseModalPaddingStyle?: boolean,
+        safeAreaOptions?: {
+            shouldDisableBottomSafeAreaPadding?: boolean;
+            modalOverlapsWithTopSafeArea?: boolean;
+        },
         shouldUseReanimatedModal?: boolean,
     ) => GetModalStyles;
 };
@@ -55,6 +60,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
         innerContainerStyle = {},
         outerStyle = {},
         shouldUseModalPaddingStyle = true,
+        safeAreaOptions = {modalOverlapsWithTopSafeArea: false, shouldDisableBottomSafeAreaPadding: false},
         shouldUseReanimatedModal = false,
     ): GetModalStyles => {
         const {windowWidth, isSmallScreenWidth} = windowDimensions;
@@ -228,14 +234,19 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     justifyContent: 'center',
                     overflow: 'hidden',
                     boxShadow: theme.shadow,
+                    // Workaround for Safari not supporting interactive-widget=resizes-content, sets max height of a container modal.
+                    // This allows better scrolling experience after keyboard shows for modals with input, that are larger than remaining screen height.
+                    // More info https://github.com/Expensify/App/pull/62799#issuecomment-2943136220.
+                    ...(isMobileSafari() ? {maxHeight: `${windowDimensions.windowHeight}px`} : {}),
                 };
 
                 if (shouldUseModalPaddingStyle) {
                     modalContainerStyle.paddingTop = variables.componentBorderRadiusLarge;
                     modalContainerStyle.paddingBottom = variables.componentBorderRadiusLarge;
                 }
 
-                shouldAddBottomSafeAreaPadding = true;
+                shouldAddBottomSafeAreaPadding = !safeAreaOptions?.shouldDisableBottomSafeAreaPadding;
+                shouldAddTopSafeAreaMargin = !!safeAreaOptions?.modalOverlapsWithTopSafeArea;
                 swipeDirection = undefined;
                 animationIn = 'slideInUp';
                 animationOut = 'slideOutDown';
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
@@ -4,7 +4,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import type {EdgeInsets} from 'react-native-safe-area-context';
 import type {ValueOf} from 'type-fest';
 import type ImageSVGProps from '@components/ImageSVG/types';
-import {isMobile} from '@libs/Browser';
+import {isMobile, isMobileChrome} from '@libs/Browser';
 import getPlatform from '@libs/getPlatform';
 import {hashText} from '@libs/UserUtils';
 // eslint-disable-next-line no-restricted-imports
@@ -1832,6 +1832,26 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
             styleObj[key] = null;
             return styleObj;
         }, {} as Nullable<K>) as K,
+    getScrollableFeatureTrainingModalStyles: (
+        insets: EdgeInsets,
+        isKeyboardOpen = false,
+    ): {
+        style?: ViewStyle;
+        containerStyle?: ViewStyle;
+    } => {
+        const {paddingBottom: safeAreaPaddingBottom} = getPlatformSafeAreaPadding(insets);
+        // 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()
+                ? {
+                      maxHeight: '100dvh',
+                  }
+                : {},
+            containerStyle: {paddingBottom},
+        };
+    },
 });
 
 type StyleUtilsType = ReturnType<typeof createStyleUtils>;
