@onekeyfe/react-native-pager-view 3.0.173 → 3.0.175

package/lib/module/CollapsiblePagerView.web.js

@@ -47,6 +47,7 @@ export class CollapsiblePagerView extends React.PureComponent {
   scrollEnabled = this.props.scrollEnabled ?? true;
   lastMountSignature = null;
   configureFrame = null;
+  pendingTopFrame = null;
   transitionTimer = null;
   pageScrollState = "idle";
   configuredScrollElement = null;
@@ -70,6 +71,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     const pageCount = this.pages().length;
     const selectedPage = clampedPageIndex(this.state.selectedPage, pageCount);
     if (selectedPage !== this.state.selectedPage) {
+      this.cancelPendingTopFrame();
       this.finishPageTransition();
       this.setState({
         selectedPage,
@@ -81,6 +83,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     this.notifyMountedPagesChanged();
   }
   componentWillUnmount() {
+    this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
     if (this.configureFrame !== null) {
       cancelAnimationFrame(this.configureFrame);
@@ -99,6 +102,55 @@ export class CollapsiblePagerView extends React.PureComponent {
   setPageWithoutAnimation = selectedPage => {
     this.selectPage(selectedPage, false);
   };
+  scrollToPageTop = options => {
+    this.scrollCurrentPageToTop(0, options?.animated ?? true);
+  };
+  scrollToStickyTop = options => {
+    this.scrollCurrentPageToTop(Math.max(0, this.props.headerHeight), options?.animated ?? true);
+  };
+  cancelPendingTopFrame = () => {
+    if (!this.pendingTopFrame) return;
+    const pending = this.pendingTopFrame;
+    cancelAnimationFrame(pending.frame);
+    this.pendingTopFrame = null;
+    if (this.pageScrollElement(this.state.selectedPage) === pending.element && this.pages().map(pageKey)[this.state.selectedPage] === pending.key) this.savePageOffset(this.state.selectedPage);
+  };
+  onQueuedTopWheel = event => {
+    if (event.deltaY !== 0) this.cancelPendingTopFrame();
+  };
+  onQueuedTopKey = event => {
+    if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(event.key)) this.cancelPendingTopFrame();
+  };
+  scrollCurrentPageToTop(offset, animated) {
+    if (this.horizontalTouch || this.transitionTimer !== null) return;
+    const element = this.pageScrollElement(this.state.selectedPage);
+    const key = this.pages().map(pageKey)[this.state.selectedPage];
+    if (!element?.isConnected || !key) return;
+    this.cancelPendingTopFrame();
+    const EventConstructor = element.ownerDocument.defaultView?.Event;
+    if (EventConstructor) element.dispatchEvent(new EventConstructor("ok-collapsible-pager-cancel-scroll-command"));
+    element.scrollTo({
+      left: element.scrollLeft,
+      top: element.scrollTop,
+      behavior: "instant"
+    });
+    const frame = requestAnimationFrame(() => {
+      if (this.pendingTopFrame?.frame !== frame) return;
+      this.pendingTopFrame = null;
+      if (!element.isConnected || this.horizontalTouch || this.transitionTimer !== null || this.pageScrollElement(this.state.selectedPage) !== element || this.pages().map(pageKey)[this.state.selectedPage] !== key) return;
+      this.pageOffsets.set(key, offset);
+      this.sharedHeaderOffset = offset;
+      element.scrollTo({
+        top: offset,
+        behavior: animated ? "smooth" : "instant"
+      });
+    });
+    this.pendingTopFrame = {
+      frame,
+      element,
+      key
+    };
+  }
   setScrollEnabled = scrollEnabled => {
     this.scrollEnabled = scrollEnabled;
   };
@@ -165,8 +217,14 @@ export class CollapsiblePagerView extends React.PureComponent {
   restoreConfiguredScrollElement() {
     const configured = this.configuredScrollElement;
     if (!configured) return;
+    this.cancelPendingTopFrame();
+    configured.element.removeEventListener("ok-native-list-scroll-command-accepted", this.cancelPendingTopFrame);
+    configured.element.removeEventListener("wheel", this.onQueuedTopWheel);
+    configured.element.removeEventListener("keydown", this.onQueuedTopKey);
     configured.element.removeEventListener("scrollend", this.onVerticalScrollSettled);
     const style = timelineStyle(configured.element);
+    configured.rangeSpacer.remove();
+    style.position = configured.position;
     style.paddingTop = configured.paddingTop;
     style.boxSizing = configured.boxSizing;
     style.scrollTimelineName = configured.scrollTimelineName;
@@ -185,8 +243,23 @@ export class CollapsiblePagerView extends React.PureComponent {
       this.restoreConfiguredScrollElement();
       const style = timelineStyle(element);
       const computedPaddingTop = element.ownerDocument.defaultView?.getComputedStyle(element).paddingTop || style.paddingTop || "0px";
+      const rangeSpacer = element.ownerDocument.createElement("div");
+      Object.assign(rangeSpacer.style, {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "1px",
+        pointerEvents: "none",
+        opacity: "0"
+      });
+      rangeSpacer.setAttribute("aria-hidden", "true");
+      const position = style.position;
+      if (element.ownerDocument.defaultView?.getComputedStyle(element).position === "static") style.position = "relative";
+      element.appendChild(rangeSpacer);
       this.configuredScrollElement = {
         element,
+        rangeSpacer,
+        position,
         paddingTop: style.paddingTop,
         basePaddingTop: computedPaddingTop,
         boxSizing: style.boxSizing,
@@ -196,10 +269,14 @@ export class CollapsiblePagerView extends React.PureComponent {
         pagerStickyInset: style.getPropertyValue(PAGER_STICKY_INSET)
       };
       element.addEventListener("scrollend", this.onVerticalScrollSettled);
+      element.addEventListener("ok-native-list-scroll-command-accepted", this.cancelPendingTopFrame);
+      element.addEventListener("wheel", this.onQueuedTopWheel);
+      element.addEventListener("keydown", this.onQueuedTopKey);
     }
     const style = timelineStyle(element);
     const headerInset = Math.max(0, this.props.headerHeight);
     const stickyInset = Math.max(0, this.props.stickyHeaderHeight);
+    if (this.configuredScrollElement) this.configuredScrollElement.rangeSpacer.style.height = `calc(100% + ${headerInset}px)`;
     const basePaddingTop = this.configuredScrollElement?.basePaddingTop ?? "0px";
     const paddingTop = `calc(${basePaddingTop} + ${headerInset + stickyInset}px)`;
     const headerInsetValue = `${headerInset}px`;
@@ -223,6 +300,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     }
   }
   onVerticalScrollSettled = () => {
+    if (this.pendingTopFrame) return;
     this.savePageOffset(this.state.selectedPage);
     this.emitDiagnostics("scroll-settled");
   };
@@ -246,6 +324,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (position === null || position < 0 || position >= pages.length || position === this.state.selectedPage) {
       return;
     }
+    this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
     if (animated) this.beginPageTransition();else this.finishPageTransition();
     this.setState({
@@ -313,7 +392,9 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (!touch) return;
     const deltaX = touch.pageX - this.touchStartX;
     const deltaY = touch.pageY - (this.touchStartY ?? touch.pageY);
+    if (Math.abs(deltaY) >= 8 && Math.abs(deltaY) > Math.abs(deltaX)) this.cancelPendingTopFrame();
     if (Math.abs(deltaX) >= 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
+      this.cancelPendingTopFrame();
       this.horizontalTouch = true;
       this.emitPageScrollState("dragging");
     }

package/lib/module/CollapsiblePagerViewNativeComponent.ts

@@ -35,6 +35,8 @@ export type OnCollapsibleStateChangedEventData = Readonly<{
   observedScrollableCount: Int32;
   retainedPages: string;
   reason: string;
+  pageKey: string;
+  headerSettledAtTop: boolean;
 }>;
 
 export type OnNativeTabPressEventData = Readonly<{
@@ -83,6 +85,11 @@ export interface NativeProps extends ViewProps {
 type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
 
 export interface NativeCommands {
+  scrollToTop: (
+    viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
+    target: Int32,
+    animated: boolean
+  ) => void;
   setPage: (
     viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
     selectedPage: Int32
@@ -99,6 +106,7 @@ export interface NativeCommands {
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: [
+    "scrollToTop",
     "setPage",
     "setPageWithoutAnimation",
     "setScrollEnabledImperatively",

package/lib/typescript/src/CollapsiblePagerView.d.ts

@@ -113,6 +113,12 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     componentDidUpdate(): void;
     setPage: (selectedPage: number) => void;
     setPageWithoutAnimation: (selectedPage: number) => void;
+    scrollToPageTop: (options?: Readonly<{
+        animated?: boolean;
+    }>) => void;
+    scrollToStickyTop: (options?: Readonly<{
+        animated?: boolean;
+    }>) => void;
     setScrollEnabled: (scrollEnabled: boolean) => void;
     private pages;
     private nativeTabBarEnabled;

package/lib/typescript/src/CollapsiblePagerView.web.d.ts

@@ -62,6 +62,7 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private scrollEnabled;
     private lastMountSignature;
     private configureFrame;
+    private pendingTopFrame;
     private transitionTimer;
     private pageScrollState;
     private configuredScrollElement;
@@ -71,6 +72,16 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     componentWillUnmount(): void;
     setPage: (selectedPage: number) => void;
     setPageWithoutAnimation: (selectedPage: number) => void;
+    scrollToPageTop: (options?: Readonly<{
+        animated?: boolean;
+    }>) => void;
+    scrollToStickyTop: (options?: Readonly<{
+        animated?: boolean;
+    }>) => void;
+    private cancelPendingTopFrame;
+    private onQueuedTopWheel;
+    private onQueuedTopKey;
+    private scrollCurrentPageToTop;
     setScrollEnabled: (scrollEnabled: boolean) => void;
     private pages;
     private retentionDistance;

package/lib/typescript/src/CollapsiblePagerViewNativeComponent.d.ts

@@ -19,6 +19,8 @@ export type OnCollapsibleStateChangedEventData = Readonly<{
     observedScrollableCount: Int32;
     retainedPages: string;
     reason: string;
+    pageKey: string;
+    headerSettledAtTop: boolean;
 }>;
 export type OnNativeTabPressEventData = Readonly<{
     position: Int32;
@@ -62,6 +64,7 @@ export interface NativeProps extends ViewProps {
 }
 type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
 export interface NativeCommands {
+    scrollToTop: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, target: Int32, animated: boolean) => void;
     setPage: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, selectedPage: Int32) => void;
     setPageWithoutAnimation: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, selectedPage: Int32) => void;
     setScrollEnabledImperatively: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, scrollEnabled: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "3.0.173",
+  "version": "3.0.175",
   "description": "React Native wrapper for Android and iOS ViewPager",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -72,7 +72,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-native-logger": "3.0.173",
+    "@onekeyfe/react-native-native-logger": "3.0.175",
     "react": "*",
     "react-native": "*"
   },

package/src/CollapsiblePagerView.tsx

@@ -250,6 +250,24 @@ export class CollapsiblePagerView extends React.PureComponent<
     }
   };
 
+  public scrollToPageTop = (options?: Readonly<{ animated?: boolean }>) => {
+    if (this.nativeRef)
+      CollapsiblePagerViewNativeCommands.scrollToTop(
+        this.nativeRef,
+        0,
+        options?.animated ?? true
+      );
+  };
+
+  public scrollToStickyTop = (options?: Readonly<{ animated?: boolean }>) => {
+    if (this.nativeRef)
+      CollapsiblePagerViewNativeCommands.scrollToTop(
+        this.nativeRef,
+        1,
+        options?.animated ?? true
+      );
+  };
+
   public setScrollEnabled = (scrollEnabled: boolean) => {
     if (this.nativeRef) {
       CollapsiblePagerViewNativeCommands.setScrollEnabledImperatively(

package/src/CollapsiblePagerView.web.tsx

@@ -79,6 +79,8 @@ type State = {
 
 type ConfiguredScrollElement = Readonly<{
   element: HTMLElement;
+  rangeSpacer: HTMLElement;
+  position: string;
   paddingTop: string;
   basePaddingTop: string;
   boxSizing: string;
@@ -100,10 +102,7 @@ const pageIndex = (value: number) => {
 };
 
 const clampedPageIndex = (value: number, pageCount: number) =>
-  Math.min(
-    Math.max(0, pageIndex(value) ?? 0),
-    Math.max(0, pageCount - 1)
-  );
+  Math.min(Math.max(0, pageIndex(value) ?? 0), Math.max(0, pageCount - 1));
 
 const webElement = (node: unknown) => {
   const element = node as HTMLElement | null;
@@ -158,6 +157,11 @@ export class CollapsiblePagerView extends React.PureComponent<
   private scrollEnabled = this.props.scrollEnabled ?? true;
   private lastMountSignature: string | null = null;
   private configureFrame: number | null = null;
+  private pendingTopFrame: Readonly<{
+    frame: number;
+    element: HTMLElement;
+    key: string;
+  }> | null = null;
   private transitionTimer: ReturnType<typeof setTimeout> | null = null;
   private pageScrollState: OnPageScrollStateChangedEventData["pageScrollState"] =
     "idle";
@@ -184,6 +188,7 @@ export class CollapsiblePagerView extends React.PureComponent<
     const pageCount = this.pages().length;
     const selectedPage = clampedPageIndex(this.state.selectedPage, pageCount);
     if (selectedPage !== this.state.selectedPage) {
+      this.cancelPendingTopFrame();
       this.finishPageTransition();
       this.setState({
         selectedPage,
@@ -196,6 +201,7 @@ export class CollapsiblePagerView extends React.PureComponent<
   }
 
   componentWillUnmount() {
+    this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
     if (this.configureFrame !== null) {
       cancelAnimationFrame(this.configureFrame);
@@ -217,6 +223,85 @@ export class CollapsiblePagerView extends React.PureComponent<
     this.selectPage(selectedPage, false);
   };
 
+  public scrollToPageTop = (options?: Readonly<{ animated?: boolean }>) => {
+    this.scrollCurrentPageToTop(0, options?.animated ?? true);
+  };
+
+  public scrollToStickyTop = (options?: Readonly<{ animated?: boolean }>) => {
+    this.scrollCurrentPageToTop(
+      Math.max(0, this.props.headerHeight),
+      options?.animated ?? true
+    );
+  };
+
+  private cancelPendingTopFrame = () => {
+    if (!this.pendingTopFrame) return;
+    const pending = this.pendingTopFrame;
+    cancelAnimationFrame(pending.frame);
+    this.pendingTopFrame = null;
+    if (
+      this.pageScrollElement(this.state.selectedPage) === pending.element &&
+      this.pages().map(pageKey)[this.state.selectedPage] === pending.key
+    )
+      this.savePageOffset(this.state.selectedPage);
+  };
+
+  private onQueuedTopWheel = (event: WheelEvent) => {
+    if (event.deltaY !== 0) this.cancelPendingTopFrame();
+  };
+
+  private onQueuedTopKey = (event: KeyboardEvent) => {
+    if (
+      [
+        "ArrowUp",
+        "ArrowDown",
+        "PageUp",
+        "PageDown",
+        "Home",
+        "End",
+        " ",
+      ].includes(event.key)
+    )
+      this.cancelPendingTopFrame();
+  };
+
+  private scrollCurrentPageToTop(offset: number, animated: boolean) {
+    if (this.horizontalTouch || this.transitionTimer !== null) return;
+    const element = this.pageScrollElement(this.state.selectedPage);
+    const key = this.pages().map(pageKey)[this.state.selectedPage];
+    if (!element?.isConnected || !key) return;
+    this.cancelPendingTopFrame();
+    const EventConstructor = element.ownerDocument.defaultView?.Event;
+    if (EventConstructor)
+      element.dispatchEvent(
+        new EventConstructor("ok-collapsible-pager-cancel-scroll-command")
+      );
+    element.scrollTo({
+      left: element.scrollLeft,
+      top: element.scrollTop,
+      behavior: "instant",
+    });
+    const frame = requestAnimationFrame(() => {
+      if (this.pendingTopFrame?.frame !== frame) return;
+      this.pendingTopFrame = null;
+      if (
+        !element.isConnected ||
+        this.horizontalTouch ||
+        this.transitionTimer !== null ||
+        this.pageScrollElement(this.state.selectedPage) !== element ||
+        this.pages().map(pageKey)[this.state.selectedPage] !== key
+      )
+        return;
+      this.pageOffsets.set(key, offset);
+      this.sharedHeaderOffset = offset;
+      element.scrollTo({
+        top: offset,
+        behavior: animated ? "smooth" : "instant",
+      });
+    });
+    this.pendingTopFrame = { frame, element, key };
+  }
+
   public setScrollEnabled = (scrollEnabled: boolean) => {
     this.scrollEnabled = scrollEnabled;
   };
@@ -278,10 +363,7 @@ export class CollapsiblePagerView extends React.PureComponent<
   private setTrack = (node: unknown) => {
     const track = webElement(node);
     if (track === this.track) return;
-    this.track?.removeEventListener(
-      "transitionend",
-      this.onTrackTransitionEnd
-    );
+    this.track?.removeEventListener("transitionend", this.onTrackTransitionEnd);
     this.track = track;
     this.track?.addEventListener("transitionend", this.onTrackTransitionEnd);
   };
@@ -307,11 +389,20 @@ export class CollapsiblePagerView extends React.PureComponent<
   private restoreConfiguredScrollElement() {
     const configured = this.configuredScrollElement;
     if (!configured) return;
+    this.cancelPendingTopFrame();
+    configured.element.removeEventListener(
+      "ok-native-list-scroll-command-accepted",
+      this.cancelPendingTopFrame
+    );
+    configured.element.removeEventListener("wheel", this.onQueuedTopWheel);
+    configured.element.removeEventListener("keydown", this.onQueuedTopKey);
     configured.element.removeEventListener(
       "scrollend",
       this.onVerticalScrollSettled
     );
     const style = timelineStyle(configured.element);
+    configured.rangeSpacer.remove();
+    style.position = configured.position;
     style.paddingTop = configured.paddingTop;
     style.boxSizing = configured.boxSizing;
     style.scrollTimelineName = configured.scrollTimelineName;
@@ -332,9 +423,30 @@ export class CollapsiblePagerView extends React.PureComponent<
       const style = timelineStyle(element);
       const computedPaddingTop =
         element.ownerDocument.defaultView?.getComputedStyle(element)
-          .paddingTop || style.paddingTop || "0px";
+          .paddingTop ||
+        style.paddingTop ||
+        "0px";
+      const rangeSpacer = element.ownerDocument.createElement("div");
+      Object.assign(rangeSpacer.style, {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "1px",
+        pointerEvents: "none",
+        opacity: "0",
+      });
+      rangeSpacer.setAttribute("aria-hidden", "true");
+      const position = style.position;
+      if (
+        element.ownerDocument.defaultView?.getComputedStyle(element)
+          .position === "static"
+      )
+        style.position = "relative";
+      element.appendChild(rangeSpacer);
       this.configuredScrollElement = {
         element,
+        rangeSpacer,
+        position,
         paddingTop: style.paddingTop,
         basePaddingTop: computedPaddingTop,
         boxSizing: style.boxSizing,
@@ -344,13 +456,24 @@ export class CollapsiblePagerView extends React.PureComponent<
         pagerStickyInset: style.getPropertyValue(PAGER_STICKY_INSET),
       };
       element.addEventListener("scrollend", this.onVerticalScrollSettled);
+      element.addEventListener(
+        "ok-native-list-scroll-command-accepted",
+        this.cancelPendingTopFrame
+      );
+      element.addEventListener("wheel", this.onQueuedTopWheel);
+      element.addEventListener("keydown", this.onQueuedTopKey);
     }
 
     const style = timelineStyle(element);
     const headerInset = Math.max(0, this.props.headerHeight);
     const stickyInset = Math.max(0, this.props.stickyHeaderHeight);
-    const basePaddingTop = this.configuredScrollElement?.basePaddingTop ?? "0px";
-    const paddingTop = `calc(${basePaddingTop} + ${headerInset + stickyInset}px)`;
+    if (this.configuredScrollElement)
+      this.configuredScrollElement.rangeSpacer.style.height = `calc(100% + ${headerInset}px)`;
+    const basePaddingTop =
+      this.configuredScrollElement?.basePaddingTop ?? "0px";
+    const paddingTop = `calc(${basePaddingTop} + ${
+      headerInset + stickyInset
+    }px)`;
     const headerInsetValue = `${headerInset}px`;
     const stickyInsetValue = `${stickyInset}px`;
     const insetsChanged =
@@ -379,6 +502,7 @@ export class CollapsiblePagerView extends React.PureComponent<
   }
 
   private onVerticalScrollSettled = () => {
+    if (this.pendingTopFrame) return;
     this.savePageOffset(this.state.selectedPage);
     this.emitDiagnostics("scroll-settled");
   };
@@ -416,33 +540,37 @@ export class CollapsiblePagerView extends React.PureComponent<
     ) {
       return;
     }
+    this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
 
     if (animated) this.beginPageTransition();
     else this.finishPageTransition();
-    this.setState({ selectedPage: position, animateTransition: animated }, () => {
-      this.scheduleScrollConfiguration();
-      const restore = () => {
-        this.configureActiveScrollElement();
-        this.restorePageOffset(position);
-      };
-      if (typeof requestAnimationFrame === "function") {
-        requestAnimationFrame(restore);
-      } else {
-        setTimeout(restore, 0);
+    this.setState(
+      { selectedPage: position, animateTransition: animated },
+      () => {
+        this.scheduleScrollConfiguration();
+        const restore = () => {
+          this.configureActiveScrollElement();
+          this.restorePageOffset(position);
+        };
+        if (typeof requestAnimationFrame === "function") {
+          requestAnimationFrame(restore);
+        } else {
+          setTimeout(restore, 0);
+        }
+        this.props.onPageSelected?.(
+          this.nativeEvent<OnPageSelectedEventData>({ position })
+        );
+        this.props.onPageScroll?.(
+          this.nativeEvent<OnPageScrollEventData>({
+            position,
+            offset: 0,
+          })
+        );
+        this.notifyMountedPagesChanged();
+        this.emitDiagnostics("page-selected");
       }
-      this.props.onPageSelected?.(
-        this.nativeEvent<OnPageSelectedEventData>({ position })
-      );
-      this.props.onPageScroll?.(
-        this.nativeEvent<OnPageScrollEventData>({
-          position,
-          offset: 0,
-        })
-      );
-      this.notifyMountedPagesChanged();
-      this.emitDiagnostics("page-selected");
-    });
+    );
   }
 
   private notifyMountedPagesChanged = () => {
@@ -500,7 +628,10 @@ export class CollapsiblePagerView extends React.PureComponent<
     if (!touch) return;
     const deltaX = touch.pageX - this.touchStartX;
     const deltaY = touch.pageY - (this.touchStartY ?? touch.pageY);
+    if (Math.abs(deltaY) >= 8 && Math.abs(deltaY) > Math.abs(deltaX))
+      this.cancelPendingTopFrame();
     if (Math.abs(deltaX) >= 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
+      this.cancelPendingTopFrame();
       this.horizontalTouch = true;
       this.emitPageScrollState("dragging");
     }
@@ -522,9 +653,12 @@ export class CollapsiblePagerView extends React.PureComponent<
       ((!this.props.layoutDirection ||
         this.props.layoutDirection === "locale") &&
         I18nManager.isRTL);
-    const direction = Math.abs(delta) >= 40 && Math.abs(delta) > Math.abs(verticalDelta)
-      ? (delta < 0 ? 1 : -1)
-      : 0;
+    const direction =
+      Math.abs(delta) >= 40 && Math.abs(delta) > Math.abs(verticalDelta)
+        ? delta < 0
+          ? 1
+          : -1
+        : 0;
     const next = this.state.selectedPage + (rtl ? -direction : direction);
     if (direction === 0 || next < 0 || next >= this.pages().length) {
       const wasHorizontal = this.horizontalTouch;

package/src/CollapsiblePagerViewNativeComponent.ts

@@ -35,6 +35,8 @@ export type OnCollapsibleStateChangedEventData = Readonly<{
   observedScrollableCount: Int32;
   retainedPages: string;
   reason: string;
+  pageKey: string;
+  headerSettledAtTop: boolean;
 }>;
 
 export type OnNativeTabPressEventData = Readonly<{
@@ -83,6 +85,11 @@ export interface NativeProps extends ViewProps {
 type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
 
 export interface NativeCommands {
+  scrollToTop: (
+    viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
+    target: Int32,
+    animated: boolean
+  ) => void;
   setPage: (
     viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
     selectedPage: Int32
@@ -99,6 +106,7 @@ export interface NativeCommands {
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: [
+    "scrollToTop",
     "setPage",
     "setPageWithoutAnimation",
     "setScrollEnabledImperatively",