[Due for payment 2025-07-17] Text input has transparent backround on sign in screen

[izarutskaya]

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.1.74-2
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): #expensify_bugs

Action Performed:

1. Open the App. If you are logged in, log out.

Expected Result:

It should use our appBG color for the background of the component.

Actual Result:

Text input has transparent backround on sign in screen.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• 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

Issue Owner

Current Issue Owner: @Krishna2323

[melvin-bot]

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

[dominictb]

Please assign me and @Krishna2323 here as a patch from #59518

[MobileMage]

Proposal

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

The text input field on the sign-in screen has a transparent background instead of using the app's background color (theme.appBG). This creates a visual issue where the text input appears to have no background, making it difficult to see and potentially affecting usability.

What is the root cause of that problem?

The root cause is in the textInputContainer style definition in src/styles/index.ts. The style explicitly sets backgroundColor: 'transparent' on line 1301, which overrides any background color that should be inherited from the theme. This was likely done to allow the text input to blend with its container, but it's causing the input to appear transparent on the sign-in screen where the background styling is different.

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

We should modify the textInputContainer style to use theme.componentBG instead of 'transparent' for the backgroundColor. This will ensure the text input has a proper background color that matches the app's design system while maintaining consistency across different screens.

// In src/styles/index.ts, line ~1301
textInputContainer: {
    flex: 1,
    justifyContent: 'center',
    height: '100%',
    backgroundColor: theme.appBG, // Change from 'transparent'
    overflow: 'hidden',
    borderWidth: 1,
    padding: 8,
    paddingBottom: 0,
    borderRadius: 8,
    borderColor: theme.border,
},

This change will provide the text input with a proper background color that adapts to the current theme (light/dark mode) and maintains visual consistency with other form elements in the app.

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

[Krishna2323]

Proposal

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

Text input has transparent background on sign in screen

What is the root cause of that problem?

• No background provided for the login form input:
  

  App/src/pages/signin/LoginForm/BaseLoginForm.tsx

  Line 234 in 65a40c2

  <TextInput

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

• Pass prop textInputContainerStyles={{backgroundColor: theme.appBG}} to the TextInput component.

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)

Result

[Krishna2323]

@dominictb, this is not a regression, right?

[shawnborton]

Hmm maybe it's not technically a regression, though it's odd that we would have any of the new text input styles without a background color. In the design guidance we gave, we asked that all new text input styles include the background color.

[MobileMage]

Proposal

Updated here