@onekeyfe/react-native-tab-view 3.0.96 → 3.0.99

package/android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -31,6 +31,8 @@ import coil3.size.Scale
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.common.assets.ReactFontManager
 import com.facebook.react.modules.core.ReactChoreographer
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ReactPointerEventsView
 import com.facebook.react.views.text.ReactTypefaceUtils
 import com.google.android.material.bottomnavigation.BottomNavigationView
 import com.google.android.material.navigation.NavigationBarView.LABEL_VISIBILITY_AUTO
@@ -59,6 +61,11 @@ class ExtendedBottomNavigationView(context: Context) : BottomNavigationView(getM
   }
 }
 
+// OneKey patch: RN hit-testing traverses INVISIBLE native wrappers unless pointer events opt out.
+private class TabSceneContainer(context: Context) : FrameLayout(context), ReactPointerEventsView {
+  override var pointerEvents: PointerEvents = PointerEvents.NONE
+}
+
 class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
   private var bottomNavigation = ExtendedBottomNavigationView(context)
   val layoutHolder = FrameLayout(context)
@@ -68,6 +75,18 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
   var onNativeLayoutListener: ((width: Double, height: Double) -> Unit)? = null
   var onTabBarMeasuredListener: ((height: Int) -> Unit)? = null
   var disablePageAnimations = false
+    set(value) {
+      if (field == value) {
+        return
+      }
+      field = value
+      layoutHolder.forEachIndexed { _, view ->
+        if (view.visibility != VISIBLE) {
+          view.visibility = if (value) INVISIBLE else GONE
+        }
+      }
+      layoutHolder.requestLayout()
+    }
   var items: MutableList<TabInfo> = mutableListOf()
   private val iconSources: MutableMap<Int, ImageSource> = mutableMapOf()
   private val drawableCache: MutableMap<ImageSource, Drawable> = mutableMapOf()
@@ -78,7 +97,8 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
   private var inactiveTintColor: Int? = null
   private val checkedStateSet = intArrayOf(android.R.attr.state_checked)
   private val uncheckedStateSet = intArrayOf(-android.R.attr.state_checked)
-  private var hapticFeedbackEnabled = false
+  // OneKey patch: rely on View.isHapticFeedbackEnabled as the single source of truth.
+  // private var hapticFeedbackEnabled = false
   private var fontSize: Int? = null
   private var fontFamily: String? = null
   private var fontWeight: Int? = null
@@ -191,13 +211,13 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
   }
 
   private fun createContainer(): FrameLayout {
-    val container = FrameLayout(context).apply {
+    val container = TabSceneContainer(context).apply {
       layoutParams = FrameLayout.LayoutParams(
         FrameLayout.LayoutParams.MATCH_PARENT,
         FrameLayout.LayoutParams.MATCH_PARENT
       )
       isSaveEnabled = false
-      visibility = GONE
+      visibility = if (disablePageAnimations) INVISIBLE else GONE
       isEnabled = false
     }
     return container
@@ -205,11 +225,24 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
 
   private fun setSelectedIndex(itemId: Int) {
     bottomNavigation.selectedItemId = itemId
-    if (!disablePageAnimations) {
-      val fadeThrough = MaterialFadeThrough()
-      TransitionManager.beginDelayedTransition(layoutHolder, fadeThrough)
+    if (disablePageAnimations) {
+      // INVISIBLE scenes stay laid out, so this visibility swap is atomic at
+      // the next draw boundary and does not expose an empty container frame.
+      toggleViewVisibility(layoutHolder.getChildAt(itemId), true)
+      layoutHolder.forEachIndexed { index, view ->
+        if (itemId != index) {
+          toggleViewVisibility(view, false)
+        }
+      }
+      layoutHolder.invalidate()
+      return
     }
-
+    if (layoutHolder.getChildAt(itemId)?.visibility == VISIBLE) {
+      return
+    }
+    val fadeThrough = MaterialFadeThrough()
+    TransitionManager.beginDelayedTransition(layoutHolder, fadeThrough)
+    // Apply every visibility change to the transition's captured frame.
     layoutHolder.forEachIndexed { index, view ->
       if (itemId == index) {
         toggleViewVisibility(view, true)
@@ -223,15 +256,25 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
   }
 
   private fun toggleViewVisibility(view: View, isVisible: Boolean) {
-    check(view is ViewGroup) { "Native component tree is corrupted." }
+    check(view is TabSceneContainer) { "Native component tree is corrupted." }
 
-    view.visibility = if (isVisible) VISIBLE else GONE
+    view.pointerEvents = if (isVisible) PointerEvents.AUTO else PointerEvents.NONE
+    view.visibility = if (isVisible) {
+      VISIBLE
+    } else if (disablePageAnimations) {
+      INVISIBLE
+    } else {
+      GONE
+    }
     view.isEnabled = isVisible
   }
 
   private fun onTabSelected(item: MenuItem) {
     val selectedItem = items[item.itemId]
     selectedItem.let {
+      if (!selectedItem.preventsDefault) {
+        setSelectedItem(selectedItem.key)
+      }
       onTabSelectedListener?.invoke(selectedItem.key)
       emitHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)
     }
@@ -489,7 +532,9 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
   }
 
   private fun emitHapticFeedback(feedbackConstants: Int) {
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R && hapticFeedbackEnabled) {
+    // OneKey patch: use the Fabric-populated View flag on every supported API level.
+    // if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R && hapticFeedbackEnabled) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && isHapticFeedbackEnabled) {
       this.performHapticFeedback(feedbackConstants)
     }
   }

package/android/src/main/java/com/rcttabview/RCTTabViewManager.kt

@@ -110,7 +110,8 @@ class RCTTabViewManager(context: ReactApplicationContext) :
               badgeTextColor = if (item.hasKey("badgeTextColor")) item.getInt("badgeTextColor") else null,
               activeTintColor = if (item.hasKey("activeTintColor")) item.getInt("activeTintColor") else null,
               hidden = if (item.hasKey("hidden")) item.getBoolean("hidden") else false,
-              testID = item.getString("testID")
+              testID = item.getString("testID"),
+              preventsDefault = if (item.hasKey("preventsDefault")) item.getBoolean("preventsDefault") else false
             )
           )
         }

package/android/src/main/java/com/rcttabview/TabInfo.kt

@@ -8,5 +8,6 @@ data class TabInfo(
   val badgeTextColor: Int? = null,
   val activeTintColor: Int? = null,
   val hidden: Boolean = false,
-  val testID: String? = null
+  val testID: String? = null,
+  val preventsDefault: Boolean = false
 )

package/ios/RCTTabViewContainerView.swift

@@ -731,6 +731,27 @@ class RCTTabViewContainerView: UIView {
   }
 }
 
+// OneKey patch: keep native tab selection immediate while suppressing UIKit's content crossfade.
+private final class ImmediateTabTransitionAnimator: NSObject, UIViewControllerAnimatedTransitioning {
+  static let shared = ImmediateTabTransitionAnimator()
+
+  func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
+    0
+  }
+
+  func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
+    guard let toViewController = transitionContext.viewController(forKey: .to),
+          let toView = transitionContext.view(forKey: .to) ?? toViewController.view else {
+      transitionContext.completeTransition(false)
+      return
+    }
+
+    toView.frame = transitionContext.finalFrame(for: toViewController)
+    transitionContext.containerView.addSubview(toView)
+    transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
+  }
+}
+
 // MARK: - UITabBarControllerDelegate proxy
 
 class TabViewDelegateProxy: NSObject, UITabBarControllerDelegate {
@@ -757,6 +778,19 @@ class TabViewDelegateProxy: NSObject, UITabBarControllerDelegate {
 
     return false
   }
+
+  func tabBarController(
+    _ tabBarController: UITabBarController,
+    animationControllerForTransitionFrom fromViewController: UIViewController,
+    to toViewController: UIViewController
+  ) -> UIViewControllerAnimatedTransitioning? {
+    guard let containerView = mapping[ObjectIdentifier(tabBarController)],
+          containerView.disablePageAnimations else {
+      return nil
+    }
+
+    return ImmediateTabTransitionAnimator.shared
+  }
 }
 
 // MARK: - Long press gesture handler

package/lib/module/TabView.js

@@ -16,6 +16,7 @@ const ANDROID_MAX_TABS = 100;
 const TabView = ({
   navigationState,
   renderScene,
+  renderLazyPlaceholder,
   onIndexChange,
   onTabLongPress,
   rippleColor,
@@ -74,6 +75,7 @@ const TabView = ({
   // @ts-ignore
   const focusedKey = navigationState.routes[navigationState.index].key;
   const customTabBarWrapperRef = useRef(null);
+  const nativeTabViewRef = useRef(null);
   const [tabBarHeight, setTabBarHeight] = React.useState(0);
   const [measuredDimensions, setMeasuredDimensions] = React.useState({
     width: '100%',
@@ -199,7 +201,7 @@ const TabView = ({
     if (index === -1) {
       return;
     }
-    onIndexChange(index);
+    return onIndexChange(index);
   });
   const handleTabLongPress = React.useCallback(event => {
     const {
@@ -214,8 +216,13 @@ const TabView = ({
     const {
       key
     } = event.nativeEvent;
-    jumpTo(key);
-  }, [jumpTo]);
+    const accepted = jumpTo(key);
+    if (accepted === false) {
+      nativeTabViewRef.current?.setNativeProps({
+        selectedPage: focusedKey
+      });
+    }
+  }, [focusedKey, jumpTo]);
   const handleTabBarMeasured = React.useCallback(event => {
     setTabBarHeight(event.nativeEvent.height);
   }, [setTabBarHeight]);
@@ -239,6 +246,7 @@ const TabView = ({
   return /*#__PURE__*/_jsxs(BottomTabBarHeightContext.Provider, {
     value: tabBarHeight,
     children: [/*#__PURE__*/_jsxs(NativeTabView, {
+      ref: nativeTabViewRef,
       ...props,
       ...tabLabelStyle,
       style: styles.fullWidth,
@@ -264,7 +272,10 @@ const TabView = ({
         }) !== false && !loaded.includes(route.key)) {
           return /*#__PURE__*/_jsx(View, {
             collapsable: false,
-            style: styles.fullWidth
+            style: styles.fullWidth,
+            children: renderLazyPlaceholder?.({
+              route
+            })
           }, route.key);
         }
         const focused = route.key === focusedKey;

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

@@ -51,10 +51,16 @@ interface Props<Route extends BaseRoute> {
         route: Route;
         jumpTo: (key: string) => void;
     }) => React.ReactNode | null;
+    /**
+     * Function which takes a route and returns a placeholder for an unloaded lazy scene.
+     */
+    renderLazyPlaceholder?: (props: {
+        route: Route;
+    }) => React.ReactNode | null;
     /**
      * Callback which is called on tab change, receives the index of the new tab as argument.
      */
-    onIndexChange: (index: number) => void;
+    onIndexChange: (index: number) => boolean | void;
     /**
      * Callback which is called on long press on tab, receives the index of the tab as argument.
      */
@@ -179,6 +185,6 @@ interface Props<Route extends BaseRoute> {
      */
     delayedFreeze?: boolean;
 }
-declare const TabView: <Route extends BaseRoute>({ navigationState, renderScene, onIndexChange, onTabLongPress, rippleColor, tabBarActiveTintColor: activeTintColor, tabBarInactiveTintColor: inactiveTintColor, getBadge, getBadgeBackgroundColor, getBadgeTextColor, getLazy, getLabelText, getIcon, getHidden, getActiveTintColor, getTestID, getRole, getSceneStyle, getPreventsDefault, hapticFeedbackEnabled, labeled, getFreezeOnBlur, tabBar: renderCustomTabBar, tabBarStyle, tabLabelStyle, renderBottomAccessoryView, activeIndicatorColor, delayedFreeze, ...props }: Props<Route>) => import("react/jsx-runtime").JSX.Element;
+declare const TabView: <Route extends BaseRoute>({ navigationState, renderScene, renderLazyPlaceholder, onIndexChange, onTabLongPress, rippleColor, tabBarActiveTintColor: activeTintColor, tabBarInactiveTintColor: inactiveTintColor, getBadge, getBadgeBackgroundColor, getBadgeTextColor, getLazy, getLabelText, getIcon, getHidden, getActiveTintColor, getTestID, getRole, getSceneStyle, getPreventsDefault, hapticFeedbackEnabled, labeled, getFreezeOnBlur, tabBar: renderCustomTabBar, tabBarStyle, tabLabelStyle, renderBottomAccessoryView, activeIndicatorColor, delayedFreeze, ...props }: Props<Route>) => import("react/jsx-runtime").JSX.Element;
 export default TabView;
 //# sourceMappingURL=TabView.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-tab-view",
-  "version": "3.0.96",
+  "version": "3.0.99",
   "description": "Native Bottom Tabs for React Native (UIKit implementation)",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",

package/src/TabView.tsx

@@ -81,10 +81,14 @@ interface Props<Route extends BaseRoute> {
     route: Route;
     jumpTo: (key: string) => void;
   }) => React.ReactNode | null;
+  /**
+   * Function which takes a route and returns a placeholder for an unloaded lazy scene.
+   */
+  renderLazyPlaceholder?: (props: { route: Route }) => React.ReactNode | null;
   /**
    * Callback which is called on tab change, receives the index of the new tab as argument.
    */
-  onIndexChange: (index: number) => void;
+  onIndexChange: (index: number) => boolean | void;
   /**
    * Callback which is called on long press on tab, receives the index of the tab as argument.
    */
@@ -199,6 +203,7 @@ const ANDROID_MAX_TABS = 100;
 const TabView = <Route extends BaseRoute>({
   navigationState,
   renderScene,
+  renderLazyPlaceholder,
   onIndexChange,
   onTabLongPress,
   rippleColor,
@@ -236,6 +241,7 @@ const TabView = <Route extends BaseRoute>({
   // @ts-ignore
   const focusedKey = navigationState.routes[navigationState.index].key;
   const customTabBarWrapperRef = useRef<View>(null) as React.RefObject<any>;
+  const nativeTabViewRef = useRef<React.ElementRef<typeof NativeTabView>>(null);
   const [tabBarHeight, setTabBarHeight] = React.useState<number | undefined>(0);
   const [measuredDimensions, setMeasuredDimensions] = React.useState<
     { width: DimensionValue; height: DimensionValue } | undefined
@@ -381,7 +387,7 @@ const TabView = <Route extends BaseRoute>({
     if (index === -1) {
       return;
     }
-    onIndexChange(index);
+    return onIndexChange(index);
   });
 
   const handleTabLongPress = React.useCallback(
@@ -398,9 +404,12 @@ const TabView = <Route extends BaseRoute>({
   const handlePageSelected = React.useCallback(
     (event: NativeSyntheticEvent<{ key: string }>) => {
       const { key } = event.nativeEvent;
-      jumpTo(key);
+      const accepted = jumpTo(key);
+      if (accepted === false) {
+        nativeTabViewRef.current?.setNativeProps({ selectedPage: focusedKey });
+      }
     },
-    [jumpTo]
+    [focusedKey, jumpTo],
   );
 
   const handleTabBarMeasured = React.useCallback(
@@ -429,6 +438,7 @@ const TabView = <Route extends BaseRoute>({
   return (
     <BottomTabBarHeightContext.Provider value={tabBarHeight}>
       <NativeTabView
+        ref={nativeTabViewRef}
         {...props}
         {...tabLabelStyle}
         style={styles.fullWidth}
@@ -458,7 +468,9 @@ const TabView = <Route extends BaseRoute>({
                 key={route.key}
                 collapsable={false}
                 style={styles.fullWidth}
-              />
+              >
+                {renderLazyPlaceholder?.({ route })}
+              </View>
             );
           }