fix(mobile): restore header blur and reliable swipe-back on new iOS versions#3647
Open
bmdavis419 wants to merge 4 commits into
Open
fix(mobile): restore header blur and reliable swipe-back on new iOS versions#3647bmdavis419 wants to merge 4 commits into
bmdavis419 wants to merge 4 commits into
Conversation
Recent iOS betas stopped drawing the implicit blur behind transparent navigation bars, leaving white header text over raw scrolling content. Set headerBlurEffect: systemChromeMaterial explicitly on the three transparent headers (home, thread detail, thread index layout). Swipe-back was also unreliable on thread detail: the drawer-open pan gesture's hit slop covered the entire left edge, stealing touches from the native interactive-pop gesture below the header. Confine that pan to the top strip where it can actually complete, and enable fullScreenGestureEnabled on the thread, review, and files screens so back-swipe works from anywhere on the screen. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The trait-adaptive systemChromeMaterial blur resolves to its light variant on the new iOS beta even while the app renders dark, washing the header out white. Pick systemChromeMaterialLight/Dark explicitly from the app color scheme via a shared useHeaderBlurEffect hook. The black void revealed behind the outgoing screen during swipe-back came from the custom slide_from_right animator combined with transparent screen content. Keep the native default push animation on iOS (identical look, proper parallax with the previous screen visible underneath) and give stack screens an opaque themed background. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Review follow-ups: - Extract the iOS push-animation choice into lib/pushScreenAnimation and use it in every stack that pushed with slide_from_right (root, thread, git, settings, connections, new) so the black-void workaround cannot drift between files. - Apply useHeaderBlurEffect to the two transparent headers the first pass missed: the review sheet and the files tree screen. - Drop String() around ColorValue contentStyle backgrounds; an unresolved CSS variable would otherwise stringify to the invalid color "undefined" instead of a harmless no-op. - Document why the terminal screen intentionally omits fullScreenGestureEnabled. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
github-actions
Bot
added
the
vouch:trusted
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (13)
👮 Files not reviewed due to content moderation or server errors (13)
📝 Walkthrough
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
github-actions
Bot
added
the
size:L
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
Contributor
ApprovabilityVerdict: Approved Straightforward iOS UI fix that restores header blur and swipe-back navigation by introducing two small platform-specific utilities and applying them consistently across layout files. Changes are self-contained with no backend or security implications. You can customize Macroscope's approvability policy. Learn more. |
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
macroscopeapp
Bot
dismissed
their stale review
Dismissing prior approval to re-evaluate 67aedfc
Author
|
@coderabbitai review |
✅ Action performedReview finished.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What Changed
Two iOS regressions that show up on recent iOS releases (reproduced on an iPhone 17 Pro Max running the current iOS beta), plus review follow-ups:
1. Transparent headers lost their blur material.
Every transparent header (
headerTransparent: true) relied on iOS drawing its implicit material behind the navigation bar. Recent iOS betas stopped doing that, so white header titles sat over raw scrolling content. And the trait-adaptivesystemChromeMaterialresolves to its light variant there even while the app renders dark — a washed-out white glass over dark content.Fix: a shared
useHeaderBlurEffect()hook pickssystemChromeMaterialDark/Lightexplicitly from the app color scheme (useColorScheme, the same signal uniwind's CSS variables follow). Applied to every transparent header: home, thread detail, thread index layout, review sheet, and files tree.2. Swipe-back showed a black void and was hard to trigger.
animation: "slide_from_right"switches react-native-screens from the native UIKit push transition to its custom animator, which does not composite the previous screen underneath during interactive swipe-back → black void. iOS now uses the default push animation (visually the same slide, with proper parallax); Android keepsslide_from_right. The choice lives in one sharedpushScreenAnimationconstant used by all six stacks that push screens.transparentto the themed screen color so nothing can show through during transitions.fullScreenGestureEnabled: trueon the thread, review, and files screens so back-swipe works from anywhere, not just the left edge. Deliberately not applied to the terminal screen (it consumes horizontal pans) — commented inline.Why
On current iOS betas the mobile app's headers render with no material at all (white text clashing with content), and back navigation frequently doesn't respond unless grabbed at the very top of the left edge. Both verified fixed on-device.
UI Changes
Tested on a physical iPhone 17 Pro Max on the current iOS beta (Release build, dark mode): header material renders, swipe-back works mid-screen, no void.
Checklist
🤖 Generated with Claude Code
Note
Restore header blur and reliable swipe-back gestures on iOS in the mobile app
useHeaderBlurEffecthook that returns a blur material string matching the current color scheme, applied to headers across home, thread, review, and files screens.pushScreenAnimationconstant that selectsdefaulton iOS andslide_from_righton Android, replacing hardcoded values across all stack navigators.fullScreenGestureEnabledon thread, review, and file screens so the system edge-swipe gesture works along the full left edge.ThreadDetailScreento the top-left region so it no longer hijacks the system back-swipe below the header.Macroscope summarized 67aedfc.