[Due for payment 2025-05-22] [$250] iOS - Track Expenses - Your space picture and text are flickering after back from workspace

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.28-13
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: https://expensify.testrail.io/index.php?/tests/view/5929047
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:
Create a new workspace if your account doesn't have any workspace

1. Go to Self DM chat
2. Submit any track expense
3. Tap the "Submit it to someone" button of the whisper action
4. Search for workspaces
5. Select any workspace and Create expense
6. After redirected to Workspace chat, tap back button

Expected Result:

User should be back to Your space (Self DM) chat without any issue

Actual Result:

Your space picture and text are flickering after back from the workspace chat

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6803989_1744824227062.iOS_-_Track_Expenses_-_Your_space_picture_and_text_are_flickering_after_back_from_workspace.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021912729791580558775
• Upwork Job ID: 1912729791580558775
• Last Price Increase: 2025-04-24
• Automatic offers:
• nkdengineer | Contributor | 107126884

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[PiyushChandra17]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-17 08:51:55 UTC.

Proposal

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

iOS - Track Expenses - Your space picture and text are flickering after back from workspace

What is the root cause of that problem?

The flickering is occuring because when navigating back to the workspace, it re-renders the component.

The styles and text are conditionally rendered based on isSelfDM evaluated way too frequently, hence causes the UI to flicker.

The problem is likely related to how the component manages state transitions when navigating between different spaces in the app(iOS). The useMemo hook for welcomeHeroText is responsible for rendering the "Your space" text, and inconsistent state during navigation is likely causing it to re-render multiple times or briefly show different content.

Perhaps this is the root cause.

App/src/components/ReportWelcomeText.tsx

Lines 95 to 106 in 29fe495

	const welcomeHeroText = useMemo(() => {
	if (isInvoiceRoom) {
	return translate('reportActionsView.sayHello');
	}
	if (isChatRoom) {
	return translate('reportActionsView.welcomeToRoom', {roomName: reportName});
	}
	if (isSelfDM) {
	return translate('reportActionsView.yourSpace');
	}

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

We should use useMemo hook to avoid unnecessary recalculations.

• First things first memoize the isSelfDM, replace this line

App/src/components/ReportWelcomeText.tsx

Line 54 in 29fe495

const isSelfDM = isSelfDMReportUtils(report);

with,

const memoizedReport = useMemo(() => report, [report]);
const isSelfDM = useMemo(() => isSelfDMReportUtils(memoizedReport), [memoizedReport]);

• Secondly, add a short delay when transitioning back to workspaces to avoid re-renders

Add this state to the component

const [isTransitioning, setIsTransitioning] = useState(false);

Use a navigation listener to detect when returning to this screen

useEffect(() => {
  const unsubscribe = Navigation.addListener('focus', () => {
    setIsTransitioning(true);
    setTimeout(() => setIsTransitioning(false), 300); // Short delay
  });
  return unsubscribe;
}, []);

Then in render logic:

const welcomeHeroText = useMemo(() => {
  // If transitioning, return the last stable value
  if (isTransitioning && previousHeroText.current) {
    return previousHeroText.current;
  }
  
Existing logic...
}, [isTransitioning, isChatRoom, isInvoiceRoom, isPolicyExpenseChat, isSelfDM...]);

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

Result

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.

[linhvovan29546]

The root cause is the same as #60284

[linhvovan29546]

Proposal

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

iOS - Track Expenses - Your space picture and text are flickering after back from workspace

What is the root cause of that problem?

In the ReportActionsList, we use InvertedFlatList to render the chat.

App/src/pages/home/report/ReportActionsList.tsx

Line 743 in 4af9c88

<InvertedFlatList

Looking into InvertedFlatList, it uses maintainVisibleContentPosition with minIndexForVisible set to 1. And when scrolling that will undefined. According to the React Native docs, the scroll view will adjust the scroll position so that the first child that is currently visible and at or beyond minIndexForVisible will not change position....

App/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx

Lines 90 to 91 in 512af49

	// This needs to be 1 to avoid using loading views as anchors.
	minIndexForVisible: 1,

When the first message or attachment is removed, this adjustment can cause the chat page to appear blank due to the content being shifted incorrectly as step from the OP.

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

We can add an empty View or Fragment to the listFooterComponent when the skeleton is not shown. This prevents the scroll view from miscalculating the content position and resolves the issue.

App/src/pages/home/report/ReportActionsList.tsx

Lines 705 to 711 in 4af9c88

	const listFooterComponent = useMemo(() => {
	if (!shouldShowSkeleton) {
	return;
	}
	return <ReportActionsSkeletonView shouldAnimate={false} />;
	}, [shouldShowSkeleton]);

    const listFooterComponent = useMemo(() => {
        if (!shouldShowSkeleton) {
            return <View/> // New
        }

        return <ReportActionsSkeletonView shouldAnimate={false} />;
    }, [shouldShowSkeleton]);

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

This is an UI issue(Native app). No automated test.

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.

[linhvovan29546]

I'm copied the proposal here to help move this forward faster.

[nkdengineer]

Proposal

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

Your space picture and text are flickering after back from the workspace chat

What is the root cause of that problem?

The maintainVisibleContentPosition prop with the 1autoscrollToTopThreshold1 option is designed to keep the scroll position stable when new items are dynamically added. We use it in the FlatList component. This prevents UI jumps by ensuring that content remains in view as more data is added

App/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx

Lines 88 to 95 in 98127bc

	const maintainVisibleContentPosition = useMemo(() => {
	const config: ScrollViewProps['maintainVisibleContentPosition'] = {
	// This needs to be 1 to avoid using loading views as anchors.
	minIndexForVisible: 1,
	};
	if (shouldEnableAutoScrollToTopThreshold && !isLoadingData && !wasLoadingData) {
	config.autoscrollToTopThreshold = AUTOSCROLL_TO_TOP_THRESHOLD;

The problem is that when these actions are removed, the reportActions list has only one action, the created action. The list tries to maintain the position of nothing (the content with index 1). Ref: https://reactnative.dev/docs/scrollview#maintainvisiblecontentposition

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

When the data.length has only one, we should update minIndexForVisible to 0. This can ensure we will not maintain the position of nothing.

const maintainVisibleContentPosition = useMemo(() => {
    const config: ScrollViewProps['maintainVisibleContentPosition'] = {
        // This needs to be 1 to avoid using loading views as anchors.
        minIndexForVisible: Math.min(1, data.length - 1),
    };

    if (shouldEnableAutoScrollToTopThreshold && !isLoadingData && !wasLoadingData) {
        config.autoscrollToTopThreshold = AUTOSCROLL_TO_TOP_THRESHOLD;
    }

    return config;
}, [data.length, shouldEnableAutoScrollToTopThreshold, isLoadingData, wasLoadingData]);

App/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx

Lines 88 to 95 in 98127bc

	const maintainVisibleContentPosition = useMemo(() => {
	const config: ScrollViewProps['maintainVisibleContentPosition'] = {
	// This needs to be 1 to avoid using loading views as anchors.
	minIndexForVisible: 1,
	};
	if (shouldEnableAutoScrollToTopThreshold && !isLoadingData && !wasLoadingData) {
	config.autoscrollToTopThreshold = AUTOSCROLL_TO_TOP_THRESHOLD;

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

UI bug

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.

[github-actions]

⚠️ 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).

[DylanDylann]

@nkdengineer @linhvovan29546 Could you reproduce this bug anymore on latest main?

[linhvovan29546]

Yes, I can still reproduce it on the latest main.

[nkdengineer]

@nkdengineer @linhvovan29546 Could you reproduce this bug anymore on latest main?

Can reproduce.

[DylanDylann]

@linhvovan29546 @nkdengineer Which platform can you reproduce? I justed tried on both Hybrid App and IOS native but can't reproduce.

[nkdengineer]

@DylanDylann Can reproduce on Iphone SE platform.

Screen.Recording.2025-04-21.at.18.15.22.mov

[DylanDylann]

IOS is failed on latest main, I will try again tomorrow

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[DylanDylann]

@linhvovan29546 @nkdengineer Thanks for proposals. I appreciate your effort to investigate this native bug. But I am not clear on RCA from both guys. I noticed that It only happens when we swipe left (It works fine when clicking the back button on App). It will be great If we can clarify this weird behavior

[linhvovan29546]

On my side, that also happens when clicking the back button in the app

[linhvovan29546]

IMK, according to the React Native docs, this is calculated native. They mention that it can cause jumpiness and jank when setting it. I think it gets recalculated when the view changes(or focused) to reorder items, but since the second item is just removed, it tries to scroll down to make that item visible. However, because the item no longer exists, we see the flickering.

When set, the scroll view will adjust the scroll position so that the first child that is currently visible and at or beyond minIndexForVisible will not change position. This is useful for lists that are loading content in both directions, e.g. a chat thread, where new messages coming in might otherwise cause the scroll position to jump. A value of 0 is common, but other values such as 1 can be used to skip loading spinners or other content that should not maintain position.
The optional autoscrollToTopThreshold can be used to make the content automatically scroll to the top after making the adjustment if the user was within the threshold of the top before the adjustment was made. This is also useful for chat-like applications where you want to see new messages scroll into place, but not if the user has scrolled up a ways and it would be disruptive to scroll a bunch.
Caveat 1: Reordering elements in the scrollview with this enabled will probably cause jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now, don't re-order the content of any ScrollViews or Lists that use this feature.
Caveat 2: This uses contentOffset and frame.origin in native code to compute visibility. Occlusion, transforms, and other complexity won't be taken into account as to whether content is "visible" or not.

[melvin-bot]

@DylanDylann Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@DylanDylann Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[DylanDylann]

I will update today

[DylanDylann]

@linhvovan29546's proposal looks good to me

@nkdengineer I think we still should keep minIndexForVisible as 1 when there is only one message to avoid causing impact regarding scrolling

🎀 👀 🎀 C+ Reviewed

[melvin-bot]

Triggered auto assignment to @dangrous, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[dangrous]

Hm, I'm leaning a little more towards @nkdengineer's solution, having an empty View just for counting purposes seems a little hacky.

@DylanDylann can you expand on the impacts on scrolling there might be if we change minIndexForVisible in this case? So I understand more of the context

[melvin-bot]

@dangrous @kadiealexander @DylanDylann this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[DylanDylann]

@dangrous TBH, both solutions will solve this problem well. I just checked again and noticed that

can you expand on the impacts on scrolling there might be if we change minIndexForVisible in this case? So I understand more of the context

I also don't see any significant impacts on this. Because all reports always have created report action, It means that with nkdengineer's proposal, we only set minIndexForVisible to 0 if this report is empty (only has created report action) and in that case, the view cannot scroll because the report is empty.

Anyways, I am fine to go with @nkdengineer's proposal

[dangrous]

Cool! Assigning @nkdengineer

[melvin-bot]

📣 @nkdengineer 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.45-21 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: your space picture and text are flickering #61312

If no regressions arise, payment will be issued on 2025-05-22. 🎊

For reference, here are some details about the assignees on this issue:

• @DylanDylann requires payment through NewDot Manual Requests
• @nkdengineer requires payment automatic offer (Contributor)

[melvin-bot]

@DylanDylann @kadiealexander @DylanDylann The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]