@onekeyfe/react-native-pager-view 3.0.119 → 3.0.121

package/android/src/main/java/com/reactnativepagerview/CollapsiblePagerViewManager.kt

@@ -2,6 +2,7 @@ package com.reactnativepagerview
 
 import android.view.View
 import android.view.ViewGroup
+import android.graphics.Color
 import androidx.viewpager2.widget.ViewPager2
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.common.MapBuilder
@@ -18,6 +19,7 @@ import com.reactnativepagerview.event.CollapsibleStateChangedEvent
 import com.reactnativepagerview.event.PageScrollEvent
 import com.reactnativepagerview.event.PageScrollStateChangedEvent
 import com.reactnativepagerview.event.PageSelectedEvent
+import com.reactnativepagerview.event.NativeHeaderPressEvent
 import org.json.JSONArray
 import kotlin.math.roundToInt
 
@@ -41,13 +43,16 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
     )
     host.pager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
       override fun onPageScrolled(position: Int, offset: Float, offsetPixels: Int) {
+        host.updateNativeTabProgress(position, offset)
         dispatch(reactContext, host, PageScrollEvent(host.id, position, offset))
       }
 
       override fun onPageSelected(position: Int) {
         host.selectPage(position)
+        host.updateNativeTabProgress(position, 0f)
         dispatch(reactContext, host, PageSelectedEvent(host.id, position))
         dispatchDiagnostics(reactContext, host, "page-selected")
+        host.logPagerState("page-selected")
       }
 
       override fun onPageScrollStateChanged(state: Int) {
@@ -60,9 +65,34 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
         dispatch(reactContext, host, PageScrollStateChangedEvent(host.id, value))
         if (state == ViewPager2.SCROLL_STATE_IDLE) {
           dispatchDiagnostics(reactContext, host, "pager-idle")
+          host.logPagerState("idle")
         }
       }
     })
+    host.onNativeTabPress = { position, key ->
+      dispatch(
+        reactContext,
+        host,
+        NativeHeaderPressEvent(
+          host.id,
+          position,
+          key,
+          NativeHeaderPressEvent.TAB_EVENT_NAME,
+        ),
+      )
+    }
+    host.onNativeSubHeaderPress = { position, key ->
+      dispatch(
+        reactContext,
+        host,
+        NativeHeaderPressEvent(
+          host.id,
+          position,
+          key,
+          NativeHeaderPressEvent.SUB_HEADER_EVENT_NAME,
+        ),
+      )
+    }
     host.onHeaderOffsetChanged = {
       if (!host.pager.isFakeDragging && host.pager.scrollState == ViewPager2.SCROLL_STATE_IDLE) {
         dispatchDiagnostics(reactContext, host, "vertical-idle")
@@ -123,11 +153,11 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
 
   @ReactProp(name = "layoutDirection")
   override fun setLayoutDirection(view: CollapsiblePagerHost?, value: String?) {
-    view?.pager?.layoutDirection = if (value == "rtl") {
+    view?.setPagerLayoutDirection(if (value == "rtl") {
       View.LAYOUT_DIRECTION_RTL
     } else {
       View.LAYOUT_DIRECTION_LTR
-    }
+    })
   }
 
   @ReactProp(name = "initialPage", defaultInt = 0)
@@ -151,11 +181,12 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
     // OneKey patch: CollapsiblePagerHost always coordinates nested pagers on Android.
   }
 
-  // The smooth shared-header ownership is implemented on iOS first.
   override fun setNativeSmoothHeaderScrollEnabled(
     view: CollapsiblePagerHost?,
     value: Boolean,
-  ) = Unit
+  ) {
+    view?.nativeSmoothHeaderScrollEnabled = value
+  }
 
   // OneKey patch: round Yoga header dimensions to the nearest physical pixel.
   @ReactProp(name = "headerHeight", defaultInt = 0)
@@ -179,41 +210,91 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
     view?.retainedPages = value ?: "[]"
   }
 
-  // The optional native tab bar is implemented on iOS first. These no-op
-  // setters preserve the shared Fabric contract without changing Android UI.
-  override fun setNativeTabBarItems(view: CollapsiblePagerHost?, value: String?) = Unit
+  override fun setNativeTabBarItems(view: CollapsiblePagerHost?, value: String?) {
+    view?.updateNativeTabBarItems(value)
+  }
 
-  override fun setNativeTabBarHeight(view: CollapsiblePagerHost?, value: Double) = Unit
+  override fun setNativeTabBarHeight(view: CollapsiblePagerHost?, value: Double) {
+    view ?: return
+    view.nativeTabBarHeight = value
+    view.applyNativeHeaderStyle()
+  }
 
   override fun setNativeTabBarContentPaddingHorizontal(
     view: CollapsiblePagerHost?,
     value: Double,
-  ) = Unit
+  ) {
+    view ?: return
+    view.nativeTabBarContentPaddingHorizontal = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarItemSpacing(view: CollapsiblePagerHost?, value: Double) = Unit
+  override fun setNativeTabBarItemSpacing(view: CollapsiblePagerHost?, value: Double) {
+    view ?: return
+    view.nativeTabBarItemSpacing = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarFontSize(view: CollapsiblePagerHost?, value: Double) = Unit
+  override fun setNativeTabBarFontSize(view: CollapsiblePagerHost?, value: Double) {
+    view ?: return
+    view.nativeTabBarFontSize = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarFontFamily(view: CollapsiblePagerHost?, value: String?) = Unit
+  override fun setNativeTabBarFontFamily(view: CollapsiblePagerHost?, value: String?) {
+    view ?: return
+    view.nativeTabBarFontFamily = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarBackgroundColor(view: CollapsiblePagerHost?, value: Int?) = Unit
+  override fun setNativeTabBarBackgroundColor(view: CollapsiblePagerHost?, value: Int?) {
+    view ?: return
+    view.nativeTabBarBackgroundColor = value ?: Color.TRANSPARENT
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarActiveTextColor(view: CollapsiblePagerHost?, value: Int?) = Unit
+  override fun setNativeTabBarActiveTextColor(view: CollapsiblePagerHost?, value: Int?) {
+    view ?: return
+    view.nativeTabBarActiveTextColor = value ?: Color.BLACK
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarInactiveTextColor(view: CollapsiblePagerHost?, value: Int?) = Unit
+  override fun setNativeTabBarInactiveTextColor(view: CollapsiblePagerHost?, value: Int?) {
+    view ?: return
+    view.nativeTabBarInactiveTextColor = value ?: Color.GRAY
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarIndicatorColor(view: CollapsiblePagerHost?, value: Int?) = Unit
+  override fun setNativeTabBarIndicatorColor(view: CollapsiblePagerHost?, value: Int?) {
+    view ?: return
+    view.nativeTabBarIndicatorColor = value ?: view.nativeTabBarActiveTextColor
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarIndicatorHeight(view: CollapsiblePagerHost?, value: Double) = Unit
+  override fun setNativeTabBarIndicatorHeight(view: CollapsiblePagerHost?, value: Double) {
+    view ?: return
+    view.nativeTabBarIndicatorHeight = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarIndicatorBottom(view: CollapsiblePagerHost?, value: Double) = Unit
+  override fun setNativeTabBarIndicatorBottom(view: CollapsiblePagerHost?, value: Double) {
+    view ?: return
+    view.nativeTabBarIndicatorBottom = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeSubHeaderConfig(view: CollapsiblePagerHost?, value: String?) = Unit
+  override fun setNativeSubHeaderConfig(view: CollapsiblePagerHost?, value: String?) {
+    view?.updateNativeSubHeader(value)
+  }
 
   override fun setNativeSubHeaderSelectedBackgroundColor(
     view: CollapsiblePagerHost?,
     value: Int?,
-  ) = Unit
+  ) {
+    view ?: return
+    view.nativeSubHeaderSelectedBackgroundColor = value ?: Color.TRANSPARENT
+    view.applyNativeHeaderStyle()
+  }
 
   private fun parseStringArray(value: String?): List<String> {
     if (value.isNullOrEmpty()) return emptyList()
@@ -255,6 +336,14 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
         CollapsibleStateChangedEvent.EVENT_NAME,
         MapBuilder.of("registrationName", "onCollapsibleStateChanged"),
       )
+      .put(
+        NativeHeaderPressEvent.TAB_EVENT_NAME,
+        MapBuilder.of("registrationName", "onNativeTabPress"),
+      )
+      .put(
+        NativeHeaderPressEvent.SUB_HEADER_EVENT_NAME,
+        MapBuilder.of("registrationName", "onNativeSubHeaderPress"),
+      )
       .build()
       .toMutableMap()
 

package/android/src/main/java/com/reactnativepagerview/NestedScrollableHost.kt

@@ -32,7 +32,7 @@ open class NestedScrollableHost : FrameLayout {
   private var touchSlop = 0
   private var initialX = 0f
   private var initialY = 0f
-  private var nativeGestureStarted: Boolean = false
+  protected var nestedNativeGestureStarted: Boolean = false
   private val parentViewPager: ViewPager2?
     get() {
       var v: View? = parent as? View
@@ -110,7 +110,7 @@ open class NestedScrollableHost : FrameLayout {
 
       if (scaledDx > touchSlop || scaledDy > touchSlop) {
         NativeGestureUtil.notifyNativeGestureStarted(this, e)
-        nativeGestureStarted = true
+        nestedNativeGestureStarted = true
 
         if (orientation == null) return
         if (isVpHorizontal == (scaledDy > scaledDx)) {
@@ -132,9 +132,9 @@ open class NestedScrollableHost : FrameLayout {
 
   override fun onTouchEvent(e: MotionEvent): Boolean {
     if (e.actionMasked == MotionEvent.ACTION_UP) {
-      if (nativeGestureStarted) {
+      if (nestedNativeGestureStarted) {
         NativeGestureUtil.notifyNativeGestureEnded(this, e)
-        nativeGestureStarted = false
+        nestedNativeGestureStarted = false
       }
     }
     return super.onTouchEvent(e)

package/android/src/main/java/com/reactnativepagerview/event/NativeHeaderPressEvent.kt

@@ -0,0 +1,31 @@
+package com.reactnativepagerview.event
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+class NativeHeaderPressEvent(
+  viewTag: Int,
+  private val position: Int,
+  private val key: String,
+  private val name: String,
+) : Event<NativeHeaderPressEvent>(viewTag) {
+  override fun getEventName() = name
+
+  override fun canCoalesce() = false
+
+  override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+    rctEventEmitter.receiveEvent(viewTag, eventName, serializeEventData())
+  }
+
+  private fun serializeEventData(): WritableMap = Arguments.createMap().apply {
+    putInt("position", position)
+    putString("key", key)
+  }
+
+  companion object {
+    const val TAB_EVENT_NAME = "topNativeTabPress"
+    const val SUB_HEADER_EVENT_NAME = "topNativeSubHeaderPress"
+  }
+}

package/lib/module/CollapsiblePagerView.js

@@ -73,7 +73,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     return React.Children.toArray(this.props.children);
   }
   nativeTabBarEnabled() {
-    return Platform.OS === "ios" && !!this.props.nativeTabBar?.items.length;
+    return (Platform.OS === "ios" || Platform.OS === "android") && !!this.props.nativeTabBar?.items.length;
   }
   dispatchNativeTabPageCommand(position, animated) {
     const commandId = ++this.nativeTabCommandId;
@@ -169,9 +169,9 @@ 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" && !!nativeTabBar?.items.length;
+    const nativeTabBarEnabled = (Platform.OS === "ios" || Platform.OS === "android") && !!nativeTabBar?.items.length;
     const nativeTabBarStyle = nativeTabBar?.style;
-    const nativeSubHeaderEnabled = Platform.OS === "ios" && !!nativeSubHeader?.items.length;
+    const nativeSubHeaderEnabled = (Platform.OS === "ios" || Platform.OS === "android") && !!nativeSubHeader?.items.length;
     const nativeSubHeaderStyle = nativeSubHeader?.style;
     const nativeSubHeaderConfig = nativeSubHeaderEnabled ? JSON.stringify({
       ...nativeSubHeader,

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

@@ -65,8 +65,8 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
     /** Measured sticky bar height. */
     stickyHeaderHeight: number;
     /**
-     * Lets the active iOS list own vertical gestures that begin on pager headers.
-     * Defaults to false and currently has no effect on Android or Web.
+     * Lets the active native list own vertical gestures that begin on pager headers.
+     * Defaults to false and has no effect on Web.
      */
     nativeSmoothHeaderScrollEnabled?: boolean;
     /**
@@ -76,10 +76,10 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
      */
     pageRetentionDistance?: number;
     layoutDirection?: "ltr" | "rtl" | "locale";
-    /** Optional native tab bar. It is currently rendered on iOS only. */
+    /** Optional native tab bar for iOS and Android. */
     nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
     onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
-    /** Optional native secondary sticky header. It is currently rendered on iOS only. */
+    /** Optional native secondary sticky header for iOS and Android. */
     nativeSubHeader?: CollapsiblePagerNativeSubHeaderConfig;
     onNativeSubHeaderPress?: (event: CollapsiblePagerViewOnNativeSubHeaderPressEvent) => void;
     children?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "3.0.119",
+  "version": "3.0.121",
   "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.121",
     "react": "*",
     "react-native": "*"
   },

package/src/CollapsiblePagerView.tsx

@@ -115,8 +115,8 @@ export interface CollapsiblePagerViewProps
   /** Measured sticky bar height. */
   stickyHeaderHeight: number;
   /**
-   * Lets the active iOS list own vertical gestures that begin on pager headers.
-   * Defaults to false and currently has no effect on Android or Web.
+   * Lets the active native list own vertical gestures that begin on pager headers.
+   * Defaults to false and has no effect on Web.
    */
   nativeSmoothHeaderScrollEnabled?: boolean;
   /**
@@ -126,10 +126,10 @@ export interface CollapsiblePagerViewProps
    */
   pageRetentionDistance?: number;
   layoutDirection?: "ltr" | "rtl" | "locale";
-  /** Optional native tab bar. It is currently rendered on iOS only. */
+  /** Optional native tab bar for iOS and Android. */
   nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
   onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
-  /** Optional native secondary sticky header. It is currently rendered on iOS only. */
+  /** Optional native secondary sticky header for iOS and Android. */
   nativeSubHeader?: CollapsiblePagerNativeSubHeaderConfig;
   onNativeSubHeaderPress?: (
     event: CollapsiblePagerViewOnNativeSubHeaderPressEvent
@@ -248,7 +248,10 @@ export class CollapsiblePagerView extends React.PureComponent<
   }
 
   private nativeTabBarEnabled() {
-    return Platform.OS === "ios" && !!this.props.nativeTabBar?.items.length;
+    return (
+      (Platform.OS === "ios" || Platform.OS === "android") &&
+      !!this.props.nativeTabBar?.items.length
+    );
   }
 
   private dispatchNativeTabPageCommand(position: number, animated: boolean) {
@@ -393,10 +396,12 @@ export class CollapsiblePagerView extends React.PureComponent<
           : "ltr"
         : layoutDirection;
     const nativeTabBarEnabled =
-      Platform.OS === "ios" && !!nativeTabBar?.items.length;
+      (Platform.OS === "ios" || Platform.OS === "android") &&
+      !!nativeTabBar?.items.length;
     const nativeTabBarStyle = nativeTabBar?.style;
     const nativeSubHeaderEnabled =
-      Platform.OS === "ios" && !!nativeSubHeader?.items.length;
+      (Platform.OS === "ios" || Platform.OS === "android") &&
+      !!nativeSubHeader?.items.length;
     const nativeSubHeaderStyle = nativeSubHeader?.style;
     const nativeSubHeaderConfig = nativeSubHeaderEnabled
       ? JSON.stringify({