@onekeyfe/react-native-pager-view 6.7.0-1 → 6.7.0-12

package/src/CollapsiblePagerView.tsx

@@ -1,3 +1,4 @@
+import type { ScrollEdgeEffect } from "./ScrollEdgeEffect";
 import React from "react";
 import { I18nManager, Platform, StyleSheet, View } from "react-native";
 import type * as ReactNative from "react-native";
@@ -86,7 +87,7 @@ export interface CollapsiblePagerViewProps
     | "children"
     | "headerHeight"
     | "stickyHeaderHeight"
-    | "topScrollEdgeHard"
+    | "topScrollEdgeEffect"
     | "topOverlayHeight"
     | "externalTopOverlayTag"
     | "pageKeys"
@@ -119,10 +120,12 @@ export interface CollapsiblePagerViewProps
   stickyHeaderHeight: number;
   /** Fixed content above the collapsible header on iOS 26 and newer. */
   topOverlay?: React.ReactNode;
+  /** Known overlay height to reserve until its first layout measurement. */
+  topOverlayHeightHint?: number;
   /** Existing fixed header shared with a parent pager on iOS 26 and newer. */
   externalTopOverlayTag?: number;
-  /** Enables UIKit's hard top scroll-edge effect on iOS 26 and newer. */
-  topScrollEdgeEffect?: "hard";
+  /** Selects UIKit's top scroll-edge effect on iOS 26 and newer. */
+  topScrollEdgeEffect?: `${ScrollEdgeEffect}`;
   /** Effective appearance of the fixed overlay or pinned sticky bar. */
   topOverlayColorScheme?: "light" | "dark";
   /**
@@ -157,7 +160,7 @@ export interface CollapsiblePagerViewProps
 type State = {
   selectedPage: number;
   transientRetainedPages: readonly number[];
-  topOverlayHeight: number;
+  topOverlayHeight: number | null;
 };
 
 const pageIndex = (value: number) => {
@@ -185,7 +188,7 @@ export class CollapsiblePagerView extends React.PureComponent<
   State
 > {
   state: State = {
-    topOverlayHeight: 0,
+    topOverlayHeight: null,
     selectedPage: clampedPageIndex(
       this.props.initialPage ?? 0,
       React.Children.toArray(this.props.children).length
@@ -218,7 +221,22 @@ export class CollapsiblePagerView extends React.PureComponent<
     this.notifyMountedPagesChanged();
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(previousProps: CollapsiblePagerViewProps) {
+    const previousOverlayEnabled =
+      previousProps.topOverlay != null &&
+      (previousProps.topScrollEdgeEffect === "hard" ||
+        previousProps.topScrollEdgeEffect === "soft");
+    const overlayEnabled =
+      this.props.topOverlay != null &&
+      (this.props.topScrollEdgeEffect === "hard" ||
+        this.props.topScrollEdgeEffect === "soft");
+    if (
+      previousOverlayEnabled &&
+      !overlayEnabled &&
+      this.state.topOverlayHeight !== null
+    ) {
+      this.setState({ topOverlayHeight: null });
+    }
     const pageCount = this.pages().length;
     const selectedPage = clampedPageIndex(this.state.selectedPage, pageCount);
     if (selectedPage !== this.state.selectedPage) {
@@ -472,6 +490,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       headerHeight,
       stickyHeaderHeight,
       topOverlay,
+      topOverlayHeightHint,
       externalTopOverlayTag,
       topScrollEdgeEffect,
       topOverlayColorScheme,
@@ -493,8 +512,15 @@ export class CollapsiblePagerView extends React.PureComponent<
     const pages = this.pages();
     const supportsTopScrollEdge =
       Platform.OS === "ios" && parseInt(String(Platform.Version), 10) >= 26;
-    const hardScrollEdge = supportsTopScrollEdge && topScrollEdgeEffect === "hard";
-    const hasTopOverlay = hardScrollEdge && topOverlay != null;
+    const scrollEdgeEnabled =
+      supportsTopScrollEdge &&
+      (topScrollEdgeEffect === "hard" || topScrollEdgeEffect === "soft");
+    const hasTopOverlay = scrollEdgeEnabled && topOverlay != null;
+    const initialTopOverlayHeight =
+      typeof topOverlayHeightHint === "number" &&
+      Number.isFinite(topOverlayHeightHint)
+        ? Math.max(0, Math.ceil(topOverlayHeightHint))
+        : 0;
     const pageKeys = pages.map(pageKey);
     const retained = new Set(this.mountedPages(pages.length));
     const deducedLayoutDirection =
@@ -535,9 +561,15 @@ export class CollapsiblePagerView extends React.PureComponent<
         offscreenPageLimit={Math.max(1, offscreenPageLimit ?? 1)}
         headerHeight={Math.max(0, Math.round(headerHeight))}
         stickyHeaderHeight={Math.max(0, Math.round(stickyHeaderHeight))}
-        topScrollEdgeHard={hardScrollEdge}
-        topOverlayColorScheme={hardScrollEdge ? topOverlayColorScheme : undefined}
-        topOverlayHeight={hasTopOverlay ? this.state.topOverlayHeight : 0}
+        topScrollEdgeEffect={scrollEdgeEnabled ? topScrollEdgeEffect : "none"}
+        topOverlayColorScheme={
+          scrollEdgeEnabled ? topOverlayColorScheme : undefined
+        }
+        topOverlayHeight={
+          hasTopOverlay
+            ? this.state.topOverlayHeight ?? initialTopOverlayHeight
+            : 0
+        }
         externalTopOverlayTag={
           supportsTopScrollEdge && !hasTopOverlay
             ? externalTopOverlayTag ?? 0