From 57b414c3627797a6694ea88626a6c52adba3aed6 Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Tue, 10 Jun 2025 12:04:47 +0700
Subject: [PATCH 1/2] fix: not auto scroll when an error message appear

---
 src/pages/Travel/ManageTrips.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/pages/Travel/ManageTrips.tsx b/src/pages/Travel/ManageTrips.tsx
index 7a77863e2076..3dbce13f99b9 100644
--- a/src/pages/Travel/ManageTrips.tsx
+++ b/src/pages/Travel/ManageTrips.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
-import {Linking, View} from 'react-native';
+import React, {useEffect, useRef} 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';
@@ -33,8 +35,23 @@ function ManageTrips() {
         Linking.openURL(CONST.BOOK_TRAVEL_DEMO_URL);
     };
 
+    const scrollViewRef = useRef<RNScrollView>(null);
+
+    const scrollToBottom = () => {
+        InteractionManager.runAfterInteractions(() => {
+            scrollViewRef.current?.scrollToEnd({animated: true});
+        });
+    };
+
+    useEffect(() => {
+        scrollToBottom();
+    }, []);
+
     return (
-        <ScrollView contentContainerStyle={styles.pt3}>
+        <ScrollView
+            contentContainerStyle={styles.pt3}
+            ref={scrollViewRef}
+        >
             <View style={[styles.flex1, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                 <FeatureList
                     menuItems={tripsFeatures}

From ec8478b247f0cbe07264eb2088ee10d3f19e83bc Mon Sep 17 00:00:00 2001
From: nkdengineer <nkdengineer@outlook.com>
Date: Wed, 11 Jun 2025 17:14:33 +0700
Subject: [PATCH 2/2] fix: add useEffect to scorll to bottom when having error

---
 src/components/BookTravelButton.tsx | 14 ++++++++++++--
 src/pages/Travel/ManageTrips.tsx    | 10 ++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/BookTravelButton.tsx b/src/components/BookTravelButton.tsx
index 4b3c9ceda60c..15927fda953e 100644
--- a/src/components/BookTravelButton.tsx
+++ b/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('');
 
diff --git a/src/pages/Travel/ManageTrips.tsx b/src/pages/Travel/ManageTrips.tsx
index 3dbce13f99b9..024d5ae37f72 100644
--- a/src/pages/Travel/ManageTrips.tsx
+++ b/src/pages/Travel/ManageTrips.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react';
+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';
@@ -30,6 +30,7 @@ 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);
@@ -44,8 +45,12 @@ function ManageTrips() {
     };
 
     useEffect(() => {
+        if (!shouldScrollToBottom) {
+            return;
+        }
         scrollToBottom();
-    }, []);
+        setShouldScrollToBottom(false);
+    }, [shouldScrollToBottom]);
 
     return (
         <ScrollView
@@ -74,6 +79,7 @@ function ManageTrips() {
                             <BookTravelButton
                                 text={translate('travel.bookTravel')}
                                 shouldRenderErrorMessageBelowButton
+                                setShouldScrollToBottom={setShouldScrollToBottom}
                             />
                         </>
                     }