[$500] iOS - Settings - A black line appears above the animation

[kbecciv]

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: 1.4.42.0
Reproducible in staging?: y
Reproducible in production?: new feature
Issue reported by: Applause - Internal Team

Issue found when executing PR #35306

Action Performed:

1. Navigate to Account settings - About - Troubleshoot
2. Swipe to the bottom of the page
3. Swipe to the top
4. Repeat steps 2 and 3 until you can repro the bug

Expected Result:

There shouldn't be a black line.

Actual Result:

A black line appears above the animation. The issue is more likely to appear of you enlarge the system font size. I'm not able to repro it at all on the smallest setting.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Screen_Recording_20240216_134904_New.Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018a96da75c014ee8f
• Upwork Job ID: 1758473498052935680
• Last Price Increase: 2024-02-16

[melvin-bot]

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

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @Gonals (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[kbecciv]

We think that this bug might be related to #wave8-collect-admins
CC @zanyrenney

[shahinyan11]

@kbecciv I think you attached the wrong video

[Gonals]

@kbecciv I think you attached the wrong video

+1

[kbecciv]

@shahinyan11 @Gonals My apologies, reattached a new video.

[brandonhenry]

Proposal

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

In the iOS app, a black line intermittently appears above an animation within the Settings > About > Troubleshoot section. This visual glitch seems to manifest more frequently when the system font size is enlarged.

What is the root cause of that problem?

The issue likely stems from a rendering problem in the animation view's layout constraints or a clipping issue where the bounds of the animated content are not properly respected. Given that the problem is more pronounced with increased font sizes, it suggests that dynamic type adjustments might be affecting the view's layout.

Examination of the Current Code

The TroubleshootPage component uses the IllustratedHeaderPageLayout to render its content, including the animation provided by LottieAnimations.Desk.

1. TroubleshootPage Component (TroubleshootPage.tsx):

   • Renders the page layout and includes an animation at the top.
   • Source: TroubleshootPage.tsx

2. IllustratedHeaderPageLayout Component:

   • Used to render the header with an illustration (animation).
   • The layout or styling of this component might be contributing to the black line issue.
   • Source: IllustratedHeaderPageLayout.tsx

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

1. Check Lottie Animation Rendering:

   • Investigate if the Lottie component or the specific animation used (illustration prop) has any intrinsic properties that might cause the black line to appear.
   • Adjust the animation file or its rendering properties if necessary.

2. Adjust Header Layout Styles:

   • Although the layout seems standard, double-check the styles applied to the headerContent and headerContainerStyles to ensure there are no unintended borders or overflows that might cause the black line.
   • Example snippet for style adjustments:

     headerContainerStyles={[styles.justifyContentCenter, styles.w100, shouldLimitHeight && styles.centralPaneAnimation, { overflow: 'hidden' }]}

3. Overlay Content Check:

   • If overlayContent is used, ensure that it does not introduce any layout issues that could result in the black line. Adjust the overlay content or its styling as needed.

4. Test with Different System Settings:

   • Since the issue is more pronounced with enlarged system font sizes, test the layout and animation rendering with various system settings to ensure the problem is resolved.

5. Fallback Solution:

   • If the issue persists and is specific to iOS, consider applying a background-colored view or border that matches the page background to mask the line as a temporary workaround.

Implementation Notes:

• Continue to ensure that any style adjustments do not negatively impact the layout on other platforms or with different settings.

By focusing on the animation rendering and the layout styles of the IllustratedHeaderPageLayout, the aim is to identify and resolve the root cause of the black line issue on the Troubleshoot page in the iOS app. Hopefully this is a good starting point as I believe the issue can be resolved with a little more digging if not

[s77rt]

@brandonhenry Thanks for the proposal. Your RCA is not clear. Can you pinpoint the root cause?

[s77rt]

@Gonals Can you deprioritize this? It does not seem like a deploy blocker. I can't even reproduce. Maybe we should just close?

[Beamanator]

Good call, I'm at least going to mark this NAB and let @Gonals decide if we should close - I couldn't reproduce on latest staging, iOS native - so probably we should just close this out

[Gonals]

Let's go ahead and close for now