Skip to content

fix: macOS Designed for iPhone — liquid glass background + mouse drag support#598

Open
isaacrowntree wants to merge 2 commits intolodev09:mainfrom
isaacrowntree:fix/macos-designed-for-iphone-liquid-glass
Open

fix: macOS Designed for iPhone — liquid glass background + mouse drag support#598
isaacrowntree wants to merge 2 commits intolodev09:mainfrom
isaacrowntree:fix/macos-designed-for-iphone-liquid-glass

Conversation

@isaacrowntree
Copy link
Contributor

@isaacrowntree isaacrowntree commented Mar 10, 2026

Summary

Two fixes for macOS "Designed for iPhone/iPad" compatibility mode (Apple Silicon):

1. Liquid glass background

sheet.backgroundEffect with UIColorEffect is silently ignored by the macOS compatibility layer. This causes the default iOS 26 liquid glass material to show through instead of the configured backgroundColor. The same binary works correctly on real iOS devices (tested iPhone 17 Pro, iOS 26.2).

Fix: Remove the early return when NSProcessInfo.processInfo.isiOSAppOnMac is YES, so view.backgroundColor is also set as a fallback alongside backgroundEffect.

2. Mouse drag gestures

UISheetPresentationController's built-in pan gesture doesn't respond to mouse/trackpad input on Mac. Users can only interact with the sheet by tapping the grabber.

Fix: Add a custom UIPanGestureRecognizer on the presentedView (guarded by isiOSAppOnMac) that computes a projected landing position on release using the drag's cumulative translation + velocity (decelerating over ~0.3s), then snaps to the nearest detent. This mimics native iOS release-to-snap behavior.

  • Gesture covers the header/grabber area — scroll view content remains scrollable at any detent
  • Uses resolvedHeightForIndex: (now exposed in TrueSheetDetentCalculator.h) for accurate detent position calculations
  • No mid-drag snapping = no jitter
  • Both fixes are gated behind NSProcessInfo.processInfo.isiOSAppOnMac (iOS 14+) — zero change on real iOS devices

Test plan

  • Run on macOS "Designed for iPhone/iPad" — sheet has solid backgroundColor, no liquid glass
  • Run on macOS — drag header/grabber area up/down with mouse, release to snap to nearest detent
  • Run on macOS — fast flick up/down snaps in the flick direction
  • Run on macOS — scroll view content scrolls normally at all detents
  • Run on physical iOS device (iOS 26+) — sheet background and drag unchanged
  • Run on iOS Simulator — no regression
  • Test with backgroundColor set
  • Test with backgroundBlur set (no backgroundColor)
  • Test with dismissible={false} and dismissible={true}

Reproduction app: https://github.com/isaacrowntree/truesheet-macos-liquid-glass-repro

🤖 Generated with Claude Code

@vercel
Copy link

vercel bot commented Mar 10, 2026

@isaacrowntree is attempting to deploy a commit to the Jovanni's projects Team on Vercel.

A member of the Team first needs to authorize it.

isaacrowntree added a commit to isaacrowntree/truesheet-macos-liquid-glass-repro that referenced this pull request Mar 10, 2026
…hone

Demonstrates that sheet.backgroundEffect (UIColorEffect) is ignored on
macOS compatibility layer, causing liquid glass to show through instead
of the configured backgroundColor.

Ref: lodev09/react-native-true-sheet#598
… support

Two fixes for macOS "Designed for iPhone/iPad" compatibility mode:

1. **Liquid glass background**: `sheet.backgroundEffect` with `UIColorEffect`
   is silently ignored on Mac, causing liquid glass to show instead of the
   configured `backgroundColor`. Fix: remove the early return when
   `isiOSAppOnMac`, so `view.backgroundColor` is also set as a fallback.

2. **Mouse drag gestures**: `UISheetPresentationController`'s built-in pan
   gesture doesn't respond to mouse/trackpad input on Mac. Fix: add a custom
   `UIPanGestureRecognizer` on the presented view (guarded by `isiOSAppOnMac`)
   that computes a projected landing position on release using drag translation
   + velocity, then snaps to the nearest detent. Mimics native iOS release
   behavior without mid-drag jitter.

   - Gesture is on `presentedView` only (header/grabber area) — scroll view
     content remains scrollable at any detent.
   - Uses `resolvedHeightForIndex:` (now exposed in `TrueSheetDetentCalculator.h`)
     for accurate detent position calculations.
   - Detection: `NSProcessInfo.processInfo.isiOSAppOnMac` (iOS 14+).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@isaacrowntree isaacrowntree force-pushed the fix/macos-designed-for-iphone-liquid-glass branch from 14d92cb to e9bead6 Compare March 10, 2026 01:14
@github-actions
Copy link

Hey @isaacrowntree, this PR is missing a changelog entry.

Add the following under the Unreleased section in CHANGELOG.md:

- **platform**: Description. ([#598](https://github.com/lodev09/react-native-true-sheet/pull/598) by [@isaacrowntree](https://github.com/isaacrowntree))

See CONTRIBUTING.md for more details.

@isaacrowntree isaacrowntree changed the title fix: solid background fallback for macOS Designed for iPhone mode fix: macOS Designed for iPhone — liquid glass background + mouse drag support Mar 10, 2026
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant