fix(mobile): keep Android chat text from showing through the composer - #5582
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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. Comment |
ApprovabilityVerdict: 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
eaf87c5 to
930155c
Compare
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.Viewsilently dropsexperimental_backgroundImageon Android, leaving the strip 100% transparent. iOS is unaffected (the gradient renders natively and the liquid-glass pill blurs whatever remains).pointerEvents="none"childView(StyleSheet.absoluteFill), where React Native renders it on both platforms. Same visual design, no new dependency.patches/@react-native__gradle-plugin@0.85.3.patchbumping the foojay resolver to 1.0.0: without itexpo run:androidfails on Gradle 9 (JvmVendorSpec.IBM_SEMERUwas removed), so Android builds are currently broken from a clean checkout.The other
experimental_backgroundImageusages (NewTaskDraftScreen,ComposerToolbarTrigger) already sit on plainViews and are unaffected.Before / After
Dark mode (left: before, feed text fully legible through the composer; right: after, faded like iOS):
Light mode:
Test plan
tsc --noEmit,vp lint,vp fmtclean.🤖 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.Viewignoredexperimental_backgroundImage.The composer backdrop gradient is moved onto a non-interactive child
ViewwithStyleSheet.absoluteFillinThreadComposer, keeping the same light/dark gradients while rendering on Android. Layout animation and padding on the outerAnimated.Vieware unchanged.Also adds a pnpm patch for
@react-native/gradle-plugin@0.85.3that bumps the foojay toolchain resolver plugin to1.0.0, unblockingexpo run:androidon 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.Viewdrops theexperimental_backgroundImagegradient property, leaving the composer backdrop transparent and allowing chat text to show through.Animated.Viewto a separate plainViewwithStyleSheet.absoluteFillin ThreadComposer.tsx, which renders the gradient correctly on Android.@react-native/gradle-plugin@0.85.3to update thefoojay-resolver-conventionGradle plugin from0.5.0to1.0.0to fix an Android build issue.Macroscope summarized 930155c.