From e0c4aa1c5fccdee24e7050110cdf9cfcc71cfef6 Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Fri, 7 Mar 2025 13:06:35 +0100 Subject: [PATCH 1/9] Introduce setTimeout to mitigate the issue with iPhone delaying events comming from onyx store --- src/Expensify.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Expensify.tsx b/src/Expensify.tsx index 85e8f6c6af88..e6ff989c3c5b 100644 --- a/src/Expensify.tsx +++ b/src/Expensify.tsx @@ -126,7 +126,10 @@ function Expensify() { return; } - ActiveClientManager.init(); + // Set a timeout to initialize the client after a short delay. + // This is necessary because on iPhone web, Onyx events can be delayed, + // causing issues with client initialization if done immediately. + setTimeout(ActiveClientManager.init, 400); }; const setNavigationReady = useCallback(() => { From 80048879367147c13c817f2c8bc38bf73af34007 Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Mon, 14 Apr 2025 14:16:53 +0200 Subject: [PATCH 2/9] check if application is running of Apple device --- src/Expensify.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Expensify.tsx b/src/Expensify.tsx index 94bc20c414a3..e468df055206 100644 --- a/src/Expensify.tsx +++ b/src/Expensify.tsx @@ -122,9 +122,11 @@ function Expensify() { } // Set a timeout to initialize the client after a short delay. - // This is necessary because on iPhone web, Onyx events can be delayed, + // This is necessary because on Apple devices (web), Onyx events can be delayed, // causing issues with client initialization if done immediately. - setTimeout(ActiveClientManager.init, 400); + const isAppleDevice = /Macintosh|iPhone|iPad|iPod/.test(navigator.userAgent); + const isWeb = Platform.OS === 'web'; + setTimeout(ActiveClientManager.init, isAppleDevice && isWeb ? 400 : 0); }; const setNavigationReady = useCallback(() => { From 653f53efe894ce4ddfeb167db49fe66b9db52d52 Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Mon, 14 Apr 2025 14:18:16 +0200 Subject: [PATCH 3/9] check for iPhone and iPad only --- src/Expensify.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Expensify.tsx b/src/Expensify.tsx index e468df055206..aedf884a0757 100644 --- a/src/Expensify.tsx +++ b/src/Expensify.tsx @@ -124,7 +124,7 @@ function Expensify() { // Set a timeout to initialize the client after a short delay. // This is necessary because on Apple devices (web), Onyx events can be delayed, // causing issues with client initialization if done immediately. - const isAppleDevice = /Macintosh|iPhone|iPad|iPod/.test(navigator.userAgent); + const isAppleDevice = /iPhone|iPad/.test(navigator.userAgent); const isWeb = Platform.OS === 'web'; setTimeout(ActiveClientManager.init, isAppleDevice && isWeb ? 400 : 0); }; From 418f4ebb474dc344c5b50a5eed5677d4e45baa4e Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Thu, 17 Apr 2025 16:39:39 +0200 Subject: [PATCH 4/9] Write more clear description of why our change --- src/Expensify.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Expensify.tsx b/src/Expensify.tsx index aedf884a0757..90c2e6541ee4 100644 --- a/src/Expensify.tsx +++ b/src/Expensify.tsx @@ -121,9 +121,9 @@ function Expensify() { return; } - // Set a timeout to initialize the client after a short delay. - // This is necessary because on Apple devices (web), Onyx events can be delayed, - // causing issues with client initialization if done immediately. + // Delay client init to avoid issues with delayed Onyx events on iOS. All iOS browsers use WebKit, which suspends events in background tabs. + // Events are flushed only when the tab becomes active again causing issues with client initialization. + // See: https://stackoverflow.com/questions/54095584/page-becomes-inactive-when-switching-tabs-on-ios const isAppleDevice = /iPhone|iPad/.test(navigator.userAgent); const isWeb = Platform.OS === 'web'; setTimeout(ActiveClientManager.init, isAppleDevice && isWeb ? 400 : 0); From 65bcdde0a7c8cb33a4aaeb3d8785555e62427eb7 Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Thu, 17 Apr 2025 16:39:55 +0200 Subject: [PATCH 5/9] reuse isSafari function --- src/Expensify.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Expensify.tsx b/src/Expensify.tsx index 90c2e6541ee4..e28f89e66f54 100644 --- a/src/Expensify.tsx +++ b/src/Expensify.tsx @@ -44,6 +44,7 @@ import * as ReportActionContextMenu from './pages/home/report/ContextMenu/Report import type {Route} from './ROUTES'; import SplashScreenStateContext from './SplashScreenStateContext'; import type {ScreenShareRequest} from './types/onyx'; +import { isSafari } from '@libs/Browser'; Onyx.registerLogger(({level, message}) => { if (level === 'alert') { @@ -124,9 +125,7 @@ function Expensify() { // Delay client init to avoid issues with delayed Onyx events on iOS. All iOS browsers use WebKit, which suspends events in background tabs. // Events are flushed only when the tab becomes active again causing issues with client initialization. // See: https://stackoverflow.com/questions/54095584/page-becomes-inactive-when-switching-tabs-on-ios - const isAppleDevice = /iPhone|iPad/.test(navigator.userAgent); - const isWeb = Platform.OS === 'web'; - setTimeout(ActiveClientManager.init, isAppleDevice && isWeb ? 400 : 0); + setTimeout(ActiveClientManager.init, isSafari() ? 400 : 0); }; const setNavigationReady = useCallback(() => { From 6fcbc1297a548f3f2b60bbefb5ea01fe20411294 Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Thu, 17 Apr 2025 16:44:07 +0200 Subject: [PATCH 6/9] fix prettier errors --- src/Expensify.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Expensify.tsx b/src/Expensify.tsx index e28f89e66f54..b5aa6b6c5d85 100644 --- a/src/Expensify.tsx +++ b/src/Expensify.tsx @@ -4,6 +4,7 @@ import type {NativeEventSubscription} from 'react-native'; import {AppState, Linking, Platform} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import Onyx, {useOnyx} from 'react-native-onyx'; +import {isSafari} from '@libs/Browser'; import ConfirmModal from './components/ConfirmModal'; import DeeplinkWrapper from './components/DeeplinkWrapper'; import EmojiPicker from './components/EmojiPicker/EmojiPicker'; @@ -44,7 +45,6 @@ import * as ReportActionContextMenu from './pages/home/report/ContextMenu/Report import type {Route} from './ROUTES'; import SplashScreenStateContext from './SplashScreenStateContext'; import type {ScreenShareRequest} from './types/onyx'; -import { isSafari } from '@libs/Browser'; Onyx.registerLogger(({level, message}) => { if (level === 'alert') { From 6c32c074b9e66478e5246cabff7e72c9dbc5d5d8 Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Thu, 17 Apr 2025 16:50:09 +0200 Subject: [PATCH 7/9] Fix lint errors --- src/Expensify.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Expensify.tsx b/src/Expensify.tsx index 18613534a326..f0569afcbeea 100644 --- a/src/Expensify.tsx +++ b/src/Expensify.tsx @@ -4,7 +4,7 @@ import type {NativeEventSubscription} from 'react-native'; import {AppState, Linking, Platform} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import Onyx, {useOnyx} from 'react-native-onyx'; -import {isSafari} from '@libs/Browser'; +import {isSafari} from './libs/Browser'; import alert from './components/Alert'; import ConfirmModal from './components/ConfirmModal'; import DeeplinkWrapper from './components/DeeplinkWrapper'; From d7f58fa50d3feda8f3dfa7eda93eddd52a870827 Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Thu, 17 Apr 2025 16:53:22 +0200 Subject: [PATCH 8/9] cleaner code changes --- src/Expensify.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Expensify.tsx b/src/Expensify.tsx index f0569afcbeea..dba5708062ea 100644 --- a/src/Expensify.tsx +++ b/src/Expensify.tsx @@ -134,7 +134,12 @@ function Expensify() { // Delay client init to avoid issues with delayed Onyx events on iOS. All iOS browsers use WebKit, which suspends events in background tabs. // Events are flushed only when the tab becomes active again causing issues with client initialization. // See: https://stackoverflow.com/questions/54095584/page-becomes-inactive-when-switching-tabs-on-ios - setTimeout(ActiveClientManager.init, isSafari() ? 400 : 0); + if (isSafari()) { + setTimeout(ActiveClientManager.init, 400); + } else { + ActiveClientManager.init(); + } + }; const setNavigationReady = useCallback(() => { From b41d856dac0e04235b53ee2b381a6ee617f3bb72 Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Thu, 17 Apr 2025 16:55:52 +0200 Subject: [PATCH 9/9] prettier fix --- src/Expensify.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Expensify.tsx b/src/Expensify.tsx index dba5708062ea..a6be498593bf 100644 --- a/src/Expensify.tsx +++ b/src/Expensify.tsx @@ -4,7 +4,6 @@ import type {NativeEventSubscription} from 'react-native'; import {AppState, Linking, Platform} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import Onyx, {useOnyx} from 'react-native-onyx'; -import {isSafari} from './libs/Browser'; import alert from './components/Alert'; import ConfirmModal from './components/ConfirmModal'; import DeeplinkWrapper from './components/DeeplinkWrapper'; @@ -26,6 +25,7 @@ import * as EmojiPickerAction from './libs/actions/EmojiPickerAction'; import * as Report from './libs/actions/Report'; import * as User from './libs/actions/User'; import * as ActiveClientManager from './libs/ActiveClientManager'; +import {isSafari} from './libs/Browser'; import * as Environment from './libs/Environment/Environment'; import FS from './libs/Fullstory'; import * as Growl from './libs/Growl'; @@ -139,7 +139,6 @@ function Expensify() { } else { ActiveClientManager.init(); } - }; const setNavigationReady = useCallback(() => {