[$250] iOS - Onboarding - Blank space behind test drive modal when swiping down

[mitarachim]

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.1.78-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #63970
Email or phone of affected tester (no customers): cskskslslslsgg@gmail.con
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro Max / iOS 18.5
App Component: Other

Action Performed:

1. Launch Expensify app.
2. Log in with a new Gmail account.
3. Tap Skip on work email step.
4. Select something else and complete the onboarding.
5. Tap on the email field.
6. Swipe down on the modal.

Expected Result:

There will be no blank space behind test drive modal when swiping down.

Actual Result:

There is blank space behind test drive modal when swiping down.

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

Bug6881944_1752013469272.ScreenRecording_07-09-2025_06-22-08_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021947926872227236609
• Upwork Job ID: 1947926872227236609
• Last Price Increase: 2025-07-23

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

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

[ryntgh]

Proposal

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

iOS - Onboarding - Blank space behind test drive modal when swiping down

What is the root cause of that problem?

We use shouldUseScrollView which wraps the content in a ScrollView component that has bounce/overscroll behavior enabled by default. When the user swipes down on the ScrollView, it bounces and creates blank space behind the modal content while the modal container height remains fixed

App/src/components/TestDrive/Modal/BaseTestDriveModal.tsx

Line 57 in 15c2eb6

shouldUseScrollView

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

Since by default we can't dismiss the modal by swiping down, we can disable the bounce behavior that causes the blank space issue

1. Add a new prop to FeatureTrainingModal to control scroll bounce behavior

    shouldDisableScrollViewBounce?: boolean;

2. Modify the ScrollView wrapper in FeatureTrainingModal to conditionally disable bouncing

   <Wrapper
       ...
       bounces={shouldUseScrollView ? !shouldDisableScrollViewBounce : undefined}
       ...
   >

App/src/components/FeatureTrainingModal.tsx

Lines 404 to 414 in 15c2eb6

	<Wrapper
	scrollsToTop={false}
	style={[styles.mh100, onboardingIsMediumOrLargerScreenWidth && StyleUtils.getWidthStyle(width), wrapperStyles.style]}
	contentContainerStyle={wrapperStyles.containerStyle}
	keyboardShouldPersistTaps={shouldUseScrollView ? 'handled' : undefined}
	ref={shouldUseScrollView ? scrollViewRef : undefined}
	onLayout={shouldUseScrollView ? (e: LayoutChangeEvent) => setContainerHeight(e.nativeEvent.layout.height) : undefined}
	onContentSizeChange={shouldUseScrollView ? (_w: number, h: number) => setContentHeight(h) : undefined}
	fsClass={CONST.FULL_STORY.UNMASK}
	testID={CONST.FULL_STORY.UNMASK}
	>

3. Update BaseTestDriveModal to pass the new prop

   <FeatureTrainingModal
       ...
       shouldUseScrollView
       shouldDisableScrollViewBounce
   />

App/src/components/TestDrive/Modal/BaseTestDriveModal.tsx

Line 41 in 15c2eb6

<FeatureTrainingModal

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?

N/A

[thelullabyy]

Proposal

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

There is blank space behind test drive modal when swiping down.

What is the root cause of that problem?

The defaultModalContainer has backgroundColor, it generates white/black space when swiping down

App/src/styles/index.ts

Line 2814 in eabe360

defaultModalContainer: {

App/src/components/Modal/BaseModal.tsx

Line 348 in fba0c33

style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}

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

Adding backgroundColor: 'transparent' to the modal's innerContainerStyle. This ensures that when the FeatureTrainingModal is swiped down, it will show a transparent background instead of the default background.

App/src/components/FeatureTrainingModal.tsx

Line 366 in c15785a

boxShadow: 'none',

Wrap these elements below with absolute positioned background to prevent transparent inside modal

<>
<View style={[{backgroundColor: theme.componentBG, position: 'absolute', top: 0, left: 0, right: 0, bottom: '-100%'}]} />

</>

App/src/components/FeatureTrainingModal.tsx

Lines 394 to 436 in c15785a

	<View style={[onboardingIsMediumOrLargerScreenWidth ? {padding: MODAL_PADDING} : {paddingHorizontal: MODAL_PADDING}, illustrationOuterContainerStyle]}>
	{renderIllustration()}
	</View>
	<View style={[styles.mt5, styles.mh5, contentOuterContainerStyles]}>
	{!!title && !!description && (
	<View style={[onboardingIsMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10], contentInnerContainerStyles]}>
	{typeof title === 'string' ? <Text style={[styles.textHeadlineH1, titleStyles]}>{title}</Text> : title}
	{shouldRenderHTMLDescription ? <RenderHTML html={description} /> : <Text style={styles.textSupporting}>{description}</Text>}
	{secondaryDescription.length > 0 && <Text style={[styles.textSupporting, styles.mt4]}>{secondaryDescription}</Text>}
	{children}
	</View>
	)}
	{shouldShowDismissModalOption && (
	<CheckboxWithLabel
	label={translate('featureTraining.doNotShowAgain')}
	accessibilityLabel={translate('featureTraining.doNotShowAgain')}
	style={[styles.mb5]}
	isChecked={!willShowAgain}
	onInputChange={toggleWillShowAgain}
	/>
	)}
	{!!helpText && (
	<Button
	large
	style={[styles.mb3]}
	onPress={() => {
	if (shouldCallOnHelpWhenModalHidden) {
	setIsModalVisible(false);
	return;
	}
	onHelp();
	}}
	text={helpText}
	/>
	)}
	<FormAlertWithSubmitButton
	onSubmit={closeAndConfirmModal}
	isLoading={shouldShowConfirmationLoader}
	buttonText={confirmText}
	enabledWhenOffline={canConfirmWhileOffline}
	/>
	{!canConfirmWhileOffline && <OfflineIndicator />}
	</View>

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

NA

What alternative solutions did you explore? (Optional)

NA

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.

Screen.Recording.2025-07-09.at.10.19.13.mov

[melvin-bot]

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

[melvin-bot]

@stephanieelliott 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@stephanieelliott 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[melvin-bot]

@stephanieelliott 12 days overdue. Walking. Toward. The. Light...

[melvin-bot]

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