Skip to content

fix(ios): correct vertical pager layout and scroll edge effects - #1149

Open
ArekChr wants to merge 1 commit into
callstack:masterfrom
ArekChr:fix/ios-vertical-pager-safe-area
Open

ArekChr wants to merge 1 commit into
callstack:masterfrom
ArekChr:fix/ios-vertical-pager-safe-area

Conversation

@ArekChr

@ArekChr ArekChr commented Sep 24, 2026

Copy link
Copy Markdown

Summary

A vertical pager under a transparent navigation bar can shift its pages to the left and cover their content with a sideways blur/gradient on iOS 26. This reproduces with 9.0.4 in a sheet containing a navigation controller.

The vertical implementation rotates a horizontal TabView by 90 degrees. Rotation changes rendering but does not change the page's layout bounds, so the page can be centered in an inset frame in the wrong coordinate space. Native scroll edge effects also rotate with the underlying collection view.

This change:

  • Gives each rotated page the matching layout dimensions and ignores safe area for vertical page placement and measurement.
  • Hides the four collection-view edge effects for vertical pagers on iOS 26 and later.

Related to #1099; this PR addresses the vertical layout case and does not claim to resolve every safe-area issue described there. No public API changes.

Test Plan

What's required for testing (prerequisites)?

An iOS 26 simulator/device and a native rebuild. Verification used Xcode 26.3, an iPhone 13 Pro simulator on iOS 26.2, and a small UIKit/SwiftUI harness using the library's actual PagerView.swift, supporting Swift files, and SwiftUIIntrospect sources.

What are the steps to reproduce (after prerequisites)?

  1. Present a navigation controller in a page sheet with a transparent navigation bar.
  2. Place a full-size vertical pager underneath the bar, with several pages and clearly marked left/right borders.
  3. Inspect the initial page, navigate to the next page, and return.
  4. Verify that each active page fills the pager, its left edge remains at x = 0, and there is no horizontal blur/gradient over its content.

Native reproduction results (pager bounds: 390 × 797 pt):

  • Before: initial page x = −35.17 pt; the paging collection view was only 693 pt high; sideways edge effect visible.
  • After: active page x = 0 and size 390 × 797 pt on initial presentation, next page, and return; sideways edge effect absent.
  • Patched Swift sources compiled successfully for the iOS simulator (deployment target 16.4).
  • npm run typescript: passed.
  • npm run lint: passed with 24 warnings in unchanged JavaScript/TypeScript files.
  • npm test -- --runInBand --watchman=false: passed; the existing suite contains one TODO and does not cover native layout. The native harness above provides the regression verification.

Each repeated Page 1 / Row N label below is a row within one full-size page, not a separate pager page.

Screenshots

Reported application screenshots:

Reported pager issue: content shifted left and covered by a sideways gradient Second application screenshot supplied with the pager issue report

Native reproduction before Native reproduction after
Before: left border clipped and content dimmed After: both borders aligned and content visible

Compatibility

OS Implemented
iOS Yes — layout correction for vertical pagers; edge-effect change guarded by iOS 26 availability
Android Unchanged

Checklist

  • I have tested this on a device and a simulator — simulator verified; physical-device confirmation pending.
  • I added the documentation in README.md — not applicable; internal bug fix.
  • I updated the typed files (TS and Flow) — not applicable; no API change.

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