Repository navigation
feat(mobile): Liquid Glass floating tab bar on iOS 26 - #14707
Merged
Merged
Conversation
On iOS 26 the bottom tab bar is now a floating Liquid Glass pill, with a highlight that springs to the active tab. When a track is loaded, the play bar is its own glass pill above it, and the collapsed now-playing drawer is see-through so content shows around both pills. The full player's background fades in as the drawer opens. The pills take up the same space as the old bar, so BottomChin, chat and the drawer offsets are unchanged. Android, iOS < 26 and home-button iPhones keep the classic bar. Uses @callstack/liquid-glass. The library is only required when its native module is in the binary, so OTA JS on older builds falls back to the classic bar instead of crashing. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
|
Dependency limit exceeded — report not shown. This pull request scan exceeded the 10,000-dependency limit applied to this scan, so the results are incomplete and may be inaccurate. To avoid reporting false positives, Socket has not posted a report. Upgrade your plan to raise the dependency limit and get complete reports, or view the partial scan in the dashboard. Socket is always free for open source. If this is a non-commercial open source project, contact us to request a free Team account. |
dylanjeffers
added a commit
that referenced
this pull request
Nov 4, 2026
## What Brings the header in line with the iOS 26 floating glass tab bar (#14707), and makes the bottom bar collapse instead of hiding. - **Root tab headers** (Feed, Trending, Library): one floating glass capsule with avatar, title and the screen's action. Pills float below it with no slab behind them. A background fade under the status bar keeps scrolling content legible. - **Explore**: the avatar and search field share the same capsule. The search field and category pills stay pinned and never hide. - **Scrolling down**: the header hides as before. The floating tab bar collapses rather than hiding: - it shrinks to a glass circle with the active tab; - a search button grows in on the right; - the play bar drops in between them and loses its queue button. - **Collapsed bar actions**: tapping the active tab scrolls to the top, which expands the bar again. Search opens Explore with the field focused. - **Play bar**: no heart, title and artist on separate lines, 40pt artwork and play button. `PLAY_BAR_HEIGHT` 46 → 52, so the drawer, bottom insets and chat offsets follow. ## Fallbacks The glass and the collapsing bar need `@callstack/liquid-glass` (every binary since #14707) on iOS 26. The classic bar (Android, home-button iPhones, iOS < 26) keeps hiding on scroll, with the play bar dropping onto the safe area. Header capsules there are frosted (iOS) or solid with a shadow (Android). ## Notes - The fades are drawn with react-native-svg `stopOpacity`, because it drops the alpha channel of a stop's colour (harmony's `LinearGradient` rendered them solid). - The search button scales in from a point instead of fading: the system glass doesn't render under a parent that starts at zero opacity. - Explore content doesn't scroll behind its header yet; that needs every Explore/search list re-padded. ## Testing - iOS 26.5 simulator (Release build), light and dark: - Feed, Trending, Library and Explore; - collapse and expand on scroll; - tapping the tab circle; - search from the collapsed bar. - `tsc` and eslint pass. - Not yet checked: Android, iOS < 26, home-button devices. 🤖 Generated with [Claude Code](https://claude.com/claude-code) — 💍 Frodo --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
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
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
On iOS 26 the bottom tab bar becomes a floating Liquid Glass pill, styled like the iOS 26 system tab bar.
How
@callstack/liquid-glass0.8.2 (UIGlassEffect; needs RN 0.80+ and Xcode 26). This adds a native module, so the full effect needs a new binary.core/Screen/LiquidGlass.tschecksTurboModuleRegistry.get('NativeLiquidGlassModule')before requiring the library. The library looks up its module withgetEnforcingon import, which would crash OTA JS running on older binaries; with the check, those builds just keep the classic bar.useFloatingTabBardecides when to float: iOS 26+, and only on phones with a home indicator. The pill takes up exactly the old bar's space (BOTTOM_BAR_HEIGHT+ bottom inset), soBottomChin, the chat screen and the drawer offsets are untouched.Testing
tscand eslint clean. No jest tests cover these components.🤖 Generated with Claude Code