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

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:

Navigate to Account settings - About - Troubleshoot
Swipe to the bottom of the page
Swipe to the top
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?

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

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

@s77rt

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

👋 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:

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

@Gonals

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

@zanyrenney

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

@kbecciv

@kbecciv I think you attached the wrong video

@kbecciv

@kbecciv I think you attached the wrong video

+1

@shahinyan11

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

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.

TroubleshootPage Component (TroubleshootPage.tsx):
- Renders the page layout and includes an animation at the top.
- Source: TroubleshootPage.tsx
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?

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.
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' }]}
```
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.
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.
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

@brandonhenry

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

@Gonals

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

@Gonals

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

Let's go ahead and close for now

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

Examination of the Current Code

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

Implementation Notes:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Feb 16, 2024

melvin-bot commented on Feb 16, 2024

github-actions commented on Feb 16, 2024

melvin-bot commented on Feb 16, 2024

kbecciv commented on Feb 16, 2024

shahinyan11 commented on Feb 16, 2024

Gonals commented on Feb 16, 2024

kbecciv commented on Feb 16, 2024

brandonhenry commented on Feb 16, 2024

Proposal

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

What is the root cause of that problem?

Examination of the Current Code

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

Implementation Notes:

s77rt commented on Feb 17, 2024

s77rt commented on Feb 17, 2024

Beamanator commented on Feb 19, 2024

Gonals commented on Feb 19, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions