Outlined TextInput label background visible through Modal backdrop, transparent background causes outline strikethrough

[samdaw13]

Current behaviour

Outlined TextInput renders correctly under normal conditions, the label background matches the page and everything looks fine. The issue only occurs when the TextInput is visible behind a semi-transparent overlay, such as a Modal backdrop.

When a Modal opens over a screen containing outlined TextInputs, the label's opaque background rectangle is visible through the darkened backdrop, since the label background color does not update to account for the overlay. This makes the label look like it was struck through.

Attempting to fix this by setting the background to 'transparent' does not work:

• Setting backgroundColor: 'transparent' in the style prop causes the label to fall back to theme.colors.background (see code reference below), so the opaque rectangle remains — the outline border also strikes through the label text
• Setting theme.colors.background to 'transparent' removes the opaque rectangle, but the outline border still renders through the label text as a strikethrough, since there is no surface behind the label to mask the outline gap

Expected behaviour

When the label background is set to 'transparent', the outline gap behind the label text should still be clipped/masked so the border does not strike through the label. This would allow the TextInput to look correct both normally and behind overlays.

Alternatively, the label background color could be independently configurable from the input background, so it can be changed without affecting the outline gap behavior.

How to reproduce?

1. Render an outlined TextInput with a value (so the label is floating)
2. Open a Modal over it — the label background rectangle is visible through the semi-transparent backdrop
3. Try to fix it by setting theme={{ colors: { background: 'transparent' } }}
4. The opaque rectangle is gone, but the outline border now strikes through the label text

<Modal visible={modalVisible} onDismiss={dismiss}>
  {/* modal content */}
</Modal>

<TextInput
  mode='outlined'
  label='Example'
  value='Some text'
  theme={{ colors: { background: 'transparent' } }}
/>

Note: Without the transparent override, the TextInput looks perfect on its own — this is specifically about how the label background interacts with overlays.

Preview

1. Modal closed — label looks correct:

2. Modal open — label background rectangle visible through backdrop:

3. Modal open with backgroundColor: 'transparent' set in TextInput style prop — outline strikes through label:

4. Link to the TextInput component used to capture those images
Link to project

What have you tried so far?

• Setting backgroundColor: 'transparent' in the style prop — label falls back to theme.colors.background due to the check in TextInputOutlined.tsx (line ~213-216), so the opaque rectangle persists. The outline border also strikes through the label text (see screenshot 3 above):

  const labelBackgroundColor: ColorValue =
    backgroundColor === 'transparent'
      ? theme.colors.background
      : backgroundColor;

• Setting theme.colors.background to 'transparent' — causes the outline to strike through the label text
• Toggling the background reactively (transparent when modal is open, opaque when closed) — works as a workaround but

Your Environment

software	version
ios	N/A
android	15
react-native	0.84.1
react-native-paper	5.15.0
node	25.7.0
npm or yarn	npm 11.10.1
expo sdk	N/A