[Due for payment 2026-06-30] [$250] 92826 - Android - Certinia - Connect to Certinia CTA disappears when offline

[applause-bot]

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.4.5-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: #92826
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Android 16 / Samsung Galaxy A06
App Component: Workspace Settings

Action Performed:

Precondition:

• Use an Expensifail account.

1. Open Expensify App
2. Enable Accounting in the Workspace
3. Tap Connect button next to Certinia
4. Go to Step 3 in Certinia prerequisites flow.
5. Turn off the network connection.

Expected Result:

Connect to Certinia CTA is disabled, the button is visible but greyed out and cannot be interacted with.

Actual Result:

Connect to Certinia CTA is disappears.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7177604_1781157564319.f6296714-5666-4c4a-8d5f-b349040bb32e.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Nathan Lemma
Bug ID: 7177604

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022065049056960244477
• Upwork Job ID: 2065049056960244477
• Last Price Increase: 2026-06-18

Issue Owner

Current Issue Owner: @mallenexpensify

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/75c2e8c60fa7fc94c5368f2786e9d9f964cf22a581e52dcf5f55732781779ea6

[MelvinBot]

Proposal

What is the root cause of that problem?

The button is not unmounting — it's being covered by the offline indicator banner.

When the device goes offline, ScreenWrapper renders the small‑screen offline indicator with styles.stickToBottom, which is position: absolute; bottom: 0 (ScreenWrapperOfflineIndicators.tsx:95, styles/index.ts:5816). It's an absolutely‑positioned overlay pinned to the bottom of the screen.

The "Connect to Certinia" CTA lives in a FixedFooter that is rendered without addBottomSafeAreaPadding (CertiniaPrerequisitesStep.tsx:74-83). Because of that, the footer reserves no space for the offline indicator, so when the indicator overlay appears it sits directly on top of the button — making it look like the CTA disappeared.

The isDisabled={isLastStep && isOffline} added in PR #92826 correctly handles the "greyed out / not interactive" requirement, but it does nothing to keep the button visible above the offline overlay, which is why QA still sees it vanish.

Why the missing prop matters

In useBottomSafeSafeAreaPaddingStyle.ts:35, addOfflineIndicatorBottomSafeAreaPadding defaults to addBottomSafeAreaPadding. When that flag is on and the user is offline, the hook adds CONST.OFFLINE_INDICATOR_HEIGHT (25px) of bottom padding (line 52-53), pushing the footer content above the indicator. Since Certinia's FixedFooter passes neither flag, no padding is reserved and the button is overlaid.

The analogous Sage Intacct prerequisites page does it correctly — its FixedFooter passes addBottomSafeAreaPadding (DynamicSageIntacctPrerequisitesPage.tsx:105-107).

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

Add addBottomSafeAreaPadding to the FixedFooter in CertiniaPrerequisitesStep.tsx, matching the Sage Intacct prerequisites pattern:

<FixedFooter
    style={[styles.mtAuto]}
    addBottomSafeAreaPadding
>

This reserves bottom safe‑area padding and (via the default) offline‑indicator padding, so when offline the CTA is pushed above the indicator and stays visible — greyed out and disabled, which is the expected behavior. Keep the existing isDisabled={isLastStep && isOffline}; both pieces are needed.

What alternative solutions did you explore? (Optional)

Pass addOfflineIndicatorBottomSafeAreaPadding explicitly instead, but addBottomSafeAreaPadding is the cleaner, convention‑aligned choice (it also fixes the non‑offline bottom‑inset spacing to match sibling prerequisite pages).

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/93285) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[yusufdeveloper2903]

Proposal

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

On Step 3 (OAuth) of the Certinia prerequisites flow, going offline makes the Connect to Certinia CTA disappear instead of staying visible but greyed‑out/disabled.

What is the root cause of that problem?

The button is not actually being unmounted — it's being covered by the bottom-docked offline indicator.

In CertiniaPrerequisitesStep the CTA lives in a FixedFooter that is pushed to the very bottom of the screen with mtAuto:

<FixedFooter style={[styles.mtAuto]}>
    <Button
        success
        ...
        isDisabled={isLastStep && isOffline}
    />
</FixedFooter>

Note the parent page renders this with shouldUseScrollView={false} and a flex1 content container (CertiniaPrerequisitesPage L66-L74), so the footer sits flush at the bottom edge of the screen.

When you go offline, ScreenWrapper renders the small-screen offline indicator and docks it to the bottom with absolute positioning — ScreenWrapperOfflineIndicators L119-L126 applies styles.stickToBottom, which is position: absolute; bottom: 0; left/right: 0 (styles L5816-L5821). On a device with soft-key/gesture nav (the Samsung Galaxy A06 in the report), that indicator also gets an opaque appBG background (L65-L71).

Because the footer reserves no space for that indicator, the absolutely-positioned, opaque indicator paints directly over the CTA → the button visually "disappears." isDisabled={isLastStep && isOffline} is still doing its job (the button is disabled), it's just hidden behind the indicator.

The FixedFooter already knows how to avoid this: it forwards addBottomSafeAreaPadding into useBottomSafeSafeAreaPaddingStyle, which — when offline — adds CONST.OFFLINE_INDICATOR_HEIGHT (25px) to the footer's bottom padding so the content is lifted above the docked indicator. The Certinia footer simply never opts in.

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

Opt the footer into bottom-safe-area padding so it reserves room for the offline indicator. One prop on the FixedFooter in CertiniaPrerequisitesStep.tsx:

-            <FixedFooter style={[styles.mtAuto]}>
+            <FixedFooter
+                style={[styles.mtAuto]}
+                addBottomSafeAreaPadding
+            >

This works because in FixedFooter, addOfflineIndicatorBottomSafeAreaPadding defaults to the value of addBottomSafeAreaPadding inside useBottomSafeSafeAreaPaddingStyle (L33-L35), so the single flag both adds safe-area padding and lifts the footer by OFFLINE_INDICATOR_HEIGHT when offline. The padding is only applied while isOffline is true, so online layout is unchanged.

This is exactly what the sibling Sage Intacct prerequisites page already does — same ConnectionLayout + FixedFooter + mtAuto pattern — in DynamicSageIntacctPrerequisitesPage.tsx L105-L108:

<FixedFooter
    style={[styles.mtAuto]}
    addBottomSafeAreaPadding
>

Result / edge cases:

• Offline → the CTA now stays visible and greyed-out (disabled), matching the Expected Result. The fix applies to all three steps uniformly since they share this component, so the "Confirm/Next" footers on Steps 1‑2 are also no longer obscured offline.
• The change is platform-agnostic but specifically resolves the Android (soft-key, opaque indicator) case from the report; iOS/web get the same correct spacing.
• No behavior change online (the offline-indicator padding term is gated on isOffline).

What alternative solutions did you explore? (Optional)

• Move the offline indicator / change its positioning — rejected: stickToBottom is shared global behavior used across the app; changing it would risk regressions everywhere for a local layout bug.
• Add manual pb/mb to the footer — rejected: hard-coding a magic number duplicates logic that useBottomSafeSafeAreaPaddingStyle already centralizes (it also accounts for safe-area insets and only pads when offline), and it wouldn't match the established convention.

[mukhrr]

Proposal

What is the root cause of that problem?

PR #92826 changed CertiniaPrerequisitesStep to disable the OAuth CTA while offline by adding useNetwork() and isDisabled={isLastStep && isOffline}. That means the CTA is still rendered in code, but only disabled:

App/src/pages/workspace/accounting/certinia/prerequisites/CertiniaPrerequisitesStep.tsx

Lines 74 to 81 in 1ce07c3

	<FixedFooter style={[styles.mtAuto]}>
	<Button
	success
	large
	style={[styles.w100]}
	onPress={isLastStep ? onConnect : onNext}
	text={translate(buttonKey)}
	isDisabled={isLastStep && isOffline}

The missing part is layout padding. The CTA is inside FixedFooter, but this Certinia footer does not opt into bottom safe-area padding:

App/src/pages/workspace/accounting/certinia/prerequisites/CertiniaPrerequisitesStep.tsx

Line 74 in 1ce07c3

<FixedFooter style={[styles.mtAuto]}>

On Android offline, ScreenWrapperOfflineIndicators renders the small-screen offline indicator as a bottom-stuck element:

App/src/components/ScreenWrapper/ScreenWrapperOfflineIndicators.tsx

Lines 81 to 123 in 1ce07c3

	const smallScreenOfflineIndicatorBottomSafeAreaStyle = useBottomSafeSafeAreaPaddingStyle({
	addBottomSafeAreaPadding,
	addOfflineIndicatorBottomSafeAreaPadding: false,
	styleProperty: isSoftKeyNavigation ? 'bottom' : 'paddingBottom',
	});
	/**
	* This style includes all styles applied to the container of the small screen offline indicator.
	* It always applies the bottom safe area padding as well as the background style, if the device has soft keys.
	* In this case, we want the whole container (including the bottom safe area padding) to have translucent/opaque background.
	*/
	const smallScreenOfflineIndicatorContainerStyle = useMemo(
	() => [
	smallScreenOfflineIndicatorBottomSafeAreaStyle,
	shouldSmallScreenOfflineIndicatorStickToBottom && styles.stickToBottom,
	!isSoftKeyNavigation && smallScreenOfflineIndicatorBackgroundStyle,
	],
	[
	smallScreenOfflineIndicatorBottomSafeAreaStyle,
	shouldSmallScreenOfflineIndicatorStickToBottom,
	styles.stickToBottom,
	isSoftKeyNavigation,
	smallScreenOfflineIndicatorBackgroundStyle,
	],
	);
	/**
	* This style includes the styles applied to the small screen offline indicator component.
	* If the device has soft keys, we only want to apply the background style to the small screen 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 smallScreenOfflineIndicatorStyle = useMemo(
	() => [styles.pl5, isSoftKeyNavigation && smallScreenOfflineIndicatorBackgroundStyle, offlineIndicatorStyle],
	[isSoftKeyNavigation, smallScreenOfflineIndicatorBackgroundStyle, offlineIndicatorStyle, styles.pl5],
	);
	return (
	<>
	{shouldShowSmallScreenOfflineIndicator && (
	<>
	{isOffline && (
	<View style={[smallScreenOfflineIndicatorContainerStyle]}>
	<OfflineIndicator style={smallScreenOfflineIndicatorStyle} />

FixedFooter already supports reserving space for that indicator through useBottomSafeSafeAreaPaddingStyle:

App/src/components/FixedFooter.tsx

Lines 25 to 44 in 1ce07c3

	function FixedFooter({style, children, addBottomSafeAreaPadding, addOfflineIndicatorBottomSafeAreaPadding, shouldStickToBottom = false}: FixedFooterProps) {
	const styles = useThemeStyles();
	const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({
	addBottomSafeAreaPadding,
	addOfflineIndicatorBottomSafeAreaPadding,
	additionalPaddingBottom: styles.pb5.paddingBottom,
	styleProperty: shouldStickToBottom ? 'bottom' : 'paddingBottom',
	});
	const footerStyle = useMemo<StyleProp<ViewStyle>>(
	() => [shouldStickToBottom && styles.stickToBottom, bottomSafeAreaPaddingStyle],
	[bottomSafeAreaPaddingStyle, shouldStickToBottom, styles.stickToBottom],
	);
	if (!children) {
	return null;
	}
	return <View style={[styles.ph5, styles.flexShrink0, footerStyle, style]}>{children}</View>;

and the hook adds CONST.OFFLINE_INDICATOR_HEIGHT when offline if bottom padding is enabled:

App/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts

Lines 33 to 53 in 1ce07c3

	function useBottomSafeSafeAreaPaddingStyle({
	addBottomSafeAreaPadding = false,
	addOfflineIndicatorBottomSafeAreaPadding = addBottomSafeAreaPadding,
	style,
	styleProperty = 'paddingBottom',
	additionalPaddingBottom = 0,
	}: UseBottomSafeAreaPaddingStyleParams = {}) {
	const {paddingBottom: safeAreaPaddingBottom} = useSafeAreaPaddings(true);
	const {isOffline} = useNetwork();
	const {addSafeAreaPadding: isOfflineIndicatorSafeAreaPaddingEnabled} = useContext(ScreenWrapperOfflineIndicatorContext);
	return useMemo<StyleProp<ViewStyle>>(() => {
	let totalPaddingBottom: number | string = additionalPaddingBottom;
	// Add the safe area padding to the total padding if the flag is enabled
	if (addBottomSafeAreaPadding) {
	totalPaddingBottom += safeAreaPaddingBottom;
	}
	if (addOfflineIndicatorBottomSafeAreaPadding && isOffline && isOfflineIndicatorSafeAreaPaddingEnabled) {
	totalPaddingBottom += CONST.OFFLINE_INDICATOR_HEIGHT;

Similar accounting setup pages already use addBottomSafeAreaPadding on their fixed footers, for example Sage Intacct prerequisites:

App/src/pages/workspace/accounting/intacct/DynamicSageIntacctPrerequisitesPage.tsx

Lines 105 to 108 in 1ce07c3

	<FixedFooter
	style={[styles.mtAuto]}
	addBottomSafeAreaPadding
	>

and QBD setup:

App/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx

Lines 117 to 120 in 1ce07c3

	<FixedFooter
	style={[styles.mtAuto, styles.ph0]}
	addBottomSafeAreaPadding
	>

So Certinia is the outlier: the disabled button exists, but the offline indicator/bottom inset takes over the same bottom area, making the CTA appear to disappear on Android.

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

Add bottom safe-area padding to the Certinia prerequisites FixedFooter, matching the existing accounting setup patterns.

diff --git a/src/pages/workspace/accounting/certinia/prerequisites/CertiniaPrerequisitesStep.tsx b/src/pages/workspace/accounting/certinia/prerequisites/CertiniaPrerequisitesStep.tsx
@@
-            <FixedFooter style={[styles.mtAuto]}>
+            <FixedFooter
+                style={[styles.mtAuto]}
+                addBottomSafeAreaPadding
+            >
                 <Button
                     success
                     large
                     style={[styles.w100]}
                     onPress={isLastStep ? onConnect : onNext}
                     text={translate(buttonKey)}
                     isDisabled={isLastStep && isOffline}
                     pressOnEnter
                 />

This avoids regression because it does not change the offline state logic, connection action, navigation, or global offline indicator behavior. It only opts this footer into the shared padding path already used by similar accounting setup screens. Since useBottomSafeSafeAreaPaddingStyle defaults addOfflineIndicatorBottomSafeAreaPadding to the value of addBottomSafeAreaPadding, the footer gets normal safe-area padding online and reserves offline-indicator height only when offline.

QA:

1. Android native, Certinia prerequisites step 3, online: CTA visible and enabled.
2. Turn offline on step 3: CTA remains visible, greyed out, and cannot be tapped.
3. Steps 1 and 2 still show their CTA above the bottom safe area and continue to work normally.
4. Verify Sage Intacct/QBD setup screens are unaffected since no shared component behavior changes.

What alternative solutions did you explore? (Optional)

We could hide or reposition the offline indicator for this screen, but that changes global screen behavior for one case and removes useful offline feedback. We could also add manual margin/padding only when isOffline, but that duplicates the existing FixedFooter/safe-area logic and is easier to get wrong across Android navigation modes.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[melvin-bot]

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

[github-actions]

⚠️ @mukhrr Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[lorretheboy]

Proposal

What is the root cause of that problem?

The Connect CTA lives in a FixedFooter that is pushed to the bottom with mtAuto, and that footer is given neither addBottomSafeAreaPadding nor addOfflineIndicatorBottomSafeAreaPadding:

App/src/pages/workspace/accounting/certinia/prerequisites/CertiniaPrerequisitesStep.tsx

Lines 74 to 84 in f0ef594

	<FixedFooter style={[styles.mtAuto]}>
	<Button
	success
	large
	style={[styles.w100]}
	onPress={isLastStep ? onConnect : onNext}
	text={translate(buttonKey)}
	isDisabled={isLastStep && isOffline}
	pressOnEnter
	/>
	</FixedFooter>

When the device goes offline, ScreenWrapper renders the small‑screen offline indicator in a container that is absolutely positioned at the bottom (stickToBottom) with an opaque app background:

App/src/components/ScreenWrapper/ScreenWrapperOfflineIndicators.tsx

Lines 92 to 105 in f0ef594

	const smallScreenOfflineIndicatorContainerStyle = useMemo(
	() => [
	smallScreenOfflineIndicatorBottomSafeAreaStyle,
	shouldSmallScreenOfflineIndicatorStickToBottom && styles.stickToBottom,
	!isSoftKeyNavigation && smallScreenOfflineIndicatorBackgroundStyle,
	],
	[
	smallScreenOfflineIndicatorBottomSafeAreaStyle,
	shouldSmallScreenOfflineIndicatorStickToBottom,
	styles.stickToBottom,
	isSoftKeyNavigation,
	smallScreenOfflineIndicatorBackgroundStyle,
	],
	);

App/src/styles/index.ts

Lines 5816 to 5821 in f0ef594

	stickToBottom: {
	position: 'absolute',
	bottom: 0,
	left: 0,
	right: 0,
	},

Because the footer reserves no room for that indicator, the indicator's opaque layer is drawn directly on top of the bottom button and hides it. The recent isDisabled={isLastStep && isOffline} change only greys the button — it does nothing about the overlay, so the (now disabled) button is still painted over and looks like it "disappears". The mechanism that would have prevented this is the offline‑indicator padding, which only adds OFFLINE_INDICATOR_HEIGHT of bottom space when the footer opts in:

App/src/hooks/useBottomSafeSafeAreaPaddingStyle.ts

Lines 52 to 54 in f0ef594

	if (addOfflineIndicatorBottomSafeAreaPadding && isOffline && isOfflineIndicatorSafeAreaPaddingEnabled) {
	totalPaddingBottom += CONST.OFFLINE_INDICATOR_HEIGHT;
	}

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

Make the footer reserve space for the offline indicator so the button is offset above it instead of being covered. Pass addBottomSafeAreaPadding and addOfflineIndicatorBottomSafeAreaPadding to the FixedFooter here:

App/src/pages/workspace/accounting/certinia/prerequisites/CertiniaPrerequisitesStep.tsx

Lines 74 to 84 in f0ef594

	<FixedFooter style={[styles.mtAuto]}>
	<Button
	success
	large
	style={[styles.w100]}
	onPress={isLastStep ? onConnect : onNext}
	text={translate(buttonKey)}
	isDisabled={isLastStep && isOffline}
	pressOnEnter
	/>
	</FixedFooter>

i.e. <FixedFooter style={[styles.mtAuto]} addBottomSafeAreaPadding addOfflineIndicatorBottomSafeAreaPadding>. With the existing isDisabled={isLastStep && isOffline}, the Connect CTA then stays visible and greyed out when offline, matching the expected behavior. This also fixes the earlier "Confirm" steps, whose buttons sit in the same footer.

What alternative solutions did you explore? (Optional)

Hide the offline indicator on this page (e.g. shouldShowOfflineIndicator={false} on the ScreenWrapper/ConnectionLayout), but that removes useful offline feedback and is inconsistent with other connection pages, so the footer‑padding fix is preferred.