@onekeyfe/react-native-pager-view 6.7.0-alpha.327 → 6.7.0-alpha.335

package/README.md

@@ -67,6 +67,15 @@ Web scroll child can opt in by exposing a DOM element with
 `data-collapsible-pager-scroll`. CSS scroll timelines drive header/sticky
 movement, so React is not updated on each vertical scroll frame.
 
+On Web, `WebCollapsiblePagerView` is an explicit root export of the existing Web
+pager. It measures Header and sticky content when their heights are omitted.
+`isActive` describes route visibility; the pager preserves a pending scroll
+target across a short or temporarily hidden page and retries when real content
+geometry becomes ready. `useWebCollapsiblePagerPage()` exposes the selected
+page's scroll owner, visible metrics, content registration and pending target
+to descendants. These Web-only APIs require a DOM when mounted. Native callers
+continue to use `CollapsiblePagerView`.
+
 On iOS and Android, `nativeTabBar` renders the tab bar natively and
 `onNativeTabPress` reports presses. By default, adjacent tab presses animate and
 non-adjacent presses jump directly to the target without passing intermediate

package/docs/SPEC.md

@@ -14,17 +14,32 @@ valid prop values. Both the style and overlay are
 disabled by default. On iOS 26 or newer, a local overlay remains fixed at the
 top of the viewport while the owned vertical `UIScrollView` can draw behind it.
 The component measures the overlay's Fabric layout height and owns the
-corresponding top content inset. It binds UIKit's
+corresponding top content inset.
+For callers with a known initial height, `topOverlayHeightHint` reserves that
+height on the first frame after the overlay is enabled, before Fabric delivers
+`onLayout`. The measured height replaces the hint, and disabling the overlay
+clears the measurement so a later enablement can use a new hint. The hint does
+not enable the effect or reserve an inset without an active local overlay.
+This uses the existing native `topOverlayHeight` prop without changing the
+native interface. For native smooth local Hard mode, a complete Fabric mount
+attaches the overlay slot synchronously before `didMount` returns; incomplete
+slots retain the deferred fallback. It binds UIKit's
 `UIScrollEdgeElementContainerInteraction` to that exact scroll view and selects
 the requested top edge style. Hard has UIKit's dividing line; Soft has its
 gradual blurred transition. A pager owns the effect and inset for its current page;
 its nested NativeList or NativeScroller must not opt into another top overlay.
 Invisible, noninteractive native labels let UIKit recognize the React-drawn
 overlay and sticky header as scroll-edge elements. The pager does not add an
-auxiliary full-area glass or opaque material. It clips scrolling assets above
+auxiliary full-area glass. It clips scrolling assets above
 the fixed overlay boundary; during horizontal transitions it clips its owned
 visible page hosts below the current sticky boundary so text cannot pass in
 front of the fixed controls. Masked assets must not intercept their hit targets.
+On iOS 27 or newer, a local smooth Hard pager with a valid shared-header mask
+fades a bottommost overlay layer using the resolved opaque pager or ancestor
+theme color as the real header collapses, without hard-coded colors or changing
+UIKit's Hard style, owner or interactions. During temporary horizontal owner
+transitions the layer holds its last opacity until geometry is valid again;
+disabling the local overlay, changing style or recycling removes it.
 
 For an iOS 26 pager whose fixed header is rendered by a sibling in the same
 React surface, `externalTopOverlayTag` may identify that header's native view.
@@ -61,6 +76,8 @@ The measured overlay height is excluded from the collapsible header distance:
 overlay. Selection, cancellation, reuse and disposal rebind or release the
 interaction and restore any prior scroll-edge style. Native scroll/refresh
 coordination continues on the main thread without per-frame JavaScript work.
+Refresh retains the pager-owned `overlay + header + sticky` top inset but offsets
+the indicator by `header + sticky`, so its spinner begins below the fixed overlay.
 
 On iOS before 26, the external tag is not forwarded to native. On iOS before
 26, Android and Web the new props have no scroll-edge effect.
@@ -73,17 +90,15 @@ Acceptance requires real iOS 26 scrolling, partial collapse, short/empty page,
 refresh, page transition/cancellation, dynamic tabs and light/dark checks;
 source and build checks alone do not establish visual correctness.
 
-Experimental trial: `CollapsiblePagerView` paints a cover at each owned
+`CollapsiblePagerView` paints a cover at each owned
 fixed-overlay or pinned-sticky boundary with one physical pixel of the nearest
 opaque ancestor background color (system background if none is available).
 These native layers do not receive touches, change insets, or clip glass shadows.
 They are removed for Soft, disabled/detached effects, and recycling. This is a
-visual workaround using public layer APIs, not a UIKit separator setting; rendered
-light/dark, scrolling, and transition acceptance is pending. Standalone
+visual workaround using public layer APIs, not a UIKit separator setting. While
+the sticky header is pinned, only the top cover is hidden; it reappears on unpin,
+and the sticky cover and both Hard interactions remain active. Standalone
 NativeScroller and NativeList retain UIKit's unmodified Hard appearance.
-On the iOS 26.5 simulator, a runtime probe confirmed Hard and the cover layers,
-including pinned-header ownership. The original hairline was not reliably
-reproduced with the covers hidden, so separator suppression is not yet verified.
 
 Style selection crosses Fabric as the enum `none | hard | soft`, defaulting to
 `none`, rather than a hard-effect boolean. Switching Hard ↔ Soft on an attached
@@ -841,3 +856,62 @@ The native Home Spotlight adapter consumes this snapshot in the main UI runtime
 Removing a page or clearing the page collection MUST cancel the active horizontal transition and its temporary display snapshots before notifying the adapter. Cancellation MUST NOT rewrite the shared Header collapse or surviving pages' saved body reading memory. The previous observed owner MUST be detached without committing an offset under a shifted page key.
 
 An empty adapter MUST reject transition starts and transition completion without coercing an index into an empty range. The selected index uses zero as an empty-state sentinel; nonempty mutations clamp it to the remaining valid range. Readding pages MUST allow a fresh selection and MUST NOT resume a removed transition source. Conformance requires actual Android active-transition → zero-pages → readd/selection regression and remaining-page mutation checks; structural checks and compilation alone do not establish runtime behavior.
+
+
+## Web parent-scroll owner identity
+
+Web Header and sticky overlays use the named scroll timeline only when the
+browser supports every CSS property needed for that linkage. Otherwise, the
+active scroll owner's offset drives the same clamped Header collapse in JS:
+`C = min(max(scrollTop, 0), max(headerHeight, 0))`. The fallback keeps the
+existing page owner, insets, body offset memory, and sticky anchor. It updates
+when scrolling, selecting or restoring a page, replacing an owner, or changing
+Header height, and releases its listener when that owner detaches. An inactive
+page cannot move the visible Header. This is a Web-only compatibility path; no
+native behavior or public prop changes.
+When an overlay forwards a vertical wheel or touch scroll to the active owner,
+the owner receives the same internal user-input notification used by route
+restoration to cancel an obsolete pending offset.
+
+On Web, an explicitly marked NativeScroller is selected before an implicit NativeList viewport. There is one vertical owner per page; callers using parent-owned NativeList pass that same scroll element as webScrollHost.
+
+The existing NativeScroller pagerScrollKey identifies a Web page scroll owner. Changing the key invalidates that page body offset without remounting its React business content. The active owner also resets the shared header collapse and cancels queued old restore/top commands. Inactive owners invalidate their saved body offset without imperative scrolling; selection checks the current identity before restoring. A→B→A identity changes never revive a prior owner offset. Stable keys preserve ordinary page C+B restoration. Current-page top commands continue to affect only the selected page.
+
+Identity notifications and DOM owner listeners are internal implementation details, removed when the pager root or owner is replaced/unmounted. No native behavior or public configuration is added.
+
+### Web overlay input and keyed-page updates
+
+- Header and sticky slots remain overlays: overflow outside the sticky slot may remain visible without adding its portal height to page insets twice.
+- Vertical wheel or touch input over those overlays transfers only to the active page scroll owner when no nested scrollable consumes it. Horizontal controls, editable inputs, and ordinary button/tap behavior retain their own events. Input originating inside the page owner follows native scrolling once.
+- Reordering or removing keyed pages must save the previously configured key and owner, rather than resolving the old selected index against new children. Caller index synchronization preserves keyed body offsets and shared header collapse.
+- For an explicit NativeScroller, Pager chrome insets apply to the existing ScrollView content element, not its viewport. Insets taller than the available window cannot enlarge the scroll viewport. Existing owner/content padding is preserved and restored separately from Pager insets; direct NativeList/page-host fallback retains its prior layout path.
+- The Pager root clips without becoming a programmatically scrollable overflow box. Browser focus and descendant scrollIntoView cannot add a second horizontal page offset outside the selected-page transform.
+
+## Web page geometry and route restoration
+
+Status: Implemented in Web source and focused tests; browser and native runtime acceptance remain separate.
+
+`WebCollapsiblePagerView` is the existing Web `CollapsiblePagerView` class under an explicit root export. Its `isActive` prop defaults to true and represents route visibility, independently of the selected page. The Web-only `useWebCollapsiblePagerPage()` hook returns null outside a Web pager and otherwise exposes `isFocused`, `isRouteActive`, `owner`, `content`, optional `contentHeight`, `width`, `height`, content-relative `scrollTop`, `registerContent`, and read-only `pendingRouteScrollTop`. Native `CollapsiblePagerView`, its bridge, and its props are unchanged. The Web component rejects mounting without a DOM; importing the root or Web module alone must not access DOM globals.
+
+Web callers may supply finite nonnegative `headerHeight` and `stickyHeaderHeight`. When omitted or invalid (negative, NaN, or infinite), the SDK measures the natural inner Header and sticky content with `ResizeObserver`; explicit valid values take precedence, including zero. An initial unmeasured zero is not ready for route restoration; a measured empty chrome element may legitimately have zero height. Measurement must not use the constrained slot height as its own input. Height changes update the owned insets before route restoration. Existing explicit-height callers retain their layout path.
+
+Each page has one SDK-discovered vertical owner: explicit `NativeScroller`, then implicit NativeList viewport, then page host. Registration accepts a connected content element and optional finite nonnegative explicit height; invalid height metadata is ignored. It does not change DOM layout or make a pending target reachable. A later registration of the same element supersedes an earlier one, and stale cleanup cannot remove it. An explicit-height change schedules geometry measurement even if the element border box is unchanged. Metrics use owner client width; `pinnedBottom = ownerRect.top + max(0, headerHeight - owner.scrollTop) + stickyHeaderHeight`; `visibleTop = max(ownerRect.top, pinnedBottom, contentRect.top if present)`; visible height is `max(0, ownerRect.bottom - visibleTop)` and content-relative scroll top is `max(0, pinnedBottom - contentRect.top)`. Unregistered content falls back to the first owner child. Detached content and callbacks from old owners are ignored. One animation-frame measurement per page coalesces scroll, resize, registration, owner configuration, and active-page changes. Disposal releases observers, listeners, frames, and subscriptions.
+
+On active-to-inactive transition, the Web pager freezes the selected logical React page key, `pagerScrollKey` identity, actual owner generation, and last valid raw DOM top. Inactive scroll/geometry changes cannot replace the snapshot. A second blur of the same pending identity preserves the original target. On focus, owner, content, chrome, or inset changes, the pager retries without a timer only when the route is active, that exact key/identity/owner remains selected and connected, the viewport has positive height, the pager has configured the expected insets, and real `scrollHeight - clientHeight` reaches the target. Short content keeps the target pending. Restoration clears pending before one instant scroll and synchronizes the existing shared Header C and per-page body B memory. An idempotent Web `restoreScrollPosition()` returns false while inactive or not ready and true when no target remains or it applies; normal callers need no polling.
+
+Valid vertical wheel, scroll keys, scrollbar drag, overlay-forwarded input, accepted NativeList commands, and explicit page-top/sticky-top commands cancel pending route intent through the existing SDK takeover path. As in the prior Web app adapter, any owner `pointerdown` or `touchstart`, including a child target, cancels only route pending; this does not newly commit or clear SDK C+B memory. Geometry-only scroll/resize/scrollend cannot cancel intent. Valid same-offset commands cancel it; invalid or stale commands do not. A matching route target takes priority over automatic tab C+B restoration. Selection of a different key, owner identity reset (including A→B→A), genuine DOM owner replacement, or removal cancels pending; a same-key index reorder preserves it. A same-commit blur and Activity/Offscreen effect disconnect captures the current route target before releasing the owner; repeated disconnects preserve an existing pending target. A temporary React ref null or Activity/Offscreen effect disconnect followed by the identical connected owner preserves the logical route target and owner generation while releasing all observers, listeners, frames, and DOM configuration during disconnect. Restoration is unavailable while disconnected; reconnect remeasures automatic chrome before applying pending. A truly removed pager instance cannot transfer its pending target to a new instance. Older queued tab/top callbacks must validate generation before writing after route restoration or cancellation. The app owns navigation focus and business tab names; the SDK never infers them from escaped React child keys.
+
+Platform matrix: Web owns this DOM geometry, registration, route pending, and explicit Web export. iOS and Android keep native scrolling, restoration, and page coordination documented above, with no new prop, native bridge call, JS heap sharing, or process resource. The UI main runtime owns Web state; background runtimes do not deserialize it. Source/type tests establish only Web contract implementation, not browser rendering or native device behavior. Acceptance requires real Web/Desktop route blur, short content then growth, user takeover, dynamic chrome, key reset, and Home/Market scroll regressions.
+
+## Native package entry isolation
+
+The Native package entry exports the existing Native PagerView,
+CollapsiblePagerView, NativeScroller, usePagerView and ScrollEdgeEffect APIs.
+Native package resolution MUST NOT evaluate the Web pager or Web page-context
+modules. The react-native field and conditional export resolve to a real Native
+entry; the browser entry retains the Web runtime APIs. The generic declaration
+entry preserves the existing shared Web value/type API for TypeScript callers.
+This separates package initialization in the Native UI main runtime; it does not
+add a bridge, share JS heaps with background, or change Native scroll commands.
+Acceptance includes the actual Native dependency graph and unchanged startup
+budgets, Web runtime/type exports, and package source/module/declaration entries.

