Skip to content

fix(mobile): keep Android chat text from showing through the composer - #5582

Merged
juliusmarminge merged 1 commit into
pingdotgg:mainfrom
PollyGlot:t3code/android-chat-text-behind-textfield
Aug 7, 2026
Merged

fix(mobile): keep Android chat text from showing through the composer#5582
juliusmarminge merged 1 commit into
pingdotgg:mainfrom
PollyGlot:t3code/android-chat-text-behind-textfield

Conversation

@PollyGlot

@PollyGlot PollyGlot commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Summary

On Android, thread feed text stays fully legible as it scrolls behind the composer, because the composer's backdrop gradient never renders there: Reanimated's Animated.View silently drops experimental_backgroundImage on Android, leaving the strip 100% transparent. iOS is unaffected (the gradient renders natively and the liquid-glass pill blurs whatever remains).

  • Move the backdrop gradient from the animated container onto a plain pointerEvents="none" child View (StyleSheet.absoluteFill), where React Native renders it on both platforms. Same visual design, no new dependency.
  • Ship patches/@react-native__gradle-plugin@0.85.3.patch bumping the foojay resolver to 1.0.0: without it expo run:android fails on Gradle 9 (JvmVendorSpec.IBM_SEMERU was removed), so Android builds are currently broken from a clean checkout.

The other experimental_backgroundImage usages (NewTaskDraftScreen, ComposerToolbarTrigger) already sit on plain Views and are unaffected.

Before / After

Dark mode (left: before, feed text fully legible through the composer; right: after, faded like iOS):

before/after dark

Light mode:

before/after light

Test plan

  • Reproduced on a Pixel emulator (API 35, dev client built from this branch): before the fix, list text renders fully opaque behind the composer pill and toolbar.
  • After the fix, text scrolling behind the composer fades out in both light and dark mode, collapsed and expanded (keyboard open) states.
  • At-rest layout unchanged: content still parks above the composer (bottom inset path untouched).
  • tsc --noEmit, vp lint, vp fmt clean.

🤖 Generated with Claude Code


Note

Low Risk
Scoped mobile UI layering fix and a build-tooling patch; no auth, data, or server behavior changes.

Overview
Fixes Android thread UI where feed text stayed fully readable behind the composer because Reanimated’s Animated.View ignored experimental_backgroundImage.

The composer backdrop gradient is moved onto a non-interactive child View with StyleSheet.absoluteFill in ThreadComposer, keeping the same light/dark gradients while rendering on Android. Layout animation and padding on the outer Animated.View are unchanged.

Also adds a pnpm patch for @react-native/gradle-plugin@0.85.3 that bumps the foojay toolchain resolver plugin to 1.0.0, unblocking expo run:android on Gradle 9 where the older resolver references removed APIs.

Reviewed by Cursor Bugbot for commit 930155c. Bugbot is set up for automated code reviews on this repo. Configure here.

Note

Fix Android chat text showing through the composer backdrop gradient

On Android, Animated.View drops the experimental_backgroundImage gradient property, leaving the composer backdrop transparent and allowing chat text to show through.

  • Moves the gradient from the outer Animated.View to a separate plain View with StyleSheet.absoluteFill in ThreadComposer.tsx, which renders the gradient correctly on Android.
  • Also patches @react-native/gradle-plugin@0.85.3 to update the foojay-resolver-convention Gradle plugin from 0.5.0 to 1.0.0 to fix an Android build issue.

Macroscope summarized 930155c.

@coderabbitai

coderabbitai Bot commented Aug 7, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 042764c2-d864-45ca-b64c-5c95b32e8fb3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions github-actions Bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:M 30-99 changed lines (additions + deletions). labels Aug 7, 2026
@macroscopeapp

macroscopeapp Bot commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Approved eaf87c5

This is a straightforward bug fix that moves an existing gradient style from an Animated.View (where it was silently dropped on Android) to a plain View. No behavior change beyond fixing the visual bug. The accompanying gradle patch is a minor toolchain version bump.

You can customize Macroscope's approvability policy. Learn more.

- move the gradient to a plain View since Reanimated drops experimental_backgroundImage on Android, which let feed text show through the composer
- patch @react-native/gradle-plugin to use foojay-resolver 1.0.0 for Gradle builds
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:M 30-99 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants