[$250] iOS - Categories - Offline indicator overlaps with home bar in Default spend categories page

[lanitochka17]

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.0.54-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
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): applausetester+kh1610015@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch ND app
2. Go to workspace settings > Categories
3. Go offline
4. Tap Settings
5. Tap Airlines
6. Scroll down to dismiss the keyboard

Expected Result:

Offline indicator will not overlap with home bar after dismissing the keyboard

Actual Result:

Offline indicator overlaps with home bar briefly after dismissing the keyboard

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6647469_1730045538081.ScreenRecording_10-28-2024_00-05-58_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021850900545784411884
• Upwork Job ID: 1850900545784411884
• Last Price Increase: 2024-10-28

Issue Owner

Current Issue Owner: @dukenv0307

[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.

[bernhardoj]

Proposal

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

Offline indicator overlaps with the iOS home bar briefly after closing keyboard.

What is the root cause of that problem?

The category selector page uses a Modal and inside the modal, we have a padding bottom added to avoid the home bar overlapping. But, if a keyboard is shown, we won't apply the padding-bottom.

App/src/components/Modal/BaseModal.tsx

Line 196 in 5103b4b

shouldAddBottomSafeAreaPadding: !keyboardStateContextValue?.isKeyboardShown && shouldAddBottomSafeAreaPadding,

It was added to fix this issue where there is an extra space at the bottom when the keyboard is shown, so they apply the padding-bottom only if the keyboard is closed. So, in this issue, when the keyboard opens, the padding-bottom isn't applied and when we close the keyboard, the offline indicator will overlap with the home bar for a while until the keyboard state changes to "closed".

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

Applying the padding-bottom conditionally based on the keyboard state is only needed when the keyboard-avoiding view is enabled. If it's disabled, then the modal content won't be pushed above the keyboard, so we won't see the padding-bottom either. So, the first solution is to always apply the padding-bottom if the keyboard avoiding view is disabled.

shouldAddBottomSafeAreaPadding: (!avoidKeyboard || !keyboardStateContextValue?.isKeyboardShown) && shouldAddBottomSafeAreaPadding,

avoidKeyboard is disabled by default.

App/src/components/Modal/BaseModal.tsx

Line 47 in 5103b4b

avoidKeyboard = false,

And because we don't need to avoid keyboard for the category selector modal, we can just disable it from the ScreenWrapper too.

App/src/pages/workspace/distanceRates/CategorySelector/CategorySelectorModal.tsx

Lines 33 to 48 in 5103b4b

	return (
	<Modal
	type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
	isVisible={isVisible}
	onClose={onClose}
	onModalHide={onClose}
	hideModalContentWhileAnimating
	useNativeDriver
	>
	<ScreenWrapper
	style={[styles.pb0]}
	includePaddingTop={false}
	includeSafeAreaPaddingBottom={false}
	testID={CategorySelectorModal.displayName}
	>
	<HeaderWithBackButton

shouldEnableKeyboardAvoidingView={false}

What alternative solutions did you explore? (Optional)

Wrap the children with SafeAreaView and remove the manual safe area padding calculation.

App/src/components/Modal/BaseModal.tsx

Lines 188 to 203 in 5103b4b

	const modalPaddingStyles = shouldUseModalPaddingStyle
	? StyleUtils.getModalPaddingStyles({
	safeAreaPaddingTop,
	safeAreaPaddingBottom,
	safeAreaPaddingLeft,
	safeAreaPaddingRight,
	shouldAddBottomSafeAreaMargin,
	shouldAddTopSafeAreaMargin,
	shouldAddBottomSafeAreaPadding: !keyboardStateContextValue?.isKeyboardShown && shouldAddBottomSafeAreaPadding,
	shouldAddTopSafeAreaPadding,
	modalContainerStyleMarginTop: modalContainerStyle.marginTop,
	modalContainerStyleMarginBottom: modalContainerStyle.marginBottom,
	modalContainerStylePaddingTop: modalContainerStyle.paddingTop,
	modalContainerStylePaddingBottom: modalContainerStyle.paddingBottom,
	insets: safeAreaInsets,
	})

App/src/components/Modal/BaseModal.tsx

Lines 272 to 277 in 5103b4b

	<View
	style={[styles.defaultModalContainer, modalPaddingStyles, modalContainerStyle, !isVisible && styles.pointerEventsNone]}
	ref={ref}
	>
	<ColorSchemeWrapper>{children}</ColorSchemeWrapper>
	</View>

<SafeAreaView style={styles.flex1}>

[melvin-bot]

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

[melvin-bot]

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

[isabelastisser]

@muttmuure, does this issue belong to [#whatsnext] #quality?