[$250] iOS - Categories - Categories icon is broken

[mitarachim]

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.49-1
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro Max / iOS 18.4
App Component: Workspace Settings

Action Performed:

1. Launch Expensify app.
2. Go to workspace settings,
3. Go to Categories.
4. If the icon is not broken, kill the app, create a new workspace, and go to Categories again.

Expected Result:

Categories icon will not be broken.

Actual Result:

Categories icon is broken.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021925367178438229868
• Upwork Job ID: 1925367178438229868
• Last Price Increase: 2025-05-22

Issue Owner

Current Issue Owner: @Pujan92

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (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]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

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

[robertjchen]

Definitely an interesting one! Doesn't appear to block core flows and only visual but should be addressed

[melvin-bot]

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

[melvin-bot]

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

[lightonalan]

This icon is broken, maybe because the icon size is incorrect. So changing the resizeMode or changing the icon size may fix this issue.
I see you're using Illustrations.FolderOpen without setting iconWidth, iconHeight or iconFill.

🔧 My plan:
Add iconWidth, iconHeight, and iconFill props to the Illustrations.FolderOpen component to ensure it renders correctly.

If necessary, adjust the resizeMode (e.g., to contain or center) depending on layout context.

Test on iOS, Android to confirm the fix works across all platforms without layout regressions.

Expensify Email: [email protected]
Upwork Profile: https://www.upwork.com/freelancers/~0150b2d0319a96dbe4

[melvin-bot]

📣 @lightonalan! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[kaushiktd]

Proposal

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

IOS Categories - Categories icon is broken

What is the root cause of that problem?

Using cachePolicy="memory-disk" here in expo-image with SVG or transparent/tinted images can cause the image to render incorrectly (e.g., black or broken) when loaded from cache.

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

To solve the problem with the broken "Categories" icon caused by cachePolicy="memory-disk", you need to adjust the cachePolicy value to either disk or none, or remove the cachePolicy altogether from here.

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

What alternative solutions did you explore? (Optional)

[JoshIri360]

Proposal

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

The "Categories" icon in Workspace Settings on iOS is broken or renders incorrectly, likely due to issues with SVG caching.

What is the root cause of that problem?

The cachePolicy used by the expo-image component for rendering SVGs on iOS can cause issues. An aggressive caching policy (like the one often preferred for performance with other image types, e.g., "memory-disk") appears to make the FolderOpen SVG for the Categories icon render incorrectly when loaded from cache.

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

We will introduce a configurable cachePolicy for SVG icons to prevent rendering issues without impacting other image caching strategies, such as the LHN avatar caching (cachePolicy="memory-disk" for URL-based images, as discussed in #57539).

The solution involves:

1. Adding an optional cachePolicy prop to ImageSVGProps (e.g., 'disk' | 'memory-disk' | 'memory' | null).
2. Updating ImageSVG/index.ios.tsx to accept and use this cachePolicy for expo-image, with a default value (e.g., 'disk' or null) chosen to ensure correct rendering for most SVGs, including the Categories icon.
3. Adding a corresponding optional cachePolicy prop to IconProps and passing it down to ImageSVG.

This allows specific SVGs to use a cachePolicy that ensures they render correctly (either by relying on the new ImageSVG default or by having a policy explicitly passed), while URL-based images (like LHN avatars) can continue to use their optimal caching strategies independently.

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

[CortneyOfstad]

Hey @Pujan92! Can you please review the proposals above as soon as you can? Thanks!

[linhvovan29546]

Reverting the offending PR here