[Due for payment 2025-11-10] [$250] Expense - "You appear to be offline" message displayed twice in destination list

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.33-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #72187
Email or phone of affected tester (no customers): kiatest.78+ck101625@gmail.com
Issue reported by: Applause Internal Team
Device used: iPhone 16/iOS 18.3.1/Safari, Pixel 15/Android 15/Chrome
App Component: Money Requests

Action Performed:

Precondition:
Workspace has imported per diem rates

1. Navigate to staging.new.expensify.com or launch hybrid app
2. Go Offline
3. Tap + > Create expense > Per diem
4. Tap on the search field
5. Select destination
6. Go through the flow and proceed to confirm page
7. On confirm page, tap Destination field
8. Observe ""You appear to be offline" message displayed twice

Expected Result:

"You appear to be offline" message should be displayed once in destination list

Actual Result:

"You appear to be offline" message displayed twice in destination list

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021981095303733896889
• Upwork Job ID: 1981095303733896889
• Last Price Increase: 2025-10-22
• Automatic offers:
• nyomanjyotisa | Contributor | 109259700

Issue Owner

Current Issue Owner: @jayeshmangwani

[melvin-bot]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nyomanjyotisa]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Expense - "You appear to be offline" message displayed twice in destination list

What is the root cause of that problem?

IOURequestStepDestination component has two nested ScreenWrapper components:

• An outer ScreenWrapper that wraps the entire component
• An inner ScreenWrapper inside StepScreenWrapper

Both ScreenWrapper components have shouldShowOfflineIndicator defaulting to true, causing duplicate offline messages. When openedFromStartPage is false (which happens when editing from confirmation), the StepScreenWrapper renders its own ScreenWrapper with offline indicator, and the outer ScreenWrapper also shows its offline indicator

App/src/pages/iou/request/step/IOURequestStepDestination.tsx

Lines 147 to 202 in 78b3db9

	<ScreenWrapper
	includePaddingTop={false}
	keyboardVerticalOffset={keyboardVerticalOffset}
	testID={`${IOURequestStepDestination.displayName}-container`}
	>
	<StepScreenWrapper
	headerTitle={backTo ? translate('common.destination') : tabTitles[iouType]}
	onBackButtonPress={navigateBack}
	shouldShowWrapper={!openedFromStartPage}
	shouldShowNotFoundPage={shouldShowNotFoundPage}
	testID={IOURequestStepDestination.displayName}
	>
	{isLoading && (
	<ActivityIndicator
	size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
	style={[styles.flex1]}
	/>
	)}
	{shouldShowOfflineView && <FullPageOfflineBlockingView>{null}</FullPageOfflineBlockingView>}
	{shouldShowEmptyState && (
	<View style={[styles.flex1]}>
	<WorkspaceEmptyStateSection
	shouldStyleAsCard={false}
	icon={Illustrations.EmptyStateExpenses}
	title={translate('workspace.perDiem.emptyList.title')}
	subtitle={translate('workspace.perDiem.emptyList.subtitle')}
	containerStyle={[styles.flex1, styles.justifyContentCenter]}
	/>
	{isPolicyAdmin(policy) && !!policy?.areCategoriesEnabled && (
	<FixedFooter style={[styles.mtAuto, styles.pt5]}>
	<Button
	large
	success
	style={[styles.w100]}
	onPress={() => {
	// eslint-disable-next-line @typescript-eslint/no-deprecated
	InteractionManager.runAfterInteractions(() => {
	Navigation.navigate(ROUTES.WORKSPACE_PER_DIEM.getRoute(policy.id, Navigation.getActiveRoute()));
	});
	}}
	text={translate('workspace.perDiem.editPerDiemRates')}
	pressOnEnter
	/>
	</FixedFooter>
	)}
	</View>
	)}
	{!shouldShowEmptyState && !isLoading && !shouldShowOfflineView && !!policy?.id && (
	<DestinationPicker
	selectedDestination={selectedDestination}
	policyID={policy.id}
	onSubmit={updateDestination}
	/>
	)}
	</StepScreenWrapper>
	</ScreenWrapper>

What changes do you think we should make in order to solve the problem?

Disable the offline indicator on the outer ScreenWrapper since the inner StepScreenWrapper already handles showing the offline indicator when needed

        <ScreenWrapper
            includePaddingTop={false}
            keyboardVerticalOffset={keyboardVerticalOffset}
            testID={`${IOURequestStepDestination.displayName}-container`}
            shouldShowOfflineIndicator={false}
        >

App/src/pages/iou/request/step/IOURequestStepDestination.tsx

Lines 147 to 151 in 78b3db9

	<ScreenWrapper
	includePaddingTop={false}
	keyboardVerticalOffset={keyboardVerticalOffset}
	testID={`${IOURequestStepDestination.displayName}-container`}
	>

Or we can disable the offline indicator on StepScreenWrapper

What alternative solutions did you explore? (Optional)

None

[Burhan-Rashid]

🚨 Edited by proposal-police: This proposal was edited at 2025-10-27 08:22:46 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Expense - "You appear to be offline" message displayed twice in destination list

What is the root cause of that problem?

We are using an additional ScreenWrapper container to wrap the StepScreenWrapper component here:

App/src/pages/iou/request/step/IOURequestStepDestination.tsx

Lines 147 to 152 in 98eeb6c

	<ScreenWrapper
	includePaddingTop={false}
	keyboardVerticalOffset={keyboardVerticalOffset}
	testID={`${IOURequestStepDestination.displayName}-container`}
	>
	<StepScreenWrapper

This wrapper is unnecessary as StepScreenWrapper component already uses the same wrapper itself here:

App/src/pages/iou/request/step/StepScreenWrapper.tsx

Lines 62 to 63 in 98eeb6c

	return (
	<ScreenWrapper

As the component is wrapped in two ScreenWrapper 's and when the user goes offline, both of them display the offline message.

What changes do you think we should make in order to solve the problem?

We are using outer ScreenWrapper only for adding these two props: includePaddingTop, keyboardVerticalOffset to the ScreenWrapper.
We need to remove the outer ScreenWrapper here and pass these two props to the StepScreenWrapper instead. We also need to pass the shouldShowWrapper as true always. Also we need to add one more optional prop shouldShowHeader = true which we will use to show or hide the header inside the screenWrapper.

App/src/pages/iou/request/step/IOURequestStepDestination.tsx

Lines 147 to 152 in 98eeb6c

	<ScreenWrapper
	includePaddingTop={false}
	keyboardVerticalOffset={keyboardVerticalOffset}
	testID={`${IOURequestStepDestination.displayName}-container`}
	>
	<StepScreenWrapper

<StepScreenWrapper
            keyboardVerticalOffset={keyboardVerticalOffset}
            includePaddingTop={false}
            shouldShowWrapper
            shouldShowHeader={!openedFromStartPage}
            ...

We need to add these three as optional props to our StepScreenWrapper component with default values as keyboardVerticalOffset = 0,
includePaddingTop = true,
shouldShowHeader = true,

And pass them to the ScreenWrapper component here:

App/src/pages/iou/request/step/StepScreenWrapper.tsx

Lines 62 to 63 in 98eeb6c

	return (
	<ScreenWrapper

 return (
        <ScreenWrapper
            keyboardVerticalOffset={keyboardVerticalOffset}
            includePaddingTop={includePaddingTop}
            ...

add the new prop types here:

App/src/pages/iou/request/step/StepScreenWrapper.tsx

Line 42 in 649daaf

};

 keyboardVerticalOffset?: number;
 includePaddingTop?: boolean;
 shouldShowHeader?: boolean;

set the default value of props here:

App/src/pages/iou/request/step/StepScreenWrapper.tsx

Line 54 in 649daaf

shouldEnableKeyboardAvoidingView = true,

 ...
includePaddingTop = true,
keyboardVerticalOffset = 0,
shouldShowHeader = true,

And Add the header conditional visibility here:

App/src/pages/iou/request/step/StepScreenWrapper.tsx

Line 74 in 2b89b1c

<HeaderWithBackButton

{shouldShowHeader && (
                            <HeaderWithBackButton
                              ...

This way we will only have one ScreenWrapper wrapping our StepScreenWrapper and it will avoid two offline messages when the user is offline and will also handle the two props that we were using earlier for the ScreenWrapper.

Note for C+:
Branch for testing the changes fix/72833_new
Local PR for checking the actual diff(changes): https://github.com/Burhan-Rashid/App/pull/2/files

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

@isabelastisser Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@isabelastisser Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021981095303733896889