package/ios/RNCCollapsiblePagerViewComponentView.mm

@@ -25,6 +25,7 @@ static void *RNCCollapsiblePagerContentOffsetContext = &RNCCollapsiblePagerConte
 static void *RNCRefreshControlLayerContext = &RNCRefreshControlLayerContext;
 static void *RNCScrollRefreshControlContext = &RNCScrollRefreshControlContext;
 static char RNCRefreshControlOffsetKey;
+static void RNCCollapsiblePagerLog(NSString *message);
 
 @interface RNCRefreshControlOffsetState : NSObject
 + (void)setOffset:(CGFloat)offset forControl:(UIRefreshControl *)control owner:(id)owner;
@@ -39,6 +40,10 @@ static char RNCRefreshControlOffsetKey;
   BOOL _originalMasksToBounds;
   BOOL _applying;
   BOOL _observing;
+  CGFloat _lastLoggedOffset;
+  NSUInteger _lastLoggedOwnerCount;
+  CGFloat _lastLoggedTransformY;
+  BOOL _hasLoggedState;
 }
 
 - (instancetype)initWithControl:(UIRefreshControl *)control
@@ -79,6 +84,21 @@ static char RNCRefreshControlOffsetKey;
   }
   [CATransaction commit];
   _applying = NO;
+#if DEBUG
+  if (!_hasLoggedState || fabs(_lastLoggedOffset - offset) > 0.01 ||
+      _lastLoggedOwnerCount != _offsets.count ||
+      fabs(_lastLoggedTransformY - transform.m42) > 0.01) {
+    _hasLoggedState = YES;
+    _lastLoggedOffset = offset;
+    _lastLoggedOwnerCount = _offsets.count;
+    _lastLoggedTransformY = transform.m42;
+    RNCCollapsiblePagerLog([NSString stringWithFormat:
+      @"[IOS-HOME-VISUAL] epochMs=%.0f monoMs=%.0f phase=refresh-transform ownerCount=%lu offsetSum=%.1f baselineY=%.1f appliedY=%.1f masksToBounds=%d",
+      [NSDate.date timeIntervalSince1970] * 1000, CACurrentMediaTime() * 1000,
+      (unsigned long)_offsets.count, offset, _baselineTransform.m42,
+      transform.m42, control.layer.masksToBounds]);
+  }
+#endif
 }
 
 + (void)setOffset:(CGFloat)offset forControl:(UIRefreshControl *)control owner:(id)owner
@@ -1464,10 +1484,12 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
 - (void)detachSharedHeaderPressCancellationGesture;
 - (void)updateRefreshControlForScrollView:(UIScrollView *)scrollView;
 - (void)releaseRefreshControlForScrollView:(UIScrollView *)scrollView;
+- (void)logHomeVisualGeometry:(NSString *)phase scrollView:(UIScrollView *)scrollView;
 - (void)cancelTopInsetReboundCheck;
 - (void)scheduleTopInsetReboundCheck;
 - (void)syncScrollEdgeAppearance;
 - (void)updateHardEdgeSeparatorCovers;
+- (void)updateTopOverlayThemeBackground;
 - (void)updateScrollEdgeContentMasks;
 - (void)restoreScrollEdgeContentMasks;
 - (void)sharedHeaderPressCancellationGestureChanged:(UIPanGestureRecognizer *)recognizer;
@@ -1506,6 +1528,7 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
   UILabel *_stickyEdgeMarker;
   CALayer *_topEdgeSeparatorCover;
   CALayer *_stickyEdgeSeparatorCover;
+  CALayer *_topOverlayThemeBackgroundLayer;
   __weak UIView *_topEdgeInteractionHost;
   __weak UIView *_stickyEdgeInteractionHost;
   __weak UIScrollView *_topEdgeScrollView;
@@ -1576,6 +1599,13 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
   NSMapTable<UIScrollView *, NSValue *> *_originalInsets;
   NSMapTable<UIScrollView *, UIRefreshControl *> *_managedRefreshControls;
   NSHashTable<UIScrollView *> *_refreshControlObservedScrollViews;
+  CFTimeInterval _homeVisualLastScrollLog;
+  CFTimeInterval _homeVisualLastLayoutLog;
+  CFTimeInterval _homeVisualStartMono;
+  NSString *_homeVisualLastGeometrySignature;
+  CGFloat _homeVisualLastThemeOpacity;
+  CFTimeInterval _homeVisualLastThemeLog;
+  BOOL _homeVisualThemeHolding;
   NSMapTable<UIScrollView *, NSNumber *> *_appliedTopInsets;
   NSMapTable<UIScrollView *, NSValue *> *_originalIndicatorInsets;
   NSMapTable<UIScrollView *, NSNumber *> *_originalAlwaysBounceVertical;
@@ -1803,6 +1833,7 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
   [self updateTopScrollEdgeForScrollView:_observedScrollView];
   [self updateSharedHeaderPressCancellationGesture];
   [self updateHeaderSettledStateForceBusy:NO];
+  [self logHomeVisualGeometry:@"window" scrollView:_observedScrollView];
   for (UIScrollView *scrollView in _originalInsets.keyEnumerator) {
     [self updateNativeScrollerViewport:scrollView stickyHeight:self.window == nil ? 0 : _stickyHeaderHeight + self.effectiveTopOverlayHeight];
   }
@@ -1830,7 +1861,10 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
 
 - (CGFloat)effectiveTopOverlayHeight
 {
-  return _topOverlayView != nil ? _topOverlayHeight : _externalTopOverlayHeight;
+  BOOL localOverlayPending = _topScrollEdgeEnabled && _topOverlayHeight > 0 &&
+    _externalTopOverlayTag <= 0;
+  return _topOverlayView != nil || localOverlayPending
+    ? _topOverlayHeight : _externalTopOverlayHeight;
 }
 
 - (BOOL)hasFixedTopOverlay
@@ -1913,6 +1947,8 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
   [super traitCollectionDidChange:previousTraitCollection];
   if (previousTraitCollection.userInterfaceStyle != self.traitCollection.userInterfaceStyle) {
     [self syncScrollEdgeAppearance];
+    [self updateTopOverlayThemeBackground];
+    [self logHomeVisualGeometry:@"trait" scrollView:_observedScrollView];
   }
 }
 
@@ -1962,6 +1998,7 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
     self.window != nil && !_isBeingRecycled;
   if (!enabled) {
     [self restoreScrollEdgeContentMasks];
+    [self updateTopOverlayThemeBackground];
     return;
   }
   if (self.hasFixedTopOverlay && _sharedHeaderHostView.window == self.window &&
@@ -2031,6 +2068,102 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
     [_ownedPageMasks removeObjectForKey:page];
     [_originalPageMasks removeObjectForKey:page];
   }
+  [self updateTopOverlayThemeBackground];
+}
+
+- (void)updateTopOverlayThemeBackground
+{
+  if (@available(iOS 27.0, *)) {
+    BOOL localHardOverlay = !_isBeingRecycled && _topScrollEdgeEnabled &&
+      _topScrollEdgeEffect == RNCCollapsiblePagerViewTopScrollEdgeEffect::Hard &&
+      _nativeSmoothHeaderScrollEnabled && _topOverlayView != nil &&
+      _externalTopOverlayTag <= 0 && _topOverlayHeight > 0 && _headerHeight > 0 &&
+      _topOverlayHostView.window == self.window && self.window != nil &&
+      !CGRectIsEmpty(_topOverlayHostView.bounds);
+    if (!localHardOverlay) {
+      [_topOverlayThemeBackgroundLayer removeFromSuperlayer];
+      _topOverlayThemeBackgroundLayer = nil;
+      _homeVisualThemeHolding = NO;
+      return;
+    }
+
+    UIColor *color = nil;
+    for (UIView *view = self; view != nil; view = view.superview) {
+      UIColor *candidate = [view.backgroundColor resolvedColorWithTraitCollection:
+        _topOverlayHostView.traitCollection];
+      if (candidate != nil && CGColorGetAlpha(candidate.CGColor) >= 1) {
+        color = candidate;
+        break;
+      }
+    }
+    if (color == nil) {
+      [_topOverlayThemeBackgroundLayer removeFromSuperlayer];
+      _topOverlayThemeBackgroundLayer = nil;
+      return;
+    }
+
+    UIScrollView *scrollView = _observedScrollView;
+    BOOL geometryReady = scrollView != nil &&
+      _sharedHeaderScrollView == scrollView && _topEdgeScrollView == scrollView &&
+      _topEdgeInteraction.scrollView == scrollView &&
+      scrollView.topEdgeEffect.style == UIScrollEdgeEffectStyle.hardStyle &&
+      _sharedHeaderMaskView != nil &&
+      _sharedHeaderHostView.maskView == _sharedHeaderMaskView &&
+      _headerView.window == self.window;
+    if (_topOverlayThemeBackgroundLayer == nil && !geometryReady) return;
+    BOOL created = _topOverlayThemeBackgroundLayer == nil;
+    if (created) {
+      _topOverlayThemeBackgroundLayer = [CALayer layer];
+      _topOverlayThemeBackgroundLayer.name = @"onekey-top-overlay-theme-background";
+      _topOverlayThemeBackgroundLayer.actions = @{
+        @"position": NSNull.null, @"bounds": NSNull.null,
+        @"opacity": NSNull.null, @"backgroundColor": NSNull.null
+      };
+      [_topOverlayHostView.layer insertSublayer:_topOverlayThemeBackgroundLayer atIndex:0];
+    }
+    _topOverlayThemeBackgroundLayer.frame = _topOverlayHostView.bounds;
+    _topOverlayThemeBackgroundLayer.backgroundColor = color.CGColor;
+    if (!geometryReady) {
+      if (!_homeVisualThemeHolding) {
+        _homeVisualThemeHolding = YES;
+#if DEBUG
+        RNCCollapsiblePagerLog([NSString stringWithFormat:
+          @"[IOS-HOME-VISUAL] phase=theme-background-hold pagerTag=%ld generation=%lu pageIndex=%ld opacity=%.3f",
+          (long)self.tag, (unsigned long)_generation, (long)_currentIndex,
+          _topOverlayThemeBackgroundLayer.opacity]);
+#endif
+      }
+      return;
+    }
+    _homeVisualThemeHolding = NO;
+    CGRect overlayWindow = [_topOverlayHostView convertRect:_topOverlayHostView.bounds
+                                                     toView:self.window];
+    CGRect headerWindow = [_headerView convertRect:_headerView.bounds
+                                           toView:self.window];
+    CGFloat overlayBottom = CGRectGetMaxY(overlayWindow);
+    CGFloat collapse = MIN(MAX(overlayBottom - CGRectGetMinY(headerWindow), 0),
+      _headerHeight);
+    CGFloat opacity = 1 - collapse / _headerHeight;
+    _topOverlayThemeBackgroundLayer.opacity = opacity;
+#if DEBUG
+    CFTimeInterval now = CACurrentMediaTime();
+    if (created || fabs(opacity - _homeVisualLastThemeOpacity) >= 0.1 ||
+        now - _homeVisualLastThemeLog >= 2.0) {
+      _homeVisualLastThemeOpacity = opacity;
+      _homeVisualLastThemeLog = now;
+      CGFloat red = 0, green = 0, blue = 0, alpha = 0;
+      [color getRed:&red green:&green blue:&blue alpha:&alpha];
+      RNCCollapsiblePagerLog([NSString stringWithFormat:
+        @"[IOS-HOME-VISUAL] phase=theme-background epochMs=%.0f monoMs=%.0f pagerTag=%ld generation=%lu pageIndex=%ld opacity=%.3f collapse=%.1f header=%.1f overlayBottom=%.1f headerY=%.1f bodyYEstimate=%.1f hardOwner=%d rgba=%.3f,%.3f,%.3f,%.3f",
+        NSDate.date.timeIntervalSince1970 * 1000, now * 1000,
+        (long)self.tag, (unsigned long)_generation, (long)_currentIndex,
+        opacity, collapse, (CGFloat)_headerHeight, overlayBottom,
+        CGRectGetMinY(headerWindow), overlayBottom + _headerHeight +
+          _stickyHeaderHeight - collapse, _topEdgeInteraction.scrollView == scrollView,
+        red, green, blue, alpha]);
+    }
+#endif
+  }
 }
 
 - (void)updateEventEmitter:(const EventEmitter::Shared &)eventEmitter
@@ -2187,6 +2320,7 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
         CGRectGetWidth(_containerView.bounds), pixel);
       cover.contentsScale = scale;
       cover.backgroundColor = color.CGColor;
+      cover.hidden = index == 0 && _stickyHeaderIsPinned;
     }
     if (index == 0) _topEdgeSeparatorCover = cover;
     else _stickyEdgeSeparatorCover = cover;
@@ -2538,6 +2672,8 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
   [_nativeTabBarView updateAncestorGesturePrecedence];
   [_nativeSubHeaderView updateAncestorGesturePrecedence];
   [self updateTopScrollEdgeForScrollView:_observedScrollView];
+  [self logHomeVisualGeometry:shouldPin ? @"pin" : @"unpin"
+                    scrollView:_observedScrollView];
 }
 
 - (void)preparePageForHorizontalTransitionAtIndex:(NSInteger)pageIndex
@@ -2689,6 +2825,15 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
 - (void)mountingTransactionDidMount:(const MountingTransaction &)transaction
                withSurfaceTelemetry:(const SurfaceTelemetry &)surfaceTelemetry
 {
+  if (_needsSlotRebuild && _deferTopEdgeSlotRebuild &&
+      _topScrollEdgeEnabled && _nativeSmoothHeaderScrollEnabled &&
+      _topScrollEdgeEffect == RNCCollapsiblePagerViewTopScrollEdgeEffect::Hard &&
+      _topOverlayHeight > 0 && _pageKeys.count > 0 &&
+      _externalTopOverlayTag <= 0 &&
+      _logicalChildren.count == _pageKeys.count + 3 &&
+      !_transitioning && !_isPagerDragging && !_isBeingRecycled) {
+    _deferTopEdgeSlotRebuild = NO;
+  }
   if (_needsSlotRebuild && !_deferTopEdgeSlotRebuild &&
       !_transitioning && !_isPagerDragging) {
     [self rebuildSlots];
@@ -2711,6 +2856,7 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
   }
   [self updateScrollEdgeContentMasks];
   [_mountingRemovedScrollViews removeAllObjects];
+  [self logHomeVisualGeometry:@"did-mount" scrollView:_observedScrollView];
   if (!_nativeSmoothHeaderScrollEnabled || _isBeingRecycled || self.window == nil ||
       _currentIndex < 0 || _currentIndex >= _pageControllers.count) return;
   // Prepare newly mounted owned scrollers before their first frame, even while
@@ -2991,6 +3137,7 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
   [self updateTopScrollEdgeForScrollView:_observedScrollView];
   [self updateScrollEdgeContentMasks];
   [self updateHeaderSettledStateForceBusy:NO];
+  [self logHomeVisualGeometry:@"layout" scrollView:_observedScrollView];
   dispatch_async(dispatch_get_main_queue(), ^{
     if (!self->_isBeingRecycled) {
       [self prepareAdjacentPageInsets];
@@ -3110,6 +3257,10 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
   _externalOuterTransitioning = NO;
   _topScrollEdgeEnabled = NO;
   _topScrollEdgeEffect = RNCCollapsiblePagerViewTopScrollEdgeEffect::None;
+  _homeVisualStartMono = 0;
+  _homeVisualLastScrollLog = 0;
+  _homeVisualLastLayoutLog = 0;
+  _homeVisualLastGeometrySignature = nil;
   _nativeTabBarHeight = 44;
   _nativeSubHeaderHeight = 74;
   _headerOffset = 0;
@@ -3314,6 +3465,7 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
   if (insetsChanged) {
     [self reapplyInsetsToObservedScrollView];
     [self setNeedsLayout];
+    [self logHomeVisualGeometry:@"props-inset" scrollView:_observedScrollView];
   }
   _applyingTopOverlayInsetChange = NO;
   if (!_nativeTabBarView.hidden) {
@@ -3894,8 +4046,105 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
     [_managedRefreshControls removeObjectForKey:scrollView];
     if (current != nil) [_managedRefreshControls setObject:current forKey:scrollView];
   }
-  [RNCRefreshControlOffsetState setOffset:self.effectiveTopOverlayHeight + _headerHeight + _stickyHeaderHeight
+  [RNCRefreshControlOffsetState setOffset:_headerHeight + _stickyHeaderHeight
                              forControl:current owner:self];
+  if (previous != current) [self logHomeVisualGeometry:@"refresh-bind" scrollView:scrollView];
+}
+
+- (void)logHomeVisualGeometry:(NSString *)phase scrollView:(UIScrollView *)scrollView
+{
+#if DEBUG
+  if (self.window == nil || _isBeingRecycled) return;
+  CFTimeInterval now = CACurrentMediaTime();
+  if (_homeVisualStartMono == 0) _homeVisualStartMono = now;
+  if ([phase isEqualToString:@"pull"] && now - _homeVisualLastScrollLog < 0.2) return;
+  if ([phase isEqualToString:@"pull"]) _homeVisualLastScrollLog = now;
+  UIRefreshControl *control = scrollView.refreshControl;
+  CGRect controlWindow = control != nil
+    ? [control convertRect:control.bounds toView:self.window] : CGRectZero;
+  CGRect overlayWindow = [_topOverlayHostView convertRect:_topOverlayHostView.bounds
+                                                   toView:self.window];
+  CGRect stickyWindow = [_stickyHeaderView convertRect:_stickyHeaderView.bounds
+                                                toView:self.window];
+  CGRect maskWindow = _sharedHeaderMaskView != nil
+    ? [_sharedHeaderHostView convertRect:_sharedHeaderMaskView.frame toView:self.window]
+    : CGRectZero;
+  CGFloat pageMaskWindowY = [_containerView convertPoint:
+    CGPointMake(0, _pageMaskBoundary) toView:self.window].y;
+  BOOL layoutPhase = [phase isEqualToString:@"layout"] ||
+    [phase isEqualToString:@"did-mount"];
+  NSString *signature = [NSString stringWithFormat:
+    @"%.1f:%ld:%ld:%.1f:%d:%.1f:%.1f:%.1f:%d:%d",
+    self.effectiveTopOverlayHeight, (long)_headerHeight,
+    (long)_stickyHeaderHeight, scrollView.contentInset.top, control != nil,
+    CGRectGetMinY(maskWindow), CGRectGetHeight(maskWindow), _pageMaskBoundary,
+    _stickyHeaderIsPinned, _topScrollEdgeEnabled];
+  if (layoutPhase && now - _homeVisualStartMono >= 2.0 &&
+      [_homeVisualLastGeometrySignature isEqualToString:signature] &&
+      now - _homeVisualLastLayoutLog < 2.0) return;
+  if (layoutPhase) {
+    _homeVisualLastLayoutLog = now;
+    _homeVisualLastGeometrySignature = signature;
+  }
+  CGFloat visualYEstimate = CGRectGetMinY(controlWindow) +
+    (control != nil ? control.layer.sublayerTransform.m42 : 0);
+  CALayer *firstChild = control.layer.sublayers.firstObject;
+  BOOL childAttached = firstChild != nil && control.window == self.window;
+  CGRect firstChildWindow = childAttached
+    ? [firstChild convertRect:firstChild.bounds toLayer:self.window.layer]
+    : CGRectZero;
+  CGFloat overscroll = scrollView != nil
+    ? -(scrollView.contentOffset.y + scrollView.contentInset.top) : 0;
+  double epochMs = [NSDate.date timeIntervalSince1970] * 1000;
+  double monoMs = now * 1000;
+  RNCCollapsiblePagerLog([NSString stringWithFormat:
+    @"[IOS-HOME-VISUAL] epochMs=%.0f monoMs=%.0f phase=%@ pagerTag=%ld generation=%lu pageIndex=%ld window=%d edge=%d overlay=%.1f header=%ld sticky=%ld collapse=%.1f scrollY=%.1f insetTop=%.1f overscroll=%.1f refresh=%d refreshing=%d controlY=%.1f controlH=%.1f sublayerY=%.1f visualYEstimate=%.1f overlayY=%.1f overlayBottom=%.1f stickyY=%.1f stickyBottom=%.1f maskY=%.1f maskH=%.1f pageMaskWindowY=%.1f",
+    epochMs, monoMs, phase, (long)self.tag, (unsigned long)_generation,
+    (long)_currentIndex, self.window != nil, _topScrollEdgeEnabled,
+    self.effectiveTopOverlayHeight, (long)_headerHeight, (long)_stickyHeaderHeight,
+    _headerOffset, scrollView.contentOffset.y, scrollView.contentInset.top,
+    overscroll, control != nil, control.isRefreshing,
+    CGRectGetMinY(controlWindow), CGRectGetHeight(controlWindow),
+    control != nil ? control.layer.sublayerTransform.m42 : 0, visualYEstimate,
+    CGRectGetMinY(overlayWindow), CGRectGetMaxY(overlayWindow),
+    CGRectGetMinY(stickyWindow), CGRectGetMaxY(stickyWindow),
+    CGRectGetMinY(maskWindow), CGRectGetHeight(maskWindow), pageMaskWindowY]);
+  RNCCollapsiblePagerLog([NSString stringWithFormat:
+    @"[IOS-HOME-VISUAL] epochMs=%.0f monoMs=%.0f phase=%@-refresh-layer pagerTag=%ld generation=%lu pageIndex=%ld boundsY=%.1f boundsH=%.1f centerY=%.1f transformTY=%.1f layerPositionY=%.1f layerTransformY=%.1f directChildCount=%lu firstChildAttached=%d firstChildWindowY=%.1f firstChildWindowH=%.1f",
+    epochMs, monoMs, phase, (long)self.tag, (unsigned long)_generation,
+    (long)_currentIndex, control.bounds.origin.y, control.bounds.size.height,
+    control.center.y, control.transform.ty, control.layer.position.y,
+    control.layer.transform.m42, (unsigned long)control.layer.sublayers.count,
+    childAttached, CGRectGetMinY(firstChildWindow), CGRectGetHeight(firstChildWindow)]);
+  if (![phase isEqualToString:@"pull"]) {
+    CALayer *topCover = _topEdgeSeparatorCover;
+    CALayer *stickyCover = _stickyEdgeSeparatorCover;
+    UIColor *color = topCover.backgroundColor != nil
+      ? [UIColor colorWithCGColor:topCover.backgroundColor] : nil;
+    CGFloat red = 0, green = 0, blue = 0, alpha = 0;
+    [color getRed:&red green:&green blue:&blue alpha:&alpha];
+    CGRect topCoverWindow = topCover.superlayer != nil
+      ? [topCover convertRect:topCover.bounds toLayer:self.window.layer] : CGRectZero;
+    CGRect stickyCoverWindow = stickyCover.superlayer != nil
+      ? [stickyCover convertRect:stickyCover.bounds toLayer:self.window.layer] : CGRectZero;
+    RNCCollapsiblePagerLog([NSString stringWithFormat:
+      @"[IOS-HOME-VISUAL] epochMs=%.0f monoMs=%.0f phase=%@-edge pagerTag=%ld generation=%lu pageIndex=%ld trait=%ld override=%ld style=%ld pinned=%d topHostY=%.1f topHostBottom=%.1f stickyHostY=%.1f stickyHostBottom=%.1f topInteractionSameScroll=%d stickyInteractionSameScroll=%d topCover=%d topCoverHidden=%d topCoverY=%.1f topCoverH=%.3f stickyCover=%d stickyCoverHidden=%d stickyCoverY=%.1f stickyCoverH=%.3f coverRGBA=%.3f,%.3f,%.3f,%.3f scale=%.1f",
+      epochMs, monoMs, phase, (long)self.tag, (unsigned long)_generation,
+      (long)_currentIndex, (long)self.traitCollection.userInterfaceStyle,
+      (long)_topOverlayHostView.overrideUserInterfaceStyle,
+      (long)_topScrollEdgeEffect, _stickyHeaderIsPinned,
+      CGRectGetMinY(overlayWindow), CGRectGetMaxY(overlayWindow),
+      CGRectGetMinY(stickyWindow), CGRectGetMaxY(stickyWindow),
+      _topEdgeInteraction.scrollView == scrollView,
+      _stickyEdgeInteraction.scrollView == scrollView,
+      topCover != nil, topCover.hidden, CGRectGetMinY(topCoverWindow),
+      CGRectGetHeight(topCoverWindow), stickyCover != nil,
+      stickyCover.hidden,
+      CGRectGetMinY(stickyCoverWindow),
+      CGRectGetHeight(stickyCoverWindow), red, green, blue, alpha,
+      self.window.screen.scale]);
+  }
+#endif
 }
 
 - (void)releaseRefreshControlForScrollView:(UIScrollView *)scrollView
@@ -4313,6 +4562,7 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
   if (context == RNCScrollRefreshControlContext) {
     UIScrollView *scrollView = (UIScrollView *)object;
     [self updateRefreshControlForScrollView:scrollView];
+    [self logHomeVisualGeometry:@"refresh-control-change" scrollView:scrollView];
     if (scrollView == _observedScrollView && !_syntheticPageRestore &&
         (!_nativeSmoothHeaderScrollEnabled || (!_transitioning && _transitionPageOffsets == nil))) {
       [self updateHeaderForScrollView:scrollView];
@@ -4320,6 +4570,11 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
     return;
   }
   if (context == RNCCollapsiblePagerContentOffsetContext && object == _observedScrollView) {
+    if ([keyPath isEqualToString:@"contentOffset"] &&
+        -(((UIScrollView *)object).contentOffset.y +
+          ((UIScrollView *)object).contentInset.top) > 5) {
+      [self logHomeVisualGeometry:@"pull" scrollView:(UIScrollView *)object];
+    }
     if (_pendingTopInsetReboundScrollView == object &&
         ([keyPath isEqualToString:@"contentOffset"] || [keyPath isEqualToString:@"contentInset"])) {
       if (((UIScrollView *)object).panGestureRecognizer.state == UIGestureRecognizerStateChanged) {

package/ios/RNCNativeScrollerComponentView.mm

@@ -8,6 +8,25 @@
 
 using namespace facebook::react;
 
+static void RNCNativeScrollerHomeVisualLog(NSString *phase, UIScrollView *scrollView)
+{
+#if DEBUG
+  Class logClass = NSClassFromString(@"ReactNativeNativeLogger.OneKeyLog");
+  if (logClass == nil) logClass = NSClassFromString(@"OneKeyLog");
+  SEL selector = NSSelectorFromString(@"debug::");
+  if (logClass == nil || ![logClass respondsToSelector:selector]) return;
+  UIRefreshControl *control = scrollView.refreshControl;
+  NSString *message = [NSString stringWithFormat:
+    @"[IOS-HOME-VISUAL] epochMs=%.0f monoMs=%.0f phase=scroller-%@ scrollTag=%ld refresh=%d refreshing=%d scrollY=%.1f insetTop=%.1f",
+    [NSDate.date timeIntervalSince1970] * 1000, CACurrentMediaTime() * 1000,
+    phase, (long)scrollView.tag, control != nil, control.isRefreshing,
+    scrollView.contentOffset.y, scrollView.contentInset.top];
+  typedef void (*LogFunction)(id, SEL, NSString *, NSString *);
+  LogFunction logFunction = (LogFunction)[logClass methodForSelector:selector];
+  logFunction(logClass, selector, @"NativeScroller", message);
+#endif
+}
+
 @interface RNCNativeVerticalScrollView : UIScrollView
 @end
 @implementation RNCNativeVerticalScrollView
@@ -156,6 +175,7 @@ static Event RNCScrollerMetrics(UIScrollView *scroll, CGPoint velocity, CGPoint
     [_refreshControl addTarget:self action:@selector(refreshTriggered:)
              forControlEvents:UIControlEventValueChanged];
     _scrollView.refreshControl = _refreshControl;
+    RNCNativeScrollerHomeVisualLog(@"refresh-created", _scrollView);
   } else if (!next.refreshEnabled && _refreshControl != nil) {
     [_refreshControl endRefreshing];
     _scrollView.refreshControl = nil;
@@ -174,8 +194,10 @@ static Event RNCScrollerMetrics(UIScrollView *scroll, CGPoint velocity, CGPoint
     }
     if (next.refreshing && !_refreshControl.refreshing) {
       [_refreshControl beginRefreshing];
+      RNCNativeScrollerHomeVisualLog(@"refresh-begin-prop", _scrollView);
     } else if (!next.refreshing && (previous.refreshing || createdRefreshControl)) {
       [_refreshControl endRefreshing];
+      if (previous.refreshing) RNCNativeScrollerHomeVisualLog(@"refresh-end-prop", _scrollView);
     }
   }
 
@@ -379,6 +401,7 @@ static Event RNCScrollerMetrics(UIScrollView *scroll, CGPoint velocity, CGPoint
   const auto &props = *std::static_pointer_cast<const RNCNativeScrollerProps>(_props);
   if (!props.refreshEnabled || props.refreshing) return;
   _refreshEventSentForDrag = YES;
+  RNCNativeScrollerHomeVisualLog(@"refresh-native-trigger", _scrollView);
   if (_eventEmitter) {
     std::static_pointer_cast<const RNCNativeScrollerEventEmitter>(_eventEmitter)->onRefresh({});
   }
@@ -523,6 +546,7 @@ static Event RNCScrollerMetrics(UIScrollView *scroll, CGPoint velocity, CGPoint
 - (void)setRefreshing:(BOOL)refreshing
 {
   if (_recycled || _refreshControl == nil) return;
+  RNCNativeScrollerHomeVisualLog(refreshing ? @"refresh-command-start" : @"refresh-command-stop", _scrollView);
   if (refreshing) {
     if (!_refreshControl.refreshing) [_refreshControl beginRefreshing];
   } else {