Merge pull request Expensify#63817 from nkdengineer/fix/63463

fix: not auto scroll when an error message appear

Author: Gonals

src/components/BookTravelButton.tsx

@@ -1,7 +1,7 @@
 import HybridAppModule from '@expensify/react-native-hybrid-app';
 import {Str} from 'expensify-common';
 import type {ReactElement} from 'react';
-import React, {useCallback, useContext, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
@@ -33,6 +33,9 @@ type BookTravelButtonProps = {
 
     /** Whether to render the error message below the button */
     shouldRenderErrorMessageBelowButton?: boolean;
+
+    /** Function to set the shouldScrollToBottom state */
+    setShouldScrollToBottom?: (shouldScrollToBottom: boolean) => void;
 };
 
 const navigateToAcceptTerms = (domain: string, isUserValidated?: boolean) => {
@@ -45,7 +48,7 @@ const navigateToAcceptTerms = (domain: string, isUserValidated?: boolean) => {
     Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_VERIFY_ACCOUNT.getRoute(Navigation.getActiveRoute(), ROUTES.TRAVEL_TCS.getRoute(domain)));
 };
 
-function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false}: BookTravelButtonProps) {
+function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false, setShouldScrollToBottom}: BookTravelButtonProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
@@ -74,6 +77,13 @@ function BookTravelButton({text, shouldRenderErrorMessageBelowButton = false}: B
     const hidePreventionModal = () => setPreventionModalVisibility(false);
     const hideVerificationModal = () => setVerificationModalVisibility(false);
 
+    useEffect(() => {
+        if (!errorMessage) {
+            return;
+        }
+        setShouldScrollToBottom?.(true);
+    }, [errorMessage, setShouldScrollToBottom]);
+
     const bookATrip = useCallback(() => {
         setErrorMessage('');
 

src/pages/Travel/ManageTrips.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
-import {Linking, View} from 'react-native';
+import React, {useEffect, useRef, useState} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import type {ScrollView as RNScrollView} from 'react-native';
+import {InteractionManager, Linking, View} from 'react-native';
 import BookTravelButton from '@components/BookTravelButton';
 import Button from '@components/Button';
 import type {FeatureListItem} from '@components/FeatureList';
@@ -28,13 +30,33 @@ function ManageTrips() {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
+    const [shouldScrollToBottom, setShouldScrollToBottom] = useState(false);
 
     const navigateToBookTravelDemo = () => {
         Linking.openURL(CONST.BOOK_TRAVEL_DEMO_URL);
     };
 
+    const scrollViewRef = useRef<RNScrollView>(null);
+
+    const scrollToBottom = () => {
+        InteractionManager.runAfterInteractions(() => {
+            scrollViewRef.current?.scrollToEnd({animated: true});
+        });
+    };
+
+    useEffect(() => {
+        if (!shouldScrollToBottom) {
+            return;
+        }
+        scrollToBottom();
+        setShouldScrollToBottom(false);
+    }, [shouldScrollToBottom]);
+
     return (
-        <ScrollView contentContainerStyle={styles.pt3}>
+        <ScrollView
+            contentContainerStyle={styles.pt3}
+            ref={scrollViewRef}
+        >
             <View style={[styles.flex1, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                 <FeatureList
                     menuItems={tripsFeatures}
@@ -57,6 +79,7 @@ function ManageTrips() {
                             <BookTravelButton
                                 text={translate('travel.bookTravel')}
                                 shouldRenderErrorMessageBelowButton
+                                setShouldScrollToBottom={setShouldScrollToBottom}
                             />
                         </>
                     }