[Due for payment 2026-04-28] [$250] Android & iOS - Wallet - "Need to add company cards?" icon is blank on native apps

[lanitochka17]

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: 9.3.58-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #83211
Email or phone of affected tester (no customers): jsdjosidjiojisojio3@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: User Settings

Action Performed:

1. Launch Expensify app.
2. Go to Account > Wallet.
3. Scroll down to Assigned cards.

Expected Result:

"Need to add company cards?" icon will not be blank on native apps.

Actual Result:

"Need to add company cards?" icon is blank on native apps.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @parasharrajat

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022042674292361297862
• Upwork Job ID: 2042674292361297862
• Last Price Increase: 2026-04-10

[MelvinBot]

Proposal

What is the root cause of that problem?

The MenuItem rendering the "Need to add company cards?" illustration forces a monochrome fill color onto the icon, which breaks multi-color SVG illustrations on native platforms.

In WalletPage/index.tsx, the MenuItem is rendered with icon={illustrations.VerticalCreditCards} but without displayInDefaultIconColor or a custom iconFill. Since displayInDefaultIconColor defaults to false, MenuItem.tsx sets fill to StyleUtils.getIconFillColor(...) (a solid theme color).

On web, the SVG is rendered as a React component via SVGR, and the CSS <style> classes in the SVG (.st0{fill:#e4bc07}, .st3{fill:#ff7101}, etc.) take precedence over the fill prop — so the illustration displays correctly with its original colors.

On native (Android/iOS), the SVG asset is rendered via expo-image in ImageSVG/index.android.tsx with tintColor={fill}. Since the native SVG decoder doesn't fully process CSS <style> class-based fills, the paths are effectively transparent, and tintColor has nothing to colorize — resulting in a blank icon.

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

Pass displayInDefaultIconColor to the MenuItem in WalletPage/index.tsx so that no fill/tintColor is forced onto the illustration:

<MenuItem
    ...
    icon={illustrations.VerticalCreditCards}
    displayInDefaultIconColor
    ...
/>

This prevents MenuItem from injecting a theme fill color, allowing the illustration to render with its original multi-color SVG fills on native — matching the web behavior.

What alternative solutions did you explore? (Optional)

1. Converting the SVG to use inline fill attributes instead of CSS <style> classes — this would be a more systemic fix but higher risk since inlineStyles is already explicitly disabled in compressSvg.ts due to known Android fill issues.
2. Passing iconFill={undefined} explicitly — this would also work but displayInDefaultIconColor is the intended API for this purpose and is more readable.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

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

[melvin-bot]

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

[wildan-m]

Proposal

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

The "Need to add company cards?" icon is blank/invisible on native apps (Android and iOS) in the Wallet page.

What is the root cause of that problem?

The SVG file simple-illustration__vertical-credit-cards.svg uses CSS <style> blocks with class selectors (.st0, .st1, etc.) to define fills and strokes on its path elements. This was introduced when the SVG was replaced with an Adobe Illustrator export in PR #83211.

On web, this works because @svgr/webpack processes SVGs into React components that properly handle CSS. On native however, SVG files are treated as static image assets and rendered through expo-image, which uses native platform decoders that do not support CSS <style> elements within SVGs. Without CSS class resolution, none of the <path> elements have any fill or stroke applied, so the icon renders blank.

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

Convert the CSS class-based styling in the SVG to inline fill/stroke attributes directly on each <path> element. This preserves the exact same visual appearance while ensuring compatibility with native SVG renderers.

The mapping from CSS classes to inline attributes:

• .st0 → fill="#e4bc07" (gold card body)
• .st1 → fill="none" stroke="#002140" stroke-linecap="round" stroke-linejoin="round" (card outlines)
• .st2 → fill="#002140" stroke="#002140" stroke-linecap="round" stroke-linejoin="round" (dark stripe)
• .st3 → fill="#ff7101" (orange card body)
• .st4 → fill="#fbccff" (small detail)
• .st5 → fill="#002140" (dark rectangle)

Compare branch: https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/87665-fix-vertical-credit-cards-icon?expand=1

[abbasifaizan70]

Proposal

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

The "Need to add company cards?" icon is blank/invisible on native apps (Android and iOS) in the Wallet page.

What is the root cause of that problem?

The "Need to add company cards?" Wallet row uses VerticalCreditCards, and this specific illustration renders blank on native in this MenuItem context. While testing the replacement icon, we also saw that MenuItem applies a theme tint by default, which can make multi-color illustrations look incorrect unless we explicitly opt out of tinting.

This initialization includes VerticalCreditCards in the Wallet illustration set.
Because this asset is selected here, the native rendering issue starts from this line.

App/src/pages/settings/Wallet/WalletPage/index.tsx

Line 100 in e0067ad

const illustrations = useMemoizedLazyIllustrations(['MoneyIntoWallet', 'VerticalCreditCards']);

This Wallet CTA is the exact row where users see the icon issue.
It renders illustrations.VerticalCreditCards, which appears blank on native.

App/src/pages/settings/Wallet/WalletPage/index.tsx

Lines 719 to 731 in e0067ad

	{!hasAssignedCard ? (
	<MenuItem
	iconHeight={48}
	iconWidth={48}
	containerStyle={styles.hoveredComponentBG}
	shouldShowRightIcon
	icon={illustrations.VerticalCreditCards}
	wrapperStyle={styles.sectionMenuItemTopDescription}
	title={translate('personalCard.lookingForCompanyCards')}
	description={translate('personalCard.lookingForCompanyCardsDescription')}
	titleStyle={styles.textStrong}
	onPress={openCompanyCardFlow}
	/>

This import points to the specific SVG file used for VerticalCreditCards.
The problematic visual comes from this source asset reference.

App/src/components/Icon/chunks/illustrations.chunk.ts

Line 196 in e0067ad

import VerticalCreditCards from '@assets/images/simple-illustrations/simple-illustration__vertical-credit-cards.svg';

This fill logic explains why replacement illustrations can look muted on native.
Without opting out, MenuItem applies theme tint instead of original illustration colors.

App/src/components/MenuItem.tsx

Lines 911 to 923 in e0067ad

	fill={
	// eslint-disable-next-line no-nested-ternary
	displayInDefaultIconColor
	? undefined
	: typeof iconFill === 'function'
	? iconFill(isHovered)
	: (iconFill ??
	StyleUtils.getIconFillColor(
	getButtonState(focused || isHovered, pressed, success, disabled, interactive),
	true,
	isPaneMenu,
	))
	}

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

We should switch this Wallet row to CreditCardsNew (already used elsewhere), and render it with displayInDefaultIconColor so native keeps the original multi-color illustration instead of applying a theme tint.

App/src/pages/settings/Wallet/WalletPage/index.tsx

Line 100 in e0067ad

const illustrations = useMemoizedLazyIllustrations(['MoneyIntoWallet', 'VerticalCreditCards']);

icon={illustrations.CreditCardsNew}

App/src/pages/settings/Wallet/WalletPage/index.tsx

Line 725 in e0067ad

icon={illustrations.VerticalCreditCards}

const illustrations = useMemoizedLazyIllustrations(['MoneyIntoWallet', 'CreditCardsNew']);

App/src/pages/settings/Wallet/WalletPage/index.tsx

Lines 719 to 732 in e0067ad

	{!hasAssignedCard ? (
	<MenuItem
	iconHeight={48}
	iconWidth={48}
	containerStyle={styles.hoveredComponentBG}
	shouldShowRightIcon
	icon={illustrations.VerticalCreditCards}
	wrapperStyle={styles.sectionMenuItemTopDescription}
	title={translate('personalCard.lookingForCompanyCards')}
	description={translate('personalCard.lookingForCompanyCardsDescription')}
	titleStyle={styles.textStrong}
	onPress={openCompanyCardFlow}
	/>
	) : null}

{!hasAssignedCard ? (
    <MenuItem
        iconHeight={48}
        iconWidth={48}
        containerStyle={styles.hoveredComponentBG}
        shouldShowRightIcon
        icon={illustrations.CreditCardsNew}
        displayInDefaultIconColor
        wrapperStyle={styles.sectionMenuItemTopDescription}
        title={translate('personalCard.lookingForCompanyCards')}
        description={translate('personalCard.lookingForCompanyCardsDescription')}
        titleStyle={styles.textStrong}
        onPress={openCompanyCardFlow}
    />
) : null}

Demo

[github-actions]

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

[github-actions]

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

[parasharrajat]

@MelvinBot implement this.