[Due for payment 2025-05-20] [$250] onboarding-You appears to be offline appears in left without margin.

[nlemma]

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: V9..131-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: No, reproducible on hybrid only
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): Slottwo1 6i@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: User Settings

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Enter any gmail id
3. Tap join
4. Turn off internet
5. What's your work email page note you appears to be offline message below
6. Tap skip
7. Note offline message in What you want to do today
8. Select track and budget option
9. Note offline message in what's your name page

Expected Result:

You appears to be offline must appear in left with margin in onboarding flow pages.

Actual Result:

You appears to be offline appears in left without margin in onboarding flow pages.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6809434_1745326875197.Screenrecorder-2025-04-22-18-21-19-909.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021915443870999497813
• Upwork Job ID: 1915443870999497813
• Last Price Increase: 2025-04-24
• Automatic offers:
• Krishna2323 | Contributor | 107068002

Issue Owner

Current Issue Owner: @zanyrenney

[melvin-bot]

Triggered auto assignment to @zanyrenney (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.

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-22 13:50:23 UTC.

Proposal

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

onboarding-You appears to be offline appears in left without margin.

What is the root cause of that problem?

Here

App/src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx

Line 225 in a2b6087

{isSmallScreenWidth && <OfflineIndicator />}

and

App/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx

Line 132 in a2b6087

{isSmallScreenWidth && <OfflineIndicator />}

we are directly calling the OfflineIndicator but we should pass mobileOfflineIndicatorStyle

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

<OfflineIndicator style={mobileOfflineIndicatorStyle} />

we are using this screenWrapper here

App/src/components/ScreenWrapper.tsx

Lines 410 to 413 in a2b6087

	const mobileOfflineIndicatorStyle = useMemo(
	() => [styles.pl5, isSoftKeyNavigation && mobileOfflineIndicatorBackgroundStyle, offlineIndicatorStyle],
	[isSoftKeyNavigation, mobileOfflineIndicatorBackgroundStyle, offlineIndicatorStyle, styles.pl5],
	);

and we need to create this in BaseOnboardingWorkEmail, BaseOnboardingWorkspaces, BaseOnboardingPurpose, and BaseOnboardingPrivateDomain

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

We can also use styles.m0, styles.pl5, styles.alignItemsStart

like we did here

App/src/pages/signin/SignInPageLayout/SignInPageContent.tsx

Line 56 in a2b6087

<OfflineIndicator style={[styles.m0, styles.pl0, styles.alignItemsStart]} />

with pl5

{isSmallScreenWidth && <OfflineIndicator style={[styles.m0, styles.pl5, styles.alignItemsStart]}/>}

Additionally to resolve #60831 we should remove OfflineIndicator completely since we already have screen wrapper that deal with OfflineIndicator

App/src/pages/OnboardingWorkspaces/BaseOnboardingWorkspaces.tsx

Line 167 in 4a087a6

{isSmallScreenWidth && <OfflineIndicator />}

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.

[nkdengineer]

Proposal

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

You appears to be offline appears in left without margin in onboarding flow pages.

What is the root cause of that problem?

We don't add the style in OfflineIndicator in all onboarding page flows

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

We should create a new component and build mobileOfflineIndicatorContainerStyle and mobileOfflineIndicatorStyle like we did in ScreenWrapper and use it instead of {isSmallScreenWidth && <OfflineIndicator />}

        <View style={[mobileOfflineIndicatorContainerStyle]}>
            <OfflineIndicator style={mobileOfflineIndicatorStyle} />
        </View>

App/src/components/ScreenWrapper.tsx

Lines 400 to 413 in 018589c

	const mobileOfflineIndicatorContainerStyle = useMemo(
	() => [mobileOfflineIndicatorBottomSafeAreaStyle, displayStickyMobileOfflineIndicator && styles.stickToBottom, !isSoftKeyNavigation && mobileOfflineIndicatorBackgroundStyle],
	[mobileOfflineIndicatorBottomSafeAreaStyle, displayStickyMobileOfflineIndicator, styles.stickToBottom, isSoftKeyNavigation, mobileOfflineIndicatorBackgroundStyle],
	);
	/**
	* This style includes the styles applied to the mobile offline indicator component.
	* If the device has soft keys, we only want to apply the background style to the mobile offline indicator component,
	* rather than the whole container, because otherwise the navigation bar would be extra opaque, since it already has a translucent background.
	*/
	const mobileOfflineIndicatorStyle = useMemo(
	() => [styles.pl5, isSoftKeyNavigation && mobileOfflineIndicatorBackgroundStyle, offlineIndicatorStyle],
	[isSoftKeyNavigation, mobileOfflineIndicatorBackgroundStyle, offlineIndicatorStyle, styles.pl5],
	);

OR simply we can add the style margin left and margin bottom to OfflineIndicator

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

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.

[samranahm]

Proposal updated

• Added alternative solution

results

[Krishna2323]

Proposal

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

onboarding-You appears to be offline appears in left without margin.

What is the root cause of that problem?

• We are rendering OfflineIndicator in all onboarding flow pages without proper styling and margins.

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

• Instead of rendering directly rendering OfflineIndicator like {isSmallScreenWidth && <OfflineIndicator />}, we can remove that and pass shouldShowOfflineIndicator={isSmallScreenWidth} to ScreenWrapper in all components.
• Additionally, we need to replace SafeAreaConsumer with ScreenWrapper.

Pseudocode

        <ScreenWrapper
            shouldEnableMaxHeight
            shouldShowOfflineIndicator={isSmallScreenWidth}
            includeSafeAreaPaddingBottom
            testID="BaseOnboardingPersonalDetails"
            style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
        >
            <View style={onboardingIsMediumOrLargerScreenWidth && styles.mh3}>
                <HeaderWithBackButton
                    shouldShowBackButton={false}
                    iconFill={theme.iconColorfulBackground}
                    progressBarPercentage={isPrivateDomain ? 60 : 20}
                />
            </View>
            <ScrollView style={[styles.flex1, styles.flexGrow1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, paddingHorizontal]}>
                <View style={styles.flex1}>
                    <View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb5]}>
                        <Text style={styles.textHeadlineH1}>{translate('onboarding.purpose.title')} </Text>
                    </View>
                    <MenuItemList
                        menuItems={menuItems}
                        shouldUseSingleExecution
                    />
                </View>
            </ScrollView>
            {!!onboardingErrorMessage && (
                <View style={[styles.w100, styles.mb5, styles.mh0, paddingHorizontal]}>
                    <FormHelpMessage message={onboardingErrorMessage} />
                </View>
            )}
        </ScreenWrapper>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A -- UI issue.

What alternative solutions did you explore? (Optional)

N/A

Result

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

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