iOS - Distance - Scan tab shows black background after swiping left to go to Distance

[IuliiaHerets]

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.64-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
Email or phone of affected tester (no customers): applausetester+29302390@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Precondition:

• App is in dark mode.

1. Launch ND or hybrid app.
2. Go to FAB > Submit expense.
3. Go to Scan.
4. Swipe left to go to Distance.
5. Tap on Scan tab.
6. Swipe left to go to Distance.

Expected Result:

Scan tab will not have black background after swiping left to go to Distance.

Actual Result:

Scan tab shows black background after swiping left to go to Distance.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6670785_1732115375386.ScreenRecording_11-20-2024_23-04-19_1.mp4

View all open jobs on GitHub

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

[QichenZhu]

Proposal

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

Scan tab shows a black background after swiping left to Distance, clicking Scan, and swiping left to Distance again.

What is the root cause of that problem?

On native platforms, the background color is calculated using the sum of position and offset, which are internal animation values.

App/src/components/TabSelector/getBackground/index.native.ts

Line 7 in d49d52d

return position?.interpolate({

https://github.com/react-navigation/react-navigation/blob/5da190167882859bb3356a84de42be3ca540ef99/packages/react-native-tab-view/src/PagerViewAdapter.tsx#L134

These values weren’t meant for external use and didn't update properly during page switches, so we added a patch to fix this.

App/patches/react-native-tab-view+3.5.2.patch

Lines 18 to 22 in 056d654

	onPageSelected={(e) => {
	const index = e.nativeEvent.position;
	indexRef.current = index;
	+ position.setValue(index);
	+ setForceRender((fr) => fr+1)

In this patch, position is correctly set, but offset is unchanged.

If position is the index of the last tab and offset > 0, their sum goes out of range, so the background interpolates to the wrong color.

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

Set both position and offset when a page is selected.

App/patches/react-native-tab-view+3.5.2.patch

Line 21 in 056d654

+ position.setValue(index);

position.setValue(index);
offset.setValue(0);

What alternative solutions did you explore? (Optional)

Avoid using internal animation values in TabSelector, which has already been done on web platforms in #51020. The drawback is that the background won’t change gradually during tab sliding.

[stephanieelliott]

This is practically undetectable and only happens in dark mode. Seeing as it does not affect functionality I think this is not worth prioritizing.