Android - Get started here banner message not properly displayed when relogging into account

[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.0.75-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): [email protected]
Issue reported by: Applause -Internal Team
**Component ** Left Hand Navigation (LHN)

Action Performed:

1. Launch Hybrid app
2. Sign in with new account (Note: Get started here! banner is displayed horizontally aligned with the Concierge chat)
3. Sign out of the account
4. Sign in back

Expected Result:

Get started here! banner message should be horizontally positioned in align with the Concierge chat

Actual Result:

Get started here banner message not properly displayed when relogging into account. The message gets vertically aligned & the text is not visible at all

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

Bug6692565_1734028937924.az_recorder_20241212_133625.mp4

View all open jobs on GitHub

[melvin-bot]

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

[linhvovan29546]

Proposal

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

Get started here banner message not properly displayed when relogging into account. The message gets vertically aligned & the text is not visible at all

What is the root cause of that problem?

The BaseGenericTooltip component currently uses the onLayout handler with a setTimeout to measure and update the contentMeasuredWidth. This approach introduces inaccuracies in width measurement, after 300ms, the measure function returns an incorrect (too small) width. This causes setContentMeasuredWidth to update with the wrong value, leading to layout issues.

App/src/components/Tooltip/BaseGenericTooltip/index.native.tsx

Lines 120 to 126 in e27c5ea

	setTimeout(() => {
	InteractionManager.runAfterInteractions(() => {
	target.measure((x, y, width) => {
	setContentMeasuredWidth(width);
	});
	});
	}, CONST.ANIMATED_TRANSITION);

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

• Remove the setTimeout, measure logic from the onLayout handler.
• Use e.nativeEvent.layout directly to get the width and height
• Use useSharedValue to store the width and height, passing these values directly to animationStyle.
• The new code is as follows.

   const contentMeasuredWidth = useSharedValue<number>(0)
    const wrapperMeasuredHeight = useSharedValue<number>(0)
...
    const animationStyle = useAnimatedStyle(() => {
        return StyleUtils.getTooltipAnimatedStyles({ tooltipContentWidth: contentMeasuredWidth.get(), tooltipWrapperHeight: wrapperMeasuredHeight.get(), currentSize: animation });
    });
...
                onLayout={(e) => {
                    const { height, width } = e.nativeEvent.layout;
                    if (height === wrapperMeasuredHeight.get()) {
                        return;
                    }
                    contentMeasuredWidth.set(width)
                    wrapperMeasuredHeight.set(height);
                    setContentMeasuredWidth(width)
                    setWrapperMeasuredHeight(height)
                }}

Detail

Demo Videos

Before	After
before.mp4	after.mp4

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? (Optional)

N/A

[linhvovan29546]

My proposal also addresses this issue.