@onekeyfe/react-native-pager-view 3.0.118 → 3.0.120

package/lib/module/CollapsiblePagerView.js

@@ -23,10 +23,13 @@ const pageKey = (child, index) => {
  */
 export class CollapsiblePagerView extends React.PureComponent {
   state = {
-    selectedPage: clampedPageIndex(this.props.initialPage ?? 0, React.Children.toArray(this.props.children).length)
+    selectedPage: clampedPageIndex(this.props.initialPage ?? 0, React.Children.toArray(this.props.children).length),
+    transientRetainedPages: []
   };
   nativeRef = null;
   lastMountSignature = null;
+  nativeTabCommandId = 0;
+  latestNativeTabTarget = null;
   componentDidMount() {
     this.notifyMountedPagesChanged();
   }
@@ -44,13 +47,21 @@ export class CollapsiblePagerView extends React.PureComponent {
   setPage = selectedPage => {
     const position = pageIndex(selectedPage);
     if (this.nativeRef && position !== null && position >= 0 && position < this.pages().length) {
-      CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, position);
+      if (this.nativeTabBarEnabled()) {
+        this.dispatchNativeTabPageCommand(position, true);
+      } else {
+        CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, position);
+      }
     }
   };
   setPageWithoutAnimation = selectedPage => {
     const position = pageIndex(selectedPage);
     if (this.nativeRef && position !== null && position >= 0 && position < this.pages().length) {
-      CollapsiblePagerViewNativeCommands.setPageWithoutAnimation(this.nativeRef, position);
+      if (this.nativeTabBarEnabled()) {
+        this.dispatchNativeTabPageCommand(position, false);
+      } else {
+        CollapsiblePagerViewNativeCommands.setPageWithoutAnimation(this.nativeRef, position);
+      }
     }
   };
   setScrollEnabled = scrollEnabled => {
@@ -61,6 +72,27 @@ export class CollapsiblePagerView extends React.PureComponent {
   pages() {
     return React.Children.toArray(this.props.children);
   }
+  nativeTabBarEnabled() {
+    return (Platform.OS === "ios" || Platform.OS === "android") && !!this.props.nativeTabBar?.items.length;
+  }
+  dispatchNativeTabPageCommand(position, animated) {
+    const commandId = ++this.nativeTabCommandId;
+    this.latestNativeTabTarget = position;
+    this.setState(state => ({
+      transientRetainedPages: state.transientRetainedPages.includes(position) ? state.transientRetainedPages : [...state.transientRetainedPages, position]
+    }), () => {
+      requestAnimationFrame(() => {
+        if (commandId !== this.nativeTabCommandId || !this.nativeRef) {
+          return;
+        }
+        if (animated) {
+          CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, position);
+        } else {
+          CollapsiblePagerViewNativeCommands.setPageWithoutAnimation(this.nativeRef, position);
+        }
+      });
+    });
+  }
   retentionDistance() {
     return Math.max(0, Math.floor(this.props.pageRetentionDistance ?? 1));
   }
@@ -69,7 +101,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     const selected = Math.min(Math.max(0, this.state.selectedPage), Math.max(0, pageCount - 1));
     const mounted = [];
     for (let index = 0; index < pageCount; index += 1) {
-      if (Math.abs(index - selected) <= distance) {
+      if (Math.abs(index - selected) <= distance || this.state.transientRetainedPages.includes(index)) {
         mounted.push(index);
       }
     }
@@ -94,13 +126,25 @@ export class CollapsiblePagerView extends React.PureComponent {
   };
   onPageSelected = event => {
     const position = clampedPageIndex(event.nativeEvent.position, this.pages().length);
-    if (position !== this.state.selectedPage) {
+    if (position !== this.state.selectedPage || this.state.transientRetainedPages.length > 0) {
+      const pendingTarget = this.latestNativeTabTarget;
+      const transitionComplete = pendingTarget === position;
+      if (transitionComplete) {
+        this.latestNativeTabTarget = null;
+      }
       this.setState({
-        selectedPage: position
+        selectedPage: position,
+        transientRetainedPages: !transitionComplete && pendingTarget !== null ? [pendingTarget] : []
       }, this.notifyMountedPagesChanged);
     }
     this.props.onPageSelected?.(event);
   };
+  onNativeTabPress = event => {
+    this.props.onNativeTabPress?.(event);
+  };
+  onNativeSubHeaderPress = event => {
+    this.props.onNativeSubHeaderPress?.(event);
+  };
   render() {
     const {
       children: _children,
@@ -108,9 +152,14 @@ export class CollapsiblePagerView extends React.PureComponent {
       stickyHeader,
       headerHeight,
       stickyHeaderHeight,
+      nativeSmoothHeaderScrollEnabled,
       pageRetentionDistance: _pageRetentionDistance,
       onMountedPagesChanged: _onMountedPagesChanged,
       onPageSelected: _onPageSelected,
+      nativeTabBar,
+      onNativeTabPress: _onNativeTabPress,
+      nativeSubHeader,
+      onNativeSubHeaderPress: _onNativeSubHeaderPress,
       layoutDirection,
       initialPage: _initialPage,
       offscreenPageLimit,
@@ -120,6 +169,17 @@ export class CollapsiblePagerView extends React.PureComponent {
     const pageKeys = pages.map(pageKey);
     const retained = new Set(this.mountedPages(pages.length));
     const deducedLayoutDirection = !layoutDirection || layoutDirection === "locale" ? I18nManager.isRTL ? "rtl" : "ltr" : layoutDirection;
+    const nativeTabBarEnabled = (Platform.OS === "ios" || Platform.OS === "android") && !!nativeTabBar?.items.length;
+    const nativeTabBarStyle = nativeTabBar?.style;
+    const nativeSubHeaderEnabled = (Platform.OS === "ios" || Platform.OS === "android") && !!nativeSubHeader?.items.length;
+    const nativeSubHeaderStyle = nativeSubHeader?.style;
+    const nativeSubHeaderConfig = nativeSubHeaderEnabled ? JSON.stringify({
+      ...nativeSubHeader,
+      style: {
+        ...nativeSubHeaderStyle,
+        selectedBackgroundColor: undefined
+      }
+    }) : undefined;
     return /*#__PURE__*/_jsxs(CollapsiblePagerViewNativeComponent, {
       ...nativeProps,
       ref: ref => {
@@ -130,9 +190,26 @@ 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)),
+      nativeSmoothHeaderScrollEnabled: nativeSmoothHeaderScrollEnabled,
       pageKeys: JSON.stringify(pageKeys),
       retainedPages: JSON.stringify([...retained]),
       onPageSelected: this.onPageSelected,
+      nativeTabBarItems: nativeTabBarEnabled ? JSON.stringify(nativeTabBar.items) : undefined,
+      nativeTabBarHeight: nativeTabBarEnabled ? nativeTabBarStyle?.height ?? 44 : undefined,
+      nativeTabBarContentPaddingHorizontal: nativeTabBarEnabled ? nativeTabBarStyle?.contentPaddingHorizontal ?? 20 : undefined,
+      nativeTabBarItemSpacing: nativeTabBarEnabled ? nativeTabBarStyle?.itemSpacing ?? 8 : undefined,
+      nativeTabBarFontSize: nativeTabBarEnabled ? nativeTabBarStyle?.fontSize ?? 16 : undefined,
+      nativeTabBarFontFamily: nativeTabBarEnabled ? nativeTabBarStyle?.fontFamily : undefined,
+      nativeTabBarBackgroundColor: nativeTabBarEnabled ? nativeTabBarStyle?.backgroundColor : undefined,
+      nativeTabBarActiveTextColor: nativeTabBarEnabled ? nativeTabBarStyle?.activeTextColor : undefined,
+      nativeTabBarInactiveTextColor: nativeTabBarEnabled ? nativeTabBarStyle?.inactiveTextColor : undefined,
+      nativeTabBarIndicatorColor: nativeTabBarEnabled ? nativeTabBarStyle?.indicatorColor : undefined,
+      nativeTabBarIndicatorHeight: nativeTabBarEnabled ? nativeTabBarStyle?.indicatorHeight ?? 2 : undefined,
+      nativeTabBarIndicatorBottom: nativeTabBarEnabled ? nativeTabBarStyle?.indicatorBottom ?? 0 : undefined,
+      nativeSubHeaderConfig: nativeSubHeaderConfig,
+      nativeSubHeaderSelectedBackgroundColor: nativeSubHeaderEnabled ? nativeSubHeaderStyle?.selectedBackgroundColor : undefined,
+      onNativeTabPress: nativeTabBarEnabled ? this.onNativeTabPress : undefined,
+      onNativeSubHeaderPress: nativeSubHeaderEnabled ? this.onNativeSubHeaderPress : undefined,
       children: [/*#__PURE__*/_jsx(View, {
         collapsable: false,
         pointerEvents: "box-none",

package/lib/module/CollapsiblePagerViewNativeComponent.ts

@@ -2,6 +2,7 @@ import type * as React from "react";
 import {
   codegenNativeCommands,
   codegenNativeComponent,
+  type ColorValue,
   type HostComponent,
   type ViewProps,
 } from "react-native";
@@ -36,6 +37,11 @@ export type OnCollapsibleStateChangedEventData = Readonly<{
   reason: string;
 }>;
 
+export type OnNativeTabPressEventData = Readonly<{
+  position: Int32;
+  key: string;
+}>;
+
 /**
  * Internal native props. Consumers should use CollapsiblePagerViewProps from
  * CollapsiblePagerView instead of mounting this host component directly.
@@ -47,14 +53,31 @@ export interface NativeProps extends ViewProps {
   offscreenPageLimit?: Int32;
   // OneKey patch: Preserve nested pager gesture coordination for collapsible pages.
   nestedScrollEnabled?: WithDefault<boolean, false>;
+  nativeSmoothHeaderScrollEnabled?: WithDefault<boolean, false>;
   headerHeight?: Int32;
   stickyHeaderHeight?: Int32;
   pageKeys?: string;
   retainedPages?: string;
+  nativeTabBarItems?: string;
+  nativeTabBarHeight?: Double;
+  nativeTabBarContentPaddingHorizontal?: Double;
+  nativeTabBarItemSpacing?: Double;
+  nativeTabBarFontSize?: Double;
+  nativeTabBarFontFamily?: string;
+  nativeTabBarBackgroundColor?: ColorValue;
+  nativeTabBarActiveTextColor?: ColorValue;
+  nativeTabBarInactiveTextColor?: ColorValue;
+  nativeTabBarIndicatorColor?: ColorValue;
+  nativeTabBarIndicatorHeight?: Double;
+  nativeTabBarIndicatorBottom?: Double;
+  nativeSubHeaderConfig?: string;
+  nativeSubHeaderSelectedBackgroundColor?: ColorValue;
   onPageScroll?: DirectEventHandler<OnPageScrollEventData>;
   onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
   onPageScrollStateChanged?: DirectEventHandler<OnPageScrollStateChangedEventData>;
   onCollapsibleStateChanged?: DirectEventHandler<OnCollapsibleStateChangedEventData>;
+  onNativeTabPress?: DirectEventHandler<OnNativeTabPressEventData>;
+  onNativeSubHeaderPress?: DirectEventHandler<OnNativeTabPressEventData>;
 }
 
 type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type * as ReactNative from "react-native";
-import { type NativeProps, type OnCollapsibleStateChangedEventData } from "./CollapsiblePagerViewNativeComponent";
+import { type NativeProps, type OnCollapsibleStateChangedEventData, type OnNativeTabPressEventData } from "./CollapsiblePagerViewNativeComponent";
 import type { OnPageScrollEventData, OnPageScrollStateChangedEventData, OnPageSelectedEventData } from "./PagerViewNativeComponent";
 export type CollapsiblePagerDiagnostics = ReactNative.NativeSyntheticEvent<OnCollapsibleStateChangedEventData>;
 export type CollapsiblePagerMountState = Readonly<{
@@ -8,7 +8,54 @@ export type CollapsiblePagerMountState = Readonly<{
     mountedPages: readonly number[];
     pageKeys: readonly string[];
 }>;
-export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "pageKeys" | "retainedPages" | "layoutDirection"> {
+export type CollapsiblePagerNativeTabBarItem = Readonly<{
+    key: string;
+    title: string;
+    accessibilityLabel?: string;
+    testID?: string;
+}>;
+export type CollapsiblePagerNativeTabBarStyle = Readonly<{
+    height?: number;
+    contentPaddingHorizontal?: number;
+    itemSpacing?: number;
+    fontSize?: number;
+    fontFamily?: string;
+    backgroundColor?: ReactNative.ColorValue;
+    activeTextColor?: ReactNative.ColorValue;
+    inactiveTextColor?: ReactNative.ColorValue;
+    indicatorColor?: ReactNative.ColorValue;
+    indicatorHeight?: number;
+    indicatorBottom?: number;
+}>;
+export type CollapsiblePagerNativeTabBarConfig = Readonly<{
+    items: readonly CollapsiblePagerNativeTabBarItem[];
+    style?: CollapsiblePagerNativeTabBarStyle;
+}>;
+export type CollapsiblePagerNativeSubHeaderColumns = Readonly<{
+    leading: string;
+    middle: string;
+    trailing: string;
+}>;
+export type CollapsiblePagerNativeSubHeaderStyle = Readonly<{
+    height?: number;
+    tabsHeight?: number;
+    contentPaddingHorizontal?: number;
+    itemSpacing?: number;
+    fontSize?: number;
+    columnFontSize?: number;
+    trailingColumnWidth?: number;
+    columnGap?: number;
+    selectedBackgroundColor?: ReactNative.ColorValue;
+}>;
+export type CollapsiblePagerNativeSubHeaderConfig = Readonly<{
+    items: readonly CollapsiblePagerNativeTabBarItem[];
+    selectedKey: string;
+    columns: CollapsiblePagerNativeSubHeaderColumns;
+    style?: CollapsiblePagerNativeSubHeaderStyle;
+}>;
+export type CollapsiblePagerViewOnNativeTabPressEvent = ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>;
+export type CollapsiblePagerViewOnNativeSubHeaderPressEvent = ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>;
+export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "pageKeys" | "retainedPages" | "nativeTabBarItems" | "nativeTabBarHeight" | "nativeTabBarContentPaddingHorizontal" | "nativeTabBarItemSpacing" | "nativeTabBarFontSize" | "nativeTabBarFontFamily" | "nativeTabBarBackgroundColor" | "nativeTabBarActiveTextColor" | "nativeTabBarInactiveTextColor" | "nativeTabBarIndicatorColor" | "nativeTabBarIndicatorHeight" | "nativeTabBarIndicatorBottom" | "nativeSubHeaderConfig" | "nativeSubHeaderSelectedBackgroundColor" | "onNativeTabPress" | "onNativeSubHeaderPress" | "layoutDirection"> {
     /** Collapsible content rendered above the sticky bar. */
     header: React.ReactNode;
     /** Bar which remains pinned after the header has collapsed. */
@@ -17,6 +64,11 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
     headerHeight: number;
     /** Measured sticky bar height. */
     stickyHeaderHeight: number;
+    /**
+     * Lets the active native list own vertical gestures that begin on pager headers.
+     * Defaults to false and has no effect on Web.
+     */
+    nativeSmoothHeaderScrollEnabled?: boolean;
     /**
      * Number of pages retained on either side of the selected page. Page slots
      * remain stable, while distant React/native list subtrees are really
@@ -24,11 +76,18 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
      */
     pageRetentionDistance?: number;
     layoutDirection?: "ltr" | "rtl" | "locale";
+    /** Optional native tab bar for iOS and Android. */
+    nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
+    onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
+    /** Optional native secondary sticky header for iOS and Android. */
+    nativeSubHeader?: CollapsiblePagerNativeSubHeaderConfig;
+    onNativeSubHeaderPress?: (event: CollapsiblePagerViewOnNativeSubHeaderPressEvent) => void;
     children?: React.ReactNode;
     onMountedPagesChanged?: (state: CollapsiblePagerMountState) => void;
 }
 type State = {
     selectedPage: number;
+    transientRetainedPages: readonly number[];
 };
 /**
  * Pager variant whose vertical header coordination is performed by the native
@@ -39,16 +98,22 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     state: State;
     private nativeRef;
     private lastMountSignature;
+    private nativeTabCommandId;
+    private latestNativeTabTarget;
     componentDidMount(): void;
     componentDidUpdate(): void;
     setPage: (selectedPage: number) => void;
     setPageWithoutAnimation: (selectedPage: number) => void;
     setScrollEnabled: (scrollEnabled: boolean) => void;
     private pages;
+    private nativeTabBarEnabled;
+    private dispatchNativeTabPageCommand;
     private retentionDistance;
     private mountedPages;
     private notifyMountedPagesChanged;
     private onPageSelected;
+    private onNativeTabPress;
+    private onNativeSubHeaderPress;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export type CollapsiblePagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<OnPageScrollEventData>;

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

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import { type HostComponent, type ViewProps } from "react-native";
+import { type ColorValue, type HostComponent, type ViewProps } from "react-native";
 import type { DirectEventHandler, Double, Int32, WithDefault } from "react-native/Libraries/Types/CodegenTypes";
 export type OnPageScrollEventData = Readonly<{
     position: Double;
@@ -20,6 +20,10 @@ export type OnCollapsibleStateChangedEventData = Readonly<{
     retainedPages: string;
     reason: string;
 }>;
+export type OnNativeTabPressEventData = Readonly<{
+    position: Int32;
+    key: string;
+}>;
 /**
  * Internal native props. Consumers should use CollapsiblePagerViewProps from
  * CollapsiblePagerView instead of mounting this host component directly.
@@ -30,14 +34,31 @@ export interface NativeProps extends ViewProps {
     initialPage?: Int32;
     offscreenPageLimit?: Int32;
     nestedScrollEnabled?: WithDefault<boolean, false>;
+    nativeSmoothHeaderScrollEnabled?: WithDefault<boolean, false>;
     headerHeight?: Int32;
     stickyHeaderHeight?: Int32;
     pageKeys?: string;
     retainedPages?: string;
+    nativeTabBarItems?: string;
+    nativeTabBarHeight?: Double;
+    nativeTabBarContentPaddingHorizontal?: Double;
+    nativeTabBarItemSpacing?: Double;
+    nativeTabBarFontSize?: Double;
+    nativeTabBarFontFamily?: string;
+    nativeTabBarBackgroundColor?: ColorValue;
+    nativeTabBarActiveTextColor?: ColorValue;
+    nativeTabBarInactiveTextColor?: ColorValue;
+    nativeTabBarIndicatorColor?: ColorValue;
+    nativeTabBarIndicatorHeight?: Double;
+    nativeTabBarIndicatorBottom?: Double;
+    nativeSubHeaderConfig?: string;
+    nativeSubHeaderSelectedBackgroundColor?: ColorValue;
     onPageScroll?: DirectEventHandler<OnPageScrollEventData>;
     onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
     onPageScrollStateChanged?: DirectEventHandler<OnPageScrollStateChangedEventData>;
     onCollapsibleStateChanged?: DirectEventHandler<OnCollapsibleStateChangedEventData>;
+    onNativeTabPress?: DirectEventHandler<OnNativeTabPressEventData>;
+    onNativeSubHeaderPress?: DirectEventHandler<OnNativeTabPressEventData>;
 }
 type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
 export interface NativeCommands {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "3.0.118",
+  "version": "3.0.120",
   "description": "React Native wrapper for Android and iOS ViewPager",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -39,7 +39,7 @@
     "prepare": "rm -rf lib && bob build",
     "typecheck": "tsc -b",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "test": "jest",
+    "test": "node --test src/__tests__/*.cjs",
     "release": "yarn prepare && npm whoami && npm publish --access public"
   },
   "keywords": [
@@ -67,6 +67,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
+    "@onekeyfe/react-native-native-logger": "3.0.120",
     "react": "*",
     "react-native": "*"
   },