Skip to content

feat(mobile): Liquid Glass floating tab bar on iOS 26 - #14707

Merged
dylanjeffers merged 1 commit into
mainfrom
feat/mobile-liquid-glass-tab-bar
Oct 26, 2026
Merged

dylanjeffers merged 1 commit into
mainfrom
feat/mobile-liquid-glass-tab-bar

Conversation

@dylanjeffers

Copy link
Copy Markdown
Contributor

What

On iOS 26 the bottom tab bar becomes a floating Liquid Glass pill, styled like the iOS 26 system tab bar.

  • A highlight behind the active tab springs to the new tab when you switch. The Lottie icons and notification badge are unchanged.
  • When a track is loaded, the play bar is its own glass pill above the tab pill. The collapsed now-playing drawer is now see-through, so content shows around both pills. Before, the drawer's white background filled the space behind them.
  • The full player's background fades in as the drawer opens, so the open player looks the same as before.
  • Hide-on-scroll still moves both pills off screen.

How

  • Adds @callstack/liquid-glass 0.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.ts checks TurboModuleRegistry.get('NativeLiquidGlassModule') before requiring the library. The library looks up its module with getEnforcing on import, which would crash OTA JS running on older binaries; with the check, those builds just keep the classic bar.
  • useFloatingTabBar decides 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), so BottomChin, the chat screen and the drawer offsets are untouched.
  • Android, iOS < 26 and home-button iPhones keep the classic bar.

Testing

  • iOS 26.5 sim, Release build, light and dark mode: tab switching, play bar pill, opening and closing the full player, hide/show on scroll.
  • Android API 36 emulator, release build: classic tab bar, play bar and full player unchanged.
  • tsc and eslint clean. No jest tests cover these components.
  • Not tested: home-button iPhones (they take the classic path) and a physical device.

🤖 Generated with Claude Code

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>
@changeset-bot

changeset-bot Bot commented Oct 26, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: d2d4eba

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@socket-security

Copy link
Copy Markdown

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
dylanjeffers merged commit 94a5d74 into main Oct 26, 2026
24 checks passed
@dylanjeffers
dylanjeffers deleted the feat/mobile-liquid-glass-tab-bar branch October 26, 2026 19:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant