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

package/src/CollapsiblePagerView.tsx

@@ -6,6 +6,7 @@ import CollapsiblePagerViewNativeComponent, {
   Commands as CollapsiblePagerViewNativeCommands,
   type NativeProps,
   type OnCollapsibleStateChangedEventData,
+  type OnNativeTabPressEventData,
 } from "./CollapsiblePagerViewNativeComponent";
 import type {
   OnPageScrollEventData,
@@ -22,6 +23,63 @@ export type CollapsiblePagerMountState = Readonly<{
   pageKeys: readonly string[];
 }>;
 
+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,
@@ -30,6 +88,22 @@ export interface CollapsiblePagerViewProps
     | "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. */
@@ -40,6 +114,11 @@ export interface CollapsiblePagerViewProps
   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
@@ -47,12 +126,21 @@ export interface CollapsiblePagerViewProps
    */
   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[];
 };
 
 const pageIndex = (value: number) => {
@@ -61,10 +149,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 pageKey = (child: React.ReactNode, index: number) => {
   if (React.isValidElement(child) && child.key != null) {
@@ -87,6 +172,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       this.props.initialPage ?? 0,
       React.Children.toArray(this.props.children).length
     ),
+    transientRetainedPages: [],
   };
 
   private nativeRef: React.ElementRef<
@@ -95,6 +181,10 @@ export class CollapsiblePagerView extends React.PureComponent<
 
   private lastMountSignature: string | null = null;
 
+  private nativeTabCommandId = 0;
+
+  private latestNativeTabTarget: number | null = null;
+
   componentDidMount() {
     this.notifyMountedPagesChanged();
   }
@@ -117,7 +207,11 @@ export class CollapsiblePagerView extends React.PureComponent<
       position >= 0 &&
       position < this.pages().length
     ) {
-      CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, position);
+      if (this.nativeTabBarEnabled()) {
+        this.dispatchNativeTabPageCommand(position, true);
+      } else {
+        CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, position);
+      }
     }
   };
 
@@ -129,10 +223,14 @@ export class CollapsiblePagerView extends React.PureComponent<
       position >= 0 &&
       position < this.pages().length
     ) {
-      CollapsiblePagerViewNativeCommands.setPageWithoutAnimation(
-        this.nativeRef,
-        position
-      );
+      if (this.nativeTabBarEnabled()) {
+        this.dispatchNativeTabPageCommand(position, false);
+      } else {
+        CollapsiblePagerViewNativeCommands.setPageWithoutAnimation(
+          this.nativeRef,
+          position
+        );
+      }
     }
   };
 
@@ -149,6 +247,43 @@ export class CollapsiblePagerView extends React.PureComponent<
     return React.Children.toArray(this.props.children);
   }
 
+  private nativeTabBarEnabled() {
+    return (
+      (Platform.OS === "ios" || Platform.OS === "android") &&
+      !!this.props.nativeTabBar?.items.length
+    );
+  }
+
+  private dispatchNativeTabPageCommand(position: number, animated: boolean) {
+    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
+            );
+          }
+        });
+      }
+    );
+  }
+
   private retentionDistance() {
     return Math.max(0, Math.floor(this.props.pageRetentionDistance ?? 1));
   }
@@ -161,7 +296,10 @@ export class CollapsiblePagerView extends React.PureComponent<
     );
     const mounted: number[] = [];
     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);
       }
     }
@@ -193,12 +331,41 @@ export class CollapsiblePagerView extends React.PureComponent<
       event.nativeEvent.position,
       this.pages().length
     );
-    if (position !== this.state.selectedPage) {
-      this.setState({ selectedPage: position }, this.notifyMountedPagesChanged);
+    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,
+          transientRetainedPages:
+            !transitionComplete && pendingTarget !== null
+              ? [pendingTarget]
+              : [],
+        },
+        this.notifyMountedPagesChanged
+      );
     }
     this.props.onPageSelected?.(event);
   };
 
+  private onNativeTabPress = (
+    event: ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>
+  ) => {
+    this.props.onNativeTabPress?.(event);
+  };
+
+  private onNativeSubHeaderPress = (
+    event: ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>
+  ) => {
+    this.props.onNativeSubHeaderPress?.(event);
+  };
+
   render() {
     const {
       children: _children,
@@ -206,9 +373,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,
@@ -223,6 +395,23 @@ export class CollapsiblePagerView extends React.PureComponent<
           ? "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 (
       <CollapsiblePagerViewNativeComponent
@@ -238,15 +427,76 @@ 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
+        }
       >
         <View
           key="collapsible-header"
           collapsable={false}
           pointerEvents="box-none"
-          style={[styles.slot, { bottom: undefined, height: Math.max(0, Math.round(headerHeight)) }]}
+          style={[
+            styles.slot,
+            {
+              bottom: undefined,
+              height: Math.max(0, Math.round(headerHeight)),
+            },
+          ]}
         >
           {header}
         </View>

package/src/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>;