@onekeyfe/react-native-pager-view 3.0.142 → 3.0.145

package/README.md

@@ -67,5 +67,11 @@ Web scroll child can opt in by exposing a DOM element with
 `data-collapsible-pager-scroll`. CSS scroll timelines drive header/sticky
 movement, so React is not updated on each vertical scroll frame.
 
+On iOS and Android, `nativeTabBar` renders the tab bar natively and
+`onNativeTabPress` reports presses. A press animates to the pressed page by
+default. Set `nativeTabPressAnimationEnabled={false}` to jump straight there,
+so pressing a distant tab does not scroll through every page in between,
+including unmounted pages that would show blank.
+
 Thank you again to Callstack and everyone who contributes to
 `react-native-pager-view` 💙

package/ios/RNCCollapsiblePagerViewComponentView.mm

@@ -130,6 +130,14 @@ static UIColor *RNCInterpolateColor(UIColor *from, UIColor *to, CGFloat progress
   return shouldBegin;
 }
 
+// Tab and category items are UIButtons that start tracking on touch-down, and UIScrollView does
+// not cancel UIControl touches by default, so a drag that began on an item never scrolled the bar.
+// The host NativeList used to hide this by holding touch-down back for about 150 ms.
+- (BOOL)touchesShouldCancelInContentView:(UIView *)view
+{
+  return [view isKindOfClass:UIControl.class] ? YES : [super touchesShouldCancelInContentView:view];
+}
+
 @end
 
 static void RNCLogNativeTabScrollBoundary(NSString *owner,

package/lib/module/CollapsiblePagerView.js

@@ -166,7 +166,7 @@ export class CollapsiblePagerView extends React.PureComponent {
   onNativeTabPress = event => {
     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.dispatchNativeTabPageCommand(position, this.props.nativeTabPressAnimationEnabled ?? true);
     }
     this.props.onNativeTabPress?.(event);
   };
@@ -187,6 +187,7 @@ export class CollapsiblePagerView extends React.PureComponent {
       onPageScrollStateChanged: _onPageScrollStateChanged,
       nativeTabBar,
       onNativeTabPress: _onNativeTabPress,
+      nativeTabPressAnimationEnabled: _nativeTabPressAnimationEnabled,
       nativeSubHeader,
       onNativeSubHeaderPress: _onNativeSubHeaderPress,
       layoutDirection,

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

@@ -79,6 +79,12 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
     /** Optional native tab bar for iOS and Android. */
     nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
     onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
+    /**
+     * Animates the page change started by a native tab press. Defaults to true.
+     * Set false to jump straight to the pressed page, so a distant tab does not
+     * scroll through every page in between, including unmounted ones.
+     */
+    nativeTabPressAnimationEnabled?: boolean;
     /** Optional native secondary sticky header for iOS and Android. */
     nativeSubHeader?: CollapsiblePagerNativeSubHeaderConfig;
     onNativeSubHeaderPress?: (event: CollapsiblePagerViewOnNativeSubHeaderPressEvent) => void;

package/package.json

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

package/src/CollapsiblePagerView.tsx

@@ -129,6 +129,12 @@ export interface CollapsiblePagerViewProps
   /** Optional native tab bar for iOS and Android. */
   nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
   onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
+  /**
+   * Animates the page change started by a native tab press. Defaults to true.
+   * Set false to jump straight to the pressed page, so a distant tab does not
+   * scroll through every page in between, including unmounted ones.
+   */
+  nativeTabPressAnimationEnabled?: boolean;
   /** Optional native secondary sticky header for iOS and Android. */
   nativeSubHeader?: CollapsiblePagerNativeSubHeaderConfig;
   onNativeSubHeaderPress?: (
@@ -403,7 +409,10 @@ export class CollapsiblePagerView extends React.PureComponent<
       (position !== this.state.selectedPage ||
         this.latestNativeTabTarget !== null)
     ) {
-      this.dispatchNativeTabPageCommand(position, true);
+      this.dispatchNativeTabPageCommand(
+        position,
+        this.props.nativeTabPressAnimationEnabled ?? true
+      );
     }
     this.props.onNativeTabPress?.(event);
   };
@@ -428,6 +437,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       onPageScrollStateChanged: _onPageScrollStateChanged,
       nativeTabBar,
       onNativeTabPress: _onNativeTabPress,
+      nativeTabPressAnimationEnabled: _nativeTabPressAnimationEnabled,
       nativeSubHeader,
       onNativeSubHeaderPress: _onNativeSubHeaderPress,
       layoutDirection,