@onekeyfe/react-native-pager-view 3.0.122 → 3.0.124

package/src/CollapsiblePagerView.tsx

@@ -185,6 +185,13 @@ export class CollapsiblePagerView extends React.PureComponent<
 
   private latestNativeTabTarget: number | null = null;
 
+  private latestNativeSelectedPage = this.state.selectedPage;
+
+  private nativePagerScrollState: OnPageScrollStateChangedEventData["pageScrollState"] =
+    "idle";
+
+  private nativeTabCommandQueuedDuringScroll = false;
+
   componentDidMount() {
     this.notifyMountedPagesChanged();
   }
@@ -256,6 +263,8 @@ export class CollapsiblePagerView extends React.PureComponent<
 
   private dispatchNativeTabPageCommand(position: number, animated: boolean) {
     const commandId = ++this.nativeTabCommandId;
+    this.nativeTabCommandQueuedDuringScroll =
+      this.nativePagerScrollState !== "idle";
     this.latestNativeTabTarget = position;
     this.setState(
       (state) => ({
@@ -331,6 +340,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       event.nativeEvent.position,
       this.pages().length
     );
+    this.latestNativeSelectedPage = position;
     if (
       position !== this.state.selectedPage ||
       this.state.transientRetainedPages.length > 0
@@ -339,6 +349,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       const transitionComplete = pendingTarget === position;
       if (transitionComplete) {
         this.latestNativeTabTarget = null;
+        this.nativeTabCommandQueuedDuringScroll = false;
       }
       this.setState(
         {
@@ -354,9 +365,46 @@ export class CollapsiblePagerView extends React.PureComponent<
     this.props.onPageSelected?.(event);
   };
 
+  private onPageScrollStateChanged = (
+    event: ReactNative.NativeSyntheticEvent<OnPageScrollStateChangedEventData>
+  ) => {
+    const scrollState = event.nativeEvent.pageScrollState;
+    const queuedDuringPreviousScroll = this.nativeTabCommandQueuedDuringScroll;
+    this.nativePagerScrollState = scrollState;
+    // Native drains tab commands queued during an active drag after reporting
+    // that drag as idle. Preserve the newer target through that first idle.
+    if (
+      scrollState === "idle" &&
+      this.latestNativeTabTarget !== null &&
+      this.latestNativeTabTarget !== this.latestNativeSelectedPage &&
+      !queuedDuringPreviousScroll
+    ) {
+      ++this.nativeTabCommandId;
+      this.latestNativeTabTarget = null;
+      this.setState(
+        { transientRetainedPages: [] },
+        this.notifyMountedPagesChanged
+      );
+    }
+    if (scrollState === "idle") {
+      this.nativeTabCommandQueuedDuringScroll = false;
+    }
+    this.props.onPageScrollStateChanged?.(event);
+  };
+
   private onNativeTabPress = (
     event: ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>
   ) => {
+    const position = pageIndex(event.nativeEvent.position);
+    if (
+      position !== null &&
+      position >= 0 &&
+      position < this.pages().length &&
+      (position !== this.state.selectedPage ||
+        this.latestNativeTabTarget !== null)
+    ) {
+      this.dispatchNativeTabPageCommand(position, true);
+    }
     this.props.onNativeTabPress?.(event);
   };
 
@@ -377,6 +425,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       pageRetentionDistance: _pageRetentionDistance,
       onMountedPagesChanged: _onMountedPagesChanged,
       onPageSelected: _onPageSelected,
+      onPageScrollStateChanged: _onPageScrollStateChanged,
       nativeTabBar,
       onNativeTabPress: _onNativeTabPress,
       nativeSubHeader,
@@ -431,6 +480,7 @@ export class CollapsiblePagerView extends React.PureComponent<
         pageKeys={JSON.stringify(pageKeys)}
         retainedPages={JSON.stringify([...retained])}
         onPageSelected={this.onPageSelected}
+        onPageScrollStateChanged={this.onPageScrollStateChanged}
         nativeTabBarItems={
           nativeTabBarEnabled ? JSON.stringify(nativeTabBar.items) : undefined
         }

package/src/NativeScroller.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { ScrollView, type ScrollViewProps } from "react-native";
+
+export const NATIVE_SCROLLER_NATIVE_ID_PREFIX =
+  "rnc-collapsible-pager-native-scroller";
+
+export interface NativeScrollerProps extends ScrollViewProps {
+  /** Stable identity used when a page replaces or remounts its primary scroller. */
+  pagerScrollKey?: string;
+}
+
+/**
+ * Primary non-virtualized vertical scroller for a CollapsiblePagerView page.
+ */
+export const NativeScroller = React.forwardRef<
+  React.ElementRef<typeof ScrollView>,
+  NativeScrollerProps
+>(function NativeScroller(
+  { nativeID, nestedScrollEnabled = true, pagerScrollKey, ...props },
+  ref
+) {
+  const generatedId = React.useId();
+  const scrollKey = pagerScrollKey ?? nativeID ?? generatedId;
+
+  return (
+    <ScrollView
+      {...props}
+      ref={ref}
+      nativeID={`${NATIVE_SCROLLER_NATIVE_ID_PREFIX}:${scrollKey}`}
+      nestedScrollEnabled={nestedScrollEnabled}
+    />
+  );
+});
+
+NativeScroller.displayName = "NativeScroller";

package/src/NativeScroller.web.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { ScrollView } from "react-native";
+
+import type { NativeScrollerProps } from "./NativeScroller";
+
+type NativeScrollerWebProps = NativeScrollerProps & {
+  dataSet?: Record<string, string>;
+};
+
+export const NativeScroller = React.forwardRef<
+  React.ElementRef<typeof ScrollView>,
+  NativeScrollerProps
+>(function NativeScroller(inputProps, ref) {
+  const {
+    dataSet,
+    pagerScrollKey: _pagerScrollKey,
+    ...props
+  } = inputProps as NativeScrollerWebProps;
+  const webDataProps = {
+    dataSet: {
+      ...dataSet,
+      collapsiblePagerScroll: "true",
+    },
+  };
+
+  return <ScrollView {...props} ref={ref} {...webDataProps} />;
+});
+
+NativeScroller.displayName = "NativeScroller";
+
+export type { NativeScrollerProps } from "./NativeScroller";

package/src/index.tsx

@@ -3,6 +3,7 @@ import { PagerView } from './PagerView';
 export default PagerView;
 export * from './usePagerView';
 export * from './CollapsiblePagerView';
+export * from './NativeScroller';
 
 import type {
   OnPageScrollEventData as PagerViewOnPageScrollEventData,

package/src/index.web.tsx

@@ -10,3 +10,4 @@ export type {
 } from "./PagerView.web";
 export * from "./usePagerView";
 export * from "./CollapsiblePagerView.web";
+export * from "./NativeScroller.web";