From 4e1fe967ce4d71f43f6c88899da2bfb7b9fc8c63 Mon Sep 17 00:00:00 2001 From: "Situ Chandra Shil (via MelvinBot)" Date: Tue, 17 Mar 2026 09:00:30 +0000 Subject: [PATCH 1/3] Replace FullscreenLoadingIndicator with ActivityIndicator in PhoneNumberPage PhoneNumberPage renders HeaderWithBackButton and FullscreenLoadingIndicator as siblings. When shouldUseGoBackButton becomes the default, users would see two back controls. Replace with View + ActivityIndicator to avoid the conflict while preserving the same visual appearance. Co-authored-by: Situ Chandra Shil --- .../Profile/PersonalDetails/PhoneNumberPage.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx b/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx index 1f79485025350..9bb0d1e0691b7 100644 --- a/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx @@ -1,9 +1,10 @@ import React, {useCallback} from 'react'; +import {View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; -import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -11,6 +12,8 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {getEarliestErrorField} from '@libs/ErrorUtils'; import {appendCountryCode, formatE164PhoneNumber} from '@libs/LoginUtils'; @@ -28,6 +31,8 @@ function PhoneNumberPage() { const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP); const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE); const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); + const theme = useTheme(); const {translate} = useLocalize(); const {inputCallbackRef} = useAutoFocusInput(); const phoneNumber = privatePersonalDetails?.phoneNumber ?? ''; @@ -87,10 +92,12 @@ function PhoneNumberPage() { onBackButtonPress={() => Navigation.goBack()} /> {isLoadingApp ? ( - + + + ) : ( Date: Tue, 17 Mar 2026 09:04:46 +0000 Subject: [PATCH 2/3] Fix: run Prettier on PhoneNumberPage Co-authored-by: Situ Chandra Shil --- .../settings/Profile/PersonalDetails/PhoneNumberPage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx b/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx index 9bb0d1e0691b7..a7dcca5ec9d2b 100644 --- a/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx @@ -92,7 +92,9 @@ function PhoneNumberPage() { onBackButtonPress={() => Navigation.goBack()} /> {isLoadingApp ? ( - + Date: Tue, 17 Mar 2026 10:02:27 +0000 Subject: [PATCH 3/3] Use fullScreenLoading style instead of inline styles Co-authored-by: Situ Chandra Shil --- .../settings/Profile/PersonalDetails/PhoneNumberPage.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx b/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx index a7dcca5ec9d2b..46b6f49a74151 100644 --- a/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx +++ b/src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx @@ -12,8 +12,6 @@ import TextInput from '@components/TextInput'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import useStyleUtils from '@hooks/useStyleUtils'; -import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {getEarliestErrorField} from '@libs/ErrorUtils'; import {appendCountryCode, formatE164PhoneNumber} from '@libs/LoginUtils'; @@ -31,8 +29,6 @@ function PhoneNumberPage() { const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP); const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE); const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); - const theme = useTheme(); const {translate} = useLocalize(); const {inputCallbackRef} = useAutoFocusInput(); const phoneNumber = privatePersonalDetails?.phoneNumber ?? ''; @@ -92,9 +88,7 @@ function PhoneNumberPage() { onBackButtonPress={() => Navigation.goBack()} /> {isLoadingApp ? ( - +