@onekeyfe/react-native-bottom-tabs 6.7.0-alpha.385 → 6.7.0-alpha.386

package/docs/SPEC.md

@@ -260,6 +260,35 @@ boundary; `BottomTabsView.kt` owns scene geometry, appearance, and disposal;
 and runner instructions are in `native-tests/android`. The example's settings
 page exposes the switch and its scrolling scene reserves the reported bar height.
 
+## iOS vertical tab bar placement and side accessory
+
+Status: Implemented. Runtime results are in Conformance.
+
+On iOS 27.1+, devices such as iPhone Duo can place the `UITabBarController`
+bar vertically in a side strip next to the status bar. The view reports that
+placement and can draw one round accessory button above the vertical bar.
+
+- **Placement:** `onTabBarPlacementChange({ placement })` fires with `bottom`,
+  `leading`, or `trailing`, read from `traitCollection.verticalBarEdge` of the
+  tab bar controller. It fires once after the bar is created and again on every
+  change (rotation, folding, window resizing). Builds without the iOS 27.1 SDK
+  and earlier systems always report `bottom`. Android never fires it.
+- **Side accessory:** `sideAccessoryIcon` (an image source, loaded with the
+  React image loader and drawn as a template tinted with `inactiveTintColor`),
+  `sideAccessoryLabel` (accessibility label), and `onSideAccessoryPress`. The
+  button is 48 pt, a Liquid Glass capsule on iOS 26+, centered horizontally on
+  the vertical bar's item platter and 12 pt above it.
+- The button shows only when all hold: the placement is `leading` or
+  `trailing`, the tab bar is not hidden, the icon has loaded, and the platter
+  is found. Otherwise it is hidden; a bottom bar never shows it.
+- UIKit does not expose the platter frame. The view finds the platter by its
+  view class name below the tab bar controller (skipping tab content views),
+  reads its frame, and calls no private API. If a later system renames or
+  restructures it, the accessory hides; no other behavior depends on it.
+- Layout re-runs, coalesced on the next main-queue turn, after container
+  layout, tab rebuilds, tab bar hiding, icon loads, and changes to the traits
+  affecting `verticalBarEdge`.
+
 ## Threading and ownership
 
 All gesture handling, animations, and timers run on the platform UI thread in
@@ -285,3 +314,10 @@ non-selected tab lifts the lens there; drag crossing tab centers does not change
 pages; release selects the nearest tab once; cancel restores; hidden bar, dark
 mode, and 3-button navigation insets lay out correctly. Source compilation is
 recorded separately from runtime acceptance.
+
+Vertical tab bar: `RCTBottomTabsContainerView.swift` (`currentTabBarPlacement`,
+`updateTabBarPlacementAndSideAccessory`, `verticalTabBarPlatterFrame`).
+Required iOS runtime cases on iPhone Duo: the outer display and landscape inner
+display report `trailing` and show the accessory above the platter; the
+portrait inner display reports `bottom` and hides it; hiding the tab bar hides
+it; a press emits `onSideAccessoryPress` once.

package/ios/RCTBottomTabsComponentView.mm

@@ -171,6 +171,28 @@ static NSArray<NSDictionary *>* convertItemsToArray(const std::vector<RNBottomTa
       }
     };
     [_containerView setValue:onNativeLayout forKey:@"onNativeLayout"];
+
+    EventBlock onTabBarPlacementChange = ^(NSDictionary *body) {
+      auto strongSelf = weakSelf;
+      if (!strongSelf) return;
+      auto emitter = std::static_pointer_cast<const RNBottomTabsViewEventEmitter>(strongSelf->_eventEmitter);
+      if (emitter) {
+        emitter->onTabBarPlacementChange({
+          .placement = std::string([[body objectForKey:@"placement"] UTF8String] ?: "bottom")
+        });
+      }
+    };
+    [_containerView setValue:onTabBarPlacementChange forKey:@"onTabBarPlacementChange"];
+
+    EventBlock onSideAccessoryPress = ^(NSDictionary *body) {
+      auto strongSelf = weakSelf;
+      if (!strongSelf) return;
+      auto emitter = std::static_pointer_cast<const RNBottomTabsViewEventEmitter>(strongSelf->_eventEmitter);
+      if (emitter) {
+        emitter->onSideAccessoryPress({});
+      }
+    };
+    [_containerView setValue:onSideAccessoryPress forKey:@"onSideAccessoryPress"];
   }
 
   return self;
@@ -308,6 +330,21 @@ static NSArray<NSDictionary *>* convertItemsToArray(const std::vector<RNBottomTa
     [_containerView setValue:@(newViewProps.tabBarHidden) forKey:@"tabBarHidden"];
   }
 
+  if (oldViewProps.sideAccessoryIcon != newViewProps.sideAccessoryIcon) {
+    const auto &source = newViewProps.sideAccessoryIcon;
+    NSDictionary *iconDict = source.uri.empty() ? nil : @{
+      @"uri": [NSString stringWithUTF8String:source.uri.c_str()],
+      @"width": @(source.size.width),
+      @"height": @(source.size.height),
+      @"scale": @(source.scale),
+    };
+    [_containerView setValue:iconDict forKey:@"sideAccessoryIcon"];
+  }
+
+  if (oldViewProps.sideAccessoryLabel != newViewProps.sideAccessoryLabel) {
+    [_containerView setValue:NSStringFromStdStringNilIfEmpty(newViewProps.sideAccessoryLabel) forKey:@"sideAccessoryLabel"];
+  }
+
 #undef SET_PROP
 
   [super updateProps:props oldProps:oldProps];

package/ios/RCTBottomTabsContainerView.swift

@@ -70,6 +70,14 @@ class RCTBottomTabsContainerView: UIView {
   private var lastPressedTabTime: CFTimeInterval = 0
   /// Cached view controllers keyed by tab key to avoid unnecessary reparenting
   private var cachedViewControllers: [String: UIViewController] = [:]
+  // Vertical tab bar (iPhone Duo side strip): last reported placement and the
+  // round accessory button drawn above the bar.
+  private var reportedTabBarPlacement: String?
+  private var sideAccessoryButton: UIButton?
+  private var loadedSideAccessoryIcon: UIImage?
+  private var isSideAccessoryLayoutScheduled = false
+  private static let sideAccessorySize: CGFloat = 48
+  private static let sideAccessorySpacing: CGFloat = 12
 
   // MARK: - Props (set by Fabric ComponentView via KVC)
 
@@ -128,7 +136,11 @@ class RCTBottomTabsContainerView: UIView {
 
   @objc var inactiveTintColor: UIColor? {
     // Rebuild so the baked unselected-image tint follows theme changes.
-    didSet { updateTabBarAppearance(); rebuildViewControllers() }
+    didSet {
+      updateTabBarAppearance()
+      rebuildViewControllers()
+      sideAccessoryButton?.tintColor = inactiveTintColor
+    }
   }
 
   @objc var rippleColor: UIColor? // Android only
@@ -147,12 +159,22 @@ class RCTBottomTabsContainerView: UIView {
     didSet { updateTabBarAppearance() }
   }
 
+  @objc var sideAccessoryIcon: NSDictionary? {
+    didSet { loadSideAccessoryIcon() }
+  }
+
+  @objc var sideAccessoryLabel: String? {
+    didSet { sideAccessoryButton?.accessibilityLabel = sideAccessoryLabel }
+  }
+
   // MARK: - Events (RCTDirectEventBlock)
 
   @objc var onPageSelected: RCTDirectEventBlock?
   @objc var onTabDoublePress: RCTDirectEventBlock?
   @objc var onTabBarMeasured: RCTDirectEventBlock?
   @objc var onNativeLayout: RCTDirectEventBlock?
+  @objc var onTabBarPlacementChange: RCTDirectEventBlock?
+  @objc var onSideAccessoryPress: RCTDirectEventBlock?
 
   // MARK: - Init
 
@@ -188,6 +210,161 @@ class RCTBottomTabsContainerView: UIView {
     // TODO: Re-enable when UITabBar.bottomAccessoryView is available in the SDK
   }
 
+  // MARK: - Vertical tab bar (iOS 27.1+)
+
+  /// Where the system draws the tab bar: "bottom", or "leading"/"trailing" for
+  /// the vertical bar some devices (iPhone Duo) place in a side strip.
+  private func currentTabBarPlacement() -> String {
+    #if compiler(>=6.4)
+    if #available(iOS 27.1, *), let tbc = tabBarController {
+      switch tbc.traitCollection.verticalBarEdge {
+      case .leading: return "leading"
+      case .trailing: return "trailing"
+      default: break
+      }
+    }
+    #endif
+    return "bottom"
+  }
+
+  private func registerVerticalBarTraitChanges(_ tbc: UITabBarController) {
+    #if compiler(>=6.4)
+    if #available(iOS 27.1, *) {
+      tbc.registerForTraitChanges(
+        UITraitCollection.systemTraitsAffectingVerticalBarEdge
+      ) { [weak self] (_: UITabBarController, _: UITraitCollection) in
+        self?.scheduleSideAccessoryLayout()
+      }
+    }
+    #endif
+  }
+
+  /// Coalesces requests and runs after UIKit has laid out the bar, whose
+  /// floating platter is positioned in UIKit's own layout pass.
+  private func scheduleSideAccessoryLayout() {
+    guard !isSideAccessoryLayoutScheduled else { return }
+    isSideAccessoryLayoutScheduled = true
+    DispatchQueue.main.async { [weak self] in
+      guard let self else { return }
+      self.isSideAccessoryLayoutScheduled = false
+      self.updateTabBarPlacementAndSideAccessory()
+    }
+  }
+
+  private func updateTabBarPlacementAndSideAccessory() {
+    guard let tbc = tabBarController else { return }
+    let placement = currentTabBarPlacement()
+    if placement != reportedTabBarPlacement {
+      reportedTabBarPlacement = placement
+      onTabBarPlacementChange?(["placement": placement])
+    }
+
+    guard placement != "bottom",
+          !tabBarHidden,
+          let icon = loadedSideAccessoryIcon,
+          let platterFrame = verticalTabBarPlatterFrame(in: tbc) else {
+      sideAccessoryButton?.isHidden = true
+      return
+    }
+
+    let button = ensureSideAccessoryButton(in: tbc.view)
+    button.configuration?.image = icon
+    let size = RCTBottomTabsContainerView.sideAccessorySize
+    button.frame = CGRect(
+      x: platterFrame.midX - size / 2,
+      y: platterFrame.minY - RCTBottomTabsContainerView.sideAccessorySpacing - size,
+      width: size,
+      height: size
+    )
+    button.isHidden = false
+    tbc.view.bringSubviewToFront(button)
+  }
+
+  /// UIKit draws the vertical bar items in a floating platter it does not
+  /// expose. Read that view's frame (no private API is called) and return nil
+  /// when it cannot be found, so the accessory hides instead of misplacing.
+  private func verticalTabBarPlatterFrame(in tbc: UITabBarController) -> CGRect? {
+    let root = tbc.view!
+    // Tab content can hold large React trees; the bar lives outside them.
+    let contentViews = Set((tbc.viewControllers ?? []).compactMap { vc in
+      vc.isViewLoaded ? ObjectIdentifier(vc.view) : nil
+    })
+    var queue: [UIView] = root.subviews
+    var index = 0
+    while index < queue.count {
+      let view = queue[index]
+      index += 1
+      if view === sideAccessoryButton || contentViews.contains(ObjectIdentifier(view)) {
+        continue
+      }
+      if NSStringFromClass(type(of: view)).contains("TabBarItemPlatterView") {
+        guard !view.isHidden, view.window != nil else { return nil }
+        let frame = view.convert(view.bounds, to: root)
+        return frame.isEmpty ? nil : frame
+      }
+      queue.append(contentsOf: view.subviews)
+    }
+    return nil
+  }
+
+  private func ensureSideAccessoryButton(in parent: UIView) -> UIButton {
+    if let button = sideAccessoryButton {
+      if button.superview !== parent { parent.addSubview(button) }
+      return button
+    }
+    var configuration: UIButton.Configuration
+    #if compiler(>=6.2)
+    if #available(iOS 26.0, *) {
+      configuration = .glass()
+    } else {
+      configuration = .gray()
+    }
+    #else
+    configuration = .gray()
+    #endif
+    configuration.cornerStyle = .capsule
+    configuration.contentInsets = .zero
+    let button = UIButton(configuration: configuration)
+    button.tintColor = inactiveTintColor
+    button.accessibilityLabel = sideAccessoryLabel
+    button.addAction(UIAction { [weak self] _ in
+      self?.onSideAccessoryPress?([:])
+    }, for: .primaryActionTriggered)
+    parent.addSubview(button)
+    sideAccessoryButton = button
+    return button
+  }
+
+  private func loadSideAccessoryIcon() {
+    let source = sideAccessoryIcon.map { IconSource(dict: $0) }
+    guard let source, let url = URL(string: source.uri) else {
+      loadedSideAccessoryIcon = nil
+      scheduleSideAccessoryLayout()
+      return
+    }
+    // The image loader arrives with the first state update; setImageLoader
+    // calls this again.
+    guard let imageLoader else { return }
+    imageLoader.loadImage(
+      with: URLRequest(url: url),
+      size: CGSize(width: source.width, height: source.height),
+      scale: CGFloat(source.scale),
+      clipped: true,
+      resizeMode: RCTResizeMode.contain,
+      progressBlock: { _, _ in },
+      partialLoad: { _ in },
+      completionBlock: { [weak self] error, image in
+        guard error == nil, let image else { return }
+        DispatchQueue.main.async {
+          guard let self else { return }
+          self.loadedSideAccessoryIcon = image
+            .resizeImageTo(size: self.iconSize)?
+            .withRenderingMode(.alwaysTemplate)
+          self.scheduleSideAccessoryLayout()
+        }
+      })
+  }
+
   // MARK: - Lifecycle
 
   private func handleLayout() {
@@ -197,6 +374,7 @@ class RCTBottomTabsContainerView: UIView {
     setupTabBarControllerIfNeeded()
     tabBarController?.view.frame = bounds
     onNativeLayout?(["width": Double(bounds.width), "height": Double(bounds.height)])
+    scheduleSideAccessoryLayout()
   }
 
   private func setupTabBarControllerIfNeeded() {
@@ -215,6 +393,7 @@ class RCTBottomTabsContainerView: UIView {
     tbc.didMove(toParent: parentVC)
 
     self.tabBarController = tbc
+    registerVerticalBarTraitChanges(tbc)
 
     rebuildViewControllers()
     updateTabBarAppearance()
@@ -356,6 +535,8 @@ class RCTBottomTabsContainerView: UIView {
     }
 
     updateSelectedTab()
+    // The platter height follows the number of visible tabs.
+    scheduleSideAccessoryLayout()
   }
 
   // MARK: - Selection
@@ -498,6 +679,7 @@ class RCTBottomTabsContainerView: UIView {
     tbc.tabBar.isUserInteractionEnabled = !tabBarHidden
 
     onTabBarMeasured?(["height": tabBarHidden ? 0 : Double(tbc.tabBar.frame.size.height)])
+    scheduleSideAccessoryLayout()
   }
 
   private func updateSidebarAdaptable() {
@@ -569,6 +751,7 @@ class RCTBottomTabsContainerView: UIView {
     self.imageLoader = loader
     loadIconsFromSources()
     loadSelectedIconsFromSources()
+    loadSideAccessoryIcon()
   }
 
   private func loadIconsFromSources() {

package/lib/module/BottomTabs.js

@@ -1,15 +1,15 @@
 "use strict";
 
-import React, { useLayoutEffect, useRef } from 'react';
-import { Image, Platform, StyleSheet, View, processColor } from 'react-native';
+import React, { useLayoutEffect, useRef } from "react";
+import { Image, Platform, StyleSheet, View, processColor } from "react-native";
 import { BottomTabBarHeightContext } from "./utils/BottomTabBarHeightContext.js";
 
 // eslint-disable-next-line @react-native/no-deep-imports
 
-import NativeBottomTabs from './BottomTabsNativeComponent';
-import useLatestCallback from 'use-latest-callback';
+import NativeBottomTabs from "./BottomTabsNativeComponent";
+import useLatestCallback from "use-latest-callback";
 import DelayedFreeze from "./DelayedFreeze.js";
-import NativeBottomTabsDrawer from './BottomTabsDrawerNativeComponent';
+import NativeBottomTabsDrawer from "./BottomTabsDrawerNativeComponent";
 import { BottomAccessoryView } from "./BottomAccessoryView.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isAppleSymbol = icon => icon?.sfSymbol;
@@ -65,7 +65,7 @@ const BottomTabs = ({
     route
   }) => route.preventsDefault,
   hapticFeedbackEnabled = false,
-  labeled = Platform.OS !== 'android' ? true : undefined,
+  labeled = Platform.OS !== "android" ? true : undefined,
   getFreezeOnBlur = ({
     route
   }) => route.freezeOnBlur,
@@ -74,8 +74,12 @@ const BottomTabs = ({
   tabLabelStyle,
   renderBottomAccessoryView,
   activeIndicatorColor,
-  androidBottomBlurEnabled = Platform.OS === 'android' && Number(Platform.Version) >= 36,
+  androidBottomBlurEnabled = Platform.OS === "android" && Number(Platform.Version) >= 36,
   delayedFreeze = false,
+  onTabBarPlacementChange,
+  sideAccessoryIcon,
+  sideAccessoryLabel,
+  onSideAccessoryPress,
   ...props
 }) => {
   // @ts-ignore
@@ -86,11 +90,11 @@ const BottomTabs = ({
   const [customTabBarHeight, setCustomTabBarHeight] = React.useState(0);
   const tabBarHeight = renderCustomTabBar ? customTabBarHeight : props.tabBarHidden ? 0 : nativeTabBarHeight;
   const [measuredDimensions, setMeasuredDimensions] = React.useState({
-    width: '100%',
-    height: '100%'
+    width: "100%",
+    height: "100%"
   });
   const trimmedRoutes = React.useMemo(() => {
-    if (Platform.OS === 'android' && navigationState.routes.length > ANDROID_MAX_TABS) {
+    if (Platform.OS === "android" && navigationState.routes.length > ANDROID_MAX_TABS) {
       console.warn(`BottomTabs only supports up to ${ANDROID_MAX_TABS} tabs on Android`);
       return navigationState.routes.slice(0, ANDROID_MAX_TABS);
     }
@@ -100,7 +104,7 @@ const BottomTabs = ({
   if (!loaded.includes(focusedKey)) {
     setLoaded(loaded => [...loaded, focusedKey]);
   }
-  const isIOS = Platform.OS === 'ios';
+  const isIOS = Platform.OS === "ios";
 
   // Unfocused (outline) icons — independent of focusedKey so the array stays
   // stable across tab switches and the native side never reloads on switch.
@@ -127,8 +131,8 @@ const BottomTabs = ({
   const items = React.useMemo(() => trimmedRoutes.map((route, index) => {
     const icon = icons[index];
     const isSfSymbol = isAppleSymbol(icon);
-    if (Platform.OS === 'android' && isSfSymbol) {
-      console.warn('SF Symbols are not supported on Android. Use require() or pass uri to load an image instead.');
+    if (Platform.OS === "android" && isSfSymbol) {
+      console.warn("SF Symbols are not supported on Android. Use require() or pass uri to load an image instead.");
     }
     const color = processColor(getActiveTintColor({
       route
@@ -148,9 +152,9 @@ const BottomTabs = ({
       badge: getBadge?.({
         route
       }),
-      badgeBackgroundColor: typeof badgeBgColor === 'number' ? badgeBgColor : undefined,
-      badgeTextColor: typeof badgeTxtColor === 'number' ? badgeTxtColor : undefined,
-      activeTintColor: typeof color === 'number' ? color : undefined,
+      badgeBackgroundColor: typeof badgeBgColor === "number" ? badgeBgColor : undefined,
+      badgeTextColor: typeof badgeTxtColor === "number" ? badgeTxtColor : undefined,
+      activeTintColor: typeof color === "number" ? color : undefined,
       hidden: getHidden?.({
         route
       }),
@@ -170,14 +174,14 @@ const BottomTabs = ({
       // @ts-ignore - resolveAssetSource accepts ImageSourcePropType
       const resolved = Image.resolveAssetSource(icon);
       return {
-        uri: resolved?.uri ?? '',
+        uri: resolved?.uri ?? "",
         width: resolved?.width ?? 0,
         height: resolved?.height ?? 0,
         scale: resolved?.scale ?? 1
       };
     }
     return {
-      uri: '',
+      uri: "",
       width: 0,
       height: 0,
       scale: 1
@@ -191,14 +195,14 @@ const BottomTabs = ({
       // @ts-ignore - resolveAssetSource accepts ImageSourcePropType
       const resolved = Image.resolveAssetSource(icon);
       return {
-        uri: resolved?.uri ?? '',
+        uri: resolved?.uri ?? "",
         width: resolved?.width ?? 0,
         height: resolved?.height ?? 0,
         scale: resolved?.scale ?? 1
       };
     }
     return {
-      uri: '',
+      uri: "",
       width: 0,
       height: 0,
       scale: 1
@@ -244,6 +248,25 @@ const BottomTabs = ({
       height
     });
   }, [setMeasuredDimensions]);
+  const handleTabBarPlacementChange = React.useCallback(event => {
+    onTabBarPlacementChange?.(event.nativeEvent.placement);
+  }, [onTabBarPlacementChange]);
+  const handleSideAccessoryPress = React.useCallback(() => {
+    onSideAccessoryPress?.();
+  }, [onSideAccessoryPress]);
+  const resolvedSideAccessoryIcon = React.useMemo(() => {
+    if (!isIOS || !sideAccessoryIcon) {
+      return undefined;
+    }
+    // @ts-ignore - resolveAssetSource accepts ImageSourcePropType
+    const resolved = Image.resolveAssetSource(sideAccessoryIcon);
+    return resolved?.uri ? {
+      uri: resolved.uri,
+      width: resolved.width ?? 0,
+      height: resolved.height ?? 0,
+      scale: resolved.scale ?? 1
+    } : undefined;
+  }, [sideAccessoryIcon]);
   useLayoutEffect(() => {
     if (renderCustomTabBar && customTabBarWrapperRef.current) {
       customTabBarWrapperRef.current.measure((_x, _y, _width, height) => {
@@ -264,7 +287,7 @@ const BottomTabs = ({
       children: [/*#__PURE__*/_jsx(View, {
         collapsable: false,
         style: styles.drawerMenu,
-        children: Platform.OS !== 'web' ? renderDrawerContent?.() : null
+        children: Platform.OS !== "web" ? renderDrawerContent?.() : null
       }), /*#__PURE__*/_jsxs(View, {
         collapsable: false,
         style: styles.fullWidth,
@@ -282,13 +305,17 @@ const BottomTabs = ({
           onPageSelected: handlePageSelected,
           onTabBarMeasured: handleTabBarMeasured,
           onNativeLayout: handleNativeLayout,
+          onTabBarPlacementChange: handleTabBarPlacementChange,
+          sideAccessoryIcon: renderCustomTabBar ? undefined : resolvedSideAccessoryIcon,
+          sideAccessoryLabel: sideAccessoryLabel,
+          onSideAccessoryPress: handleSideAccessoryPress,
           hapticFeedbackEnabled: hapticFeedbackEnabled,
           activeTintColor: activeTintColor,
           inactiveTintColor: inactiveTintColor,
           barTintColor: tabBarStyle?.backgroundColor,
           rippleColor: rippleColor,
           activeIndicatorColor: activeIndicatorColor,
-          androidBottomBlurEnabled: Platform.OS === 'android' && !renderCustomTabBar && androidBottomBlurEnabled,
+          androidBottomBlurEnabled: Platform.OS === "android" && !renderCustomTabBar && androidBottomBlurEnabled,
           labeled: labeled,
           children: [trimmedRoutes.map(route => {
             if (getLazy({
@@ -312,9 +339,9 @@ const BottomTabs = ({
             return /*#__PURE__*/_jsx(View, {
               style: [styles.screen, renderCustomTabBar ? styles.fullWidth : measuredDimensions, customStyle],
               collapsable: false,
-              pointerEvents: focused ? 'auto' : 'none',
+              pointerEvents: focused ? "auto" : "none",
               accessibilityElementsHidden: !focused,
-              importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
+              importantForAccessibility: focused ? "auto" : "no-hide-descendants",
               children: /*#__PURE__*/_jsx(DelayedFreeze, {
                 freeze: !!freeze,
                 delayedFreeze: delayedFreeze,
@@ -324,7 +351,7 @@ const BottomTabs = ({
                 })
               })
             }, route.key);
-          }), Platform.OS === 'ios' && parseFloat(Platform.Version) >= 26 && renderBottomAccessoryView && !renderCustomTabBar ? /*#__PURE__*/_jsx(BottomAccessoryView, {
+          }), Platform.OS === "ios" && parseFloat(Platform.Version) >= 26 && renderBottomAccessoryView && !renderCustomTabBar ? /*#__PURE__*/_jsx(BottomAccessoryView, {
             renderBottomAccessoryView: renderBottomAccessoryView
           }) : null]
         }), renderCustomTabBar ? /*#__PURE__*/_jsx(View, {
@@ -338,17 +365,17 @@ const BottomTabs = ({
 };
 const styles = StyleSheet.create({
   fullWidth: {
-    width: '100%',
-    height: '100%',
+    width: "100%",
+    height: "100%",
     flex: 1
   },
   drawerMenu: {
-    position: 'absolute',
-    width: '78%',
-    height: '100%'
+    position: "absolute",
+    width: "78%",
+    height: "100%"
   },
   screen: {
-    position: 'absolute'
+    position: "absolute"
   }
 });
 export default BottomTabs;

package/lib/module/BottomTabsNativeComponent.ts

@@ -22,6 +22,14 @@ export type OnNativeLayout = Readonly<{
   height: Double;
 }>;
 
+// Where the system draws the tab bar: 'bottom', or 'leading' / 'trailing' for
+// a vertical bar (the iPhone Duo side strip, iOS 27.1+).
+export type OnTabBarPlacementChange = Readonly<{
+  placement: string;
+}>;
+
+export type OnSideAccessoryPress = Readonly<{}>;
+
 export type BottomTabsItems = ReadonlyArray<{
   key: string;
   title: string;
@@ -65,6 +73,11 @@ export interface BottomTabsNativeProps extends ViewProps {
   ignoreBottomInsets?: boolean;
   androidTabBarStyle?: WithDefault<'default' | 'floating', 'default'>;
   ignoreKeyboardInsets?: WithDefault<boolean, true>;
+  onTabBarPlacementChange?: DirectEventHandler<OnTabBarPlacementChange>;
+  // A round button drawn above a vertical tab bar; iOS only.
+  sideAccessoryIcon?: ImageSource;
+  sideAccessoryLabel?: string;
+  onSideAccessoryPress?: DirectEventHandler<OnSideAccessoryPress>;
 }
 
 export default codegenNativeComponent<BottomTabsNativeProps>('RNBottomTabsView');

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { type ColorValue, type StyleProp, type ViewStyle } from 'react-native';
-import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
-import type { AppleIcon, BaseRoute, NavigationState, TabRole } from './types';
-import { type RNBottomTabsAccessoryViewProps } from './BottomAccessoryView';
+import React from "react";
+import { type ColorValue, type ImageSourcePropType, type StyleProp, type ViewStyle } from "react-native";
+import type { ImageSource } from "react-native/Libraries/Image/ImageSource";
+import type { AppleIcon, BaseRoute, NavigationState, TabBarPlacement, TabRole } from "./types";
+import { type RNBottomTabsAccessoryViewProps } from "./BottomAccessoryView";
 interface Props<Route extends BaseRoute> {
     labeled?: boolean;
     /** Optional physical-left menu; all motion and input are owned by native. */
@@ -35,11 +35,11 @@ interface Props<Route extends BaseRoute> {
     /**
      * Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom. (iOS only)
      */
-    scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
+    scrollEdgeAppearance?: "default" | "opaque" | "transparent";
     /**
      * Behavior for minimizing the tab bar. (iOS 26+)
      */
-    minimizeBehavior?: 'automatic' | 'onScrollDown' | 'onScrollUp' | 'never';
+    minimizeBehavior?: "automatic" | "onScrollDown" | "onScrollUp" | "never";
     /**
      * Active tab color.
      */
@@ -186,7 +186,7 @@ interface Props<Route extends BaseRoute> {
      * A function that returns a React element to display as bottom accessory view.
      * iOS 26+ only.
      */
-    renderBottomAccessoryView?: RNBottomTabsAccessoryViewProps['renderBottomAccessoryView'];
+    renderBottomAccessoryView?: RNBottomTabsAccessoryViewProps["renderBottomAccessoryView"];
     /**
      * Whether the tab bar is hidden.
      */
@@ -198,7 +198,7 @@ interface Props<Route extends BaseRoute> {
     /**
      * Visual style of the Android tab bar. Android only.
      */
-    androidTabBarStyle?: 'default' | 'floating';
+    androidTabBarStyle?: "default" | "floating";
     /**
      * Whether the tab bar ignores the soft keyboard. Defaults to true, so the
      * keyboard covers the tab bar as on iOS. Set to false to pad the tab bar by
@@ -211,7 +211,25 @@ interface Props<Route extends BaseRoute> {
      * original delayed behavior.
      */
     delayedFreeze?: boolean;
+    /**
+     * Called when the system moves the tab bar between the bottom edge and a
+     * vertical bar on the leading or trailing edge (iPhone Duo). iOS only.
+     */
+    onTabBarPlacementChange?: (placement: TabBarPlacement) => void;
+    /**
+     * Icon of a round button shown above a vertical tab bar. The button only
+     * appears while the tab bar is vertical and visible. iOS only.
+     */
+    sideAccessoryIcon?: ImageSourcePropType;
+    /**
+     * Accessibility label of the side accessory button.
+     */
+    sideAccessoryLabel?: string;
+    /**
+     * Called when the side accessory button is pressed.
+     */
+    onSideAccessoryPress?: () => void;
 }
-declare const BottomTabs: <Route extends BaseRoute>({ navigationState, renderScene, renderLazyPlaceholder, onIndexChange, onTabDoublePress, renderDrawerContent, drawerOpen, drawerSwipeEnabled, onDrawerOpenChange, 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, androidBottomBlurEnabled, delayedFreeze, ...props }: Props<Route>) => import("react/jsx-runtime").JSX.Element;
+declare const BottomTabs: <Route extends BaseRoute>({ navigationState, renderScene, renderLazyPlaceholder, onIndexChange, onTabDoublePress, renderDrawerContent, drawerOpen, drawerSwipeEnabled, onDrawerOpenChange, 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, androidBottomBlurEnabled, delayedFreeze, onTabBarPlacementChange, sideAccessoryIcon, sideAccessoryLabel, onSideAccessoryPress, ...props }: Props<Route>) => import("react/jsx-runtime").JSX.Element;
 export default BottomTabs;
 //# sourceMappingURL=BottomTabs.d.ts.map

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

@@ -11,6 +11,10 @@ export type OnNativeLayout = Readonly<{
     width: Double;
     height: Double;
 }>;
+export type OnTabBarPlacementChange = Readonly<{
+    placement: string;
+}>;
+export type OnSideAccessoryPress = Readonly<{}>;
 export type BottomTabsItems = ReadonlyArray<{
     key: string;
     title: string;
@@ -53,6 +57,10 @@ export interface BottomTabsNativeProps extends ViewProps {
     ignoreBottomInsets?: boolean;
     androidTabBarStyle?: WithDefault<'default' | 'floating', 'default'>;
     ignoreKeyboardInsets?: WithDefault<boolean, true>;
+    onTabBarPlacementChange?: DirectEventHandler<OnTabBarPlacementChange>;
+    sideAccessoryIcon?: ImageSource;
+    sideAccessoryLabel?: string;
+    onSideAccessoryPress?: DirectEventHandler<OnSideAccessoryPress>;
 }
 declare const _default: import("react-native").HostComponent<BottomTabsNativeProps>;
 export default _default;

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

@@ -12,5 +12,5 @@ export { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
 /**
  * Types
  */
-export type { AppleIcon, TabRole } from './types';
+export type { AppleIcon, TabBarPlacement, TabRole } from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -5,6 +5,7 @@ export type AppleIcon = {
     sfSymbol: SFSymbol;
 };
 export type TabRole = 'search';
+export type TabBarPlacement = 'bottom' | 'leading' | 'trailing';
 export type BaseRoute = {
     key: string;
     title?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-bottom-tabs",
-  "version": "6.7.0-alpha.385",
+  "version": "6.7.0-alpha.386",
   "description": "Native bottom tabs (tab bar + scene container) for React Native on iOS and Android",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",

package/src/BottomTabs.tsx

@@ -1,31 +1,38 @@
-import React, { useLayoutEffect, useRef } from 'react';
-import type { NativeSyntheticEvent } from 'react-native';
+import React, { useLayoutEffect, useRef } from "react";
+import type { NativeSyntheticEvent } from "react-native";
 import {
   type ColorValue,
   type DimensionValue,
   Image,
+  type ImageSourcePropType,
   Platform,
   type StyleProp,
   StyleSheet,
   View,
   type ViewStyle,
   processColor,
-} from 'react-native';
-import { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
+} from "react-native";
+import { BottomTabBarHeightContext } from "./utils/BottomTabBarHeightContext";
 
 // eslint-disable-next-line @react-native/no-deep-imports
-import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
+import type { ImageSource } from "react-native/Libraries/Image/ImageSource";
 import NativeBottomTabs, {
   type BottomTabsItems,
-} from './BottomTabsNativeComponent';
-import useLatestCallback from 'use-latest-callback';
-import type { AppleIcon, BaseRoute, NavigationState, TabRole } from './types';
-import DelayedFreeze from './DelayedFreeze';
-import NativeBottomTabsDrawer from './BottomTabsDrawerNativeComponent';
+} from "./BottomTabsNativeComponent";
+import useLatestCallback from "use-latest-callback";
+import type {
+  AppleIcon,
+  BaseRoute,
+  NavigationState,
+  TabBarPlacement,
+  TabRole,
+} from "./types";
+import DelayedFreeze from "./DelayedFreeze";
+import NativeBottomTabsDrawer from "./BottomTabsDrawerNativeComponent";
 import {
   BottomAccessoryView,
   type RNBottomTabsAccessoryViewProps,
-} from './BottomAccessoryView';
+} from "./BottomAccessoryView";
 
 const isAppleSymbol = (icon: any): icon is { sfSymbol: string } =>
   icon?.sfSymbol;
@@ -65,12 +72,12 @@ interface Props<Route extends BaseRoute> {
   /**
    * Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom. (iOS only)
    */
-  scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
+  scrollEdgeAppearance?: "default" | "opaque" | "transparent";
 
   /**
    * Behavior for minimizing the tab bar. (iOS 26+)
    */
-  minimizeBehavior?: 'automatic' | 'onScrollDown' | 'onScrollUp' | 'never';
+  minimizeBehavior?: "automatic" | "onScrollDown" | "onScrollUp" | "never";
   /**
    * Active tab color.
    */
@@ -199,7 +206,7 @@ interface Props<Route extends BaseRoute> {
    * A function that returns a React element to display as bottom accessory view.
    * iOS 26+ only.
    */
-  renderBottomAccessoryView?: RNBottomTabsAccessoryViewProps['renderBottomAccessoryView'];
+  renderBottomAccessoryView?: RNBottomTabsAccessoryViewProps["renderBottomAccessoryView"];
   /**
    * Whether the tab bar is hidden.
    */
@@ -211,7 +218,7 @@ interface Props<Route extends BaseRoute> {
   /**
    * Visual style of the Android tab bar. Android only.
    */
-  androidTabBarStyle?: 'default' | 'floating';
+  androidTabBarStyle?: "default" | "floating";
   /**
    * Whether the tab bar ignores the soft keyboard. Defaults to true, so the
    * keyboard covers the tab bar as on iOS. Set to false to pad the tab bar by
@@ -224,6 +231,24 @@ interface Props<Route extends BaseRoute> {
    * original delayed behavior.
    */
   delayedFreeze?: boolean;
+  /**
+   * Called when the system moves the tab bar between the bottom edge and a
+   * vertical bar on the leading or trailing edge (iPhone Duo). iOS only.
+   */
+  onTabBarPlacementChange?: (placement: TabBarPlacement) => void;
+  /**
+   * Icon of a round button shown above a vertical tab bar. The button only
+   * appears while the tab bar is vertical and visible. iOS only.
+   */
+  sideAccessoryIcon?: ImageSourcePropType;
+  /**
+   * Accessibility label of the side accessory button.
+   */
+  sideAccessoryLabel?: string;
+  /**
+   * Called when the side accessory button is pressed.
+   */
+  onSideAccessoryPress?: () => void;
 }
 
 const ANDROID_MAX_TABS = 100;
@@ -260,34 +285,41 @@ const BottomTabs = <Route extends BaseRoute>({
   getSceneStyle = ({ route }: { route: Route }) => route.style,
   getPreventsDefault = ({ route }: { route: Route }) => route.preventsDefault,
   hapticFeedbackEnabled = false,
-  labeled = Platform.OS !== 'android' ? true : undefined,
+  labeled = Platform.OS !== "android" ? true : undefined,
   getFreezeOnBlur = ({ route }: { route: Route }) => route.freezeOnBlur,
   tabBar: renderCustomTabBar,
   tabBarStyle,
   tabLabelStyle,
   renderBottomAccessoryView,
   activeIndicatorColor,
-  androidBottomBlurEnabled = Platform.OS === 'android' &&
+  androidBottomBlurEnabled = Platform.OS === "android" &&
     Number(Platform.Version) >= 36,
   delayedFreeze = false,
+  onTabBarPlacementChange,
+  sideAccessoryIcon,
+  sideAccessoryLabel,
+  onSideAccessoryPress,
   ...props
 }: Props<Route>) => {
   // @ts-ignore
   const focusedKey = navigationState.routes[navigationState.index].key;
   const customTabBarWrapperRef = useRef<View>(null) as React.RefObject<any>;
-  const nativeBottomTabsRef = useRef<React.ElementRef<typeof NativeBottomTabs>>(null);
+  const nativeBottomTabsRef =
+    useRef<React.ElementRef<typeof NativeBottomTabs>>(null);
   const [nativeTabBarHeight, setNativeTabBarHeight] = React.useState(0);
   const [customTabBarHeight, setCustomTabBarHeight] = React.useState(0);
   const tabBarHeight = renderCustomTabBar
     ? customTabBarHeight
-    : props.tabBarHidden ? 0 : nativeTabBarHeight;
+    : props.tabBarHidden
+    ? 0
+    : nativeTabBarHeight;
   const [measuredDimensions, setMeasuredDimensions] = React.useState<
     { width: DimensionValue; height: DimensionValue } | undefined
-  >({ width: '100%', height: '100%' });
+  >({ width: "100%", height: "100%" });
 
   const trimmedRoutes = React.useMemo(() => {
     if (
-      Platform.OS === 'android' &&
+      Platform.OS === "android" &&
       navigationState.routes.length > ANDROID_MAX_TABS
     ) {
       console.warn(
@@ -304,7 +336,7 @@ const BottomTabs = <Route extends BaseRoute>({
     setLoaded((loaded) => [...loaded, focusedKey]);
   }
 
-  const isIOS = Platform.OS === 'ios';
+  const isIOS = Platform.OS === "ios";
 
   // Unfocused (outline) icons — independent of focusedKey so the array stays
   // stable across tab switches and the native side never reloads on switch.
@@ -341,9 +373,9 @@ const BottomTabs = <Route extends BaseRoute>({
         const icon = icons[index];
         const isSfSymbol = isAppleSymbol(icon);
 
-        if (Platform.OS === 'android' && isSfSymbol) {
+        if (Platform.OS === "android" && isSfSymbol) {
           console.warn(
-            'SF Symbols are not supported on Android. Use require() or pass uri to load an image instead.'
+            "SF Symbols are not supported on Android. Use require() or pass uri to load an image instead."
           );
         }
 
@@ -357,10 +389,10 @@ const BottomTabs = <Route extends BaseRoute>({
           sfSymbol: isSfSymbol ? icon.sfSymbol : undefined,
           badge: getBadge?.({ route }),
           badgeBackgroundColor:
-            typeof badgeBgColor === 'number' ? badgeBgColor : undefined,
+            typeof badgeBgColor === "number" ? badgeBgColor : undefined,
           badgeTextColor:
-            typeof badgeTxtColor === 'number' ? badgeTxtColor : undefined,
-          activeTintColor: typeof color === 'number' ? color : undefined,
+            typeof badgeTxtColor === "number" ? badgeTxtColor : undefined,
+          activeTintColor: typeof color === "number" ? color : undefined,
           hidden: getHidden?.({ route }),
           testID: getTestID?.({ route }),
           role: getRole?.({ route }),
@@ -389,13 +421,13 @@ const BottomTabs = <Route extends BaseRoute>({
           // @ts-ignore - resolveAssetSource accepts ImageSourcePropType
           const resolved = Image.resolveAssetSource(icon);
           return {
-            uri: resolved?.uri ?? '',
+            uri: resolved?.uri ?? "",
             width: resolved?.width ?? 0,
             height: resolved?.height ?? 0,
             scale: resolved?.scale ?? 1,
           };
         }
-        return { uri: '', width: 0, height: 0, scale: 1 };
+        return { uri: "", width: 0, height: 0, scale: 1 };
       }),
     [icons]
   );
@@ -409,13 +441,13 @@ const BottomTabs = <Route extends BaseRoute>({
           // @ts-ignore - resolveAssetSource accepts ImageSourcePropType
           const resolved = Image.resolveAssetSource(icon);
           return {
-            uri: resolved?.uri ?? '',
+            uri: resolved?.uri ?? "",
             width: resolved?.width ?? 0,
             height: resolved?.height ?? 0,
             scale: resolved?.scale ?? 1,
           };
         }
-        return { uri: '', width: 0, height: 0, scale: 1 };
+        return { uri: "", width: 0, height: 0, scale: 1 };
       }),
     [focusedIcons]
   );
@@ -444,10 +476,12 @@ const BottomTabs = <Route extends BaseRoute>({
       const { key } = event.nativeEvent;
       const accepted = jumpTo(key);
       if (accepted === false) {
-        nativeBottomTabsRef.current?.setNativeProps({ selectedPage: focusedKey });
+        nativeBottomTabsRef.current?.setNativeProps({
+          selectedPage: focusedKey,
+        });
       }
     },
-    [focusedKey, jumpTo],
+    [focusedKey, jumpTo]
   );
 
   const handleTabBarMeasured = React.useCallback(
@@ -465,11 +499,40 @@ const BottomTabs = <Route extends BaseRoute>({
     [setMeasuredDimensions]
   );
 
+  const handleTabBarPlacementChange = React.useCallback(
+    (event: NativeSyntheticEvent<{ placement: string }>) => {
+      onTabBarPlacementChange?.(event.nativeEvent.placement as TabBarPlacement);
+    },
+    [onTabBarPlacementChange]
+  );
+
+  const handleSideAccessoryPress = React.useCallback(() => {
+    onSideAccessoryPress?.();
+  }, [onSideAccessoryPress]);
+
+  const resolvedSideAccessoryIcon = React.useMemo(() => {
+    if (!isIOS || !sideAccessoryIcon) {
+      return undefined;
+    }
+    // @ts-ignore - resolveAssetSource accepts ImageSourcePropType
+    const resolved = Image.resolveAssetSource(sideAccessoryIcon);
+    return resolved?.uri
+      ? {
+          uri: resolved.uri,
+          width: resolved.width ?? 0,
+          height: resolved.height ?? 0,
+          scale: resolved.scale ?? 1,
+        }
+      : undefined;
+  }, [sideAccessoryIcon]);
+
   useLayoutEffect(() => {
     if (renderCustomTabBar && customTabBarWrapperRef.current) {
-      customTabBarWrapperRef.current.measure((_x: number, _y: number, _width: number, height: number) => {
-        setCustomTabBarHeight(height);
-      });
+      customTabBarWrapperRef.current.measure(
+        (_x: number, _y: number, _width: number, height: number) => {
+          setCustomTabBarHeight(height);
+        }
+      );
     }
   }, [renderCustomTabBar]);
 
@@ -487,7 +550,7 @@ const BottomTabs = <Route extends BaseRoute>({
         }
       >
         <View collapsable={false} style={styles.drawerMenu}>
-          {Platform.OS !== 'web' ? renderDrawerContent?.() : null}
+          {Platform.OS !== "web" ? renderDrawerContent?.() : null}
         </View>
         <View collapsable={false} style={styles.fullWidth}>
           <NativeBottomTabs
@@ -498,7 +561,9 @@ const BottomTabs = <Route extends BaseRoute>({
             items={items}
             icons={renderCustomTabBar ? undefined : resolvedIconAssets}
             selectedIcons={
-              isIOS && !renderCustomTabBar ? resolvedSelectedIconAssets : undefined
+              isIOS && !renderCustomTabBar
+                ? resolvedSelectedIconAssets
+                : undefined
             }
             selectedPage={focusedKey}
             tabBarHidden={props.tabBarHidden ?? !!renderCustomTabBar}
@@ -506,6 +571,12 @@ const BottomTabs = <Route extends BaseRoute>({
             onPageSelected={handlePageSelected}
             onTabBarMeasured={handleTabBarMeasured}
             onNativeLayout={handleNativeLayout}
+            onTabBarPlacementChange={handleTabBarPlacementChange}
+            sideAccessoryIcon={
+              renderCustomTabBar ? undefined : resolvedSideAccessoryIcon
+            }
+            sideAccessoryLabel={sideAccessoryLabel}
+            onSideAccessoryPress={handleSideAccessoryPress}
             hapticFeedbackEnabled={hapticFeedbackEnabled}
             activeTintColor={activeTintColor}
             inactiveTintColor={inactiveTintColor}
@@ -513,7 +584,7 @@ const BottomTabs = <Route extends BaseRoute>({
             rippleColor={rippleColor}
             activeIndicatorColor={activeIndicatorColor}
             androidBottomBlurEnabled={
-              Platform.OS === 'android' &&
+              Platform.OS === "android" &&
               !renderCustomTabBar &&
               androidBottomBlurEnabled
             }
@@ -546,13 +617,16 @@ const BottomTabs = <Route extends BaseRoute>({
                     customStyle,
                   ]}
                   collapsable={false}
-                  pointerEvents={focused ? 'auto' : 'none'}
+                  pointerEvents={focused ? "auto" : "none"}
                   accessibilityElementsHidden={!focused}
                   importantForAccessibility={
-                    focused ? 'auto' : 'no-hide-descendants'
+                    focused ? "auto" : "no-hide-descendants"
                   }
                 >
-                  <DelayedFreeze freeze={!!freeze} delayedFreeze={delayedFreeze}>
+                  <DelayedFreeze
+                    freeze={!!freeze}
+                    delayedFreeze={delayedFreeze}
+                  >
                     {renderScene({
                       route,
                       jumpTo,
@@ -561,7 +635,7 @@ const BottomTabs = <Route extends BaseRoute>({
                 </View>
               );
             })}
-            {Platform.OS === 'ios' &&
+            {Platform.OS === "ios" &&
             parseFloat(Platform.Version) >= 26 &&
             renderBottomAccessoryView &&
             !renderCustomTabBar ? (
@@ -573,7 +647,9 @@ const BottomTabs = <Route extends BaseRoute>({
           {renderCustomTabBar ? (
             <View
               ref={customTabBarWrapperRef}
-              onLayout={(event) => setCustomTabBarHeight(event.nativeEvent.layout.height)}
+              onLayout={(event) =>
+                setCustomTabBarHeight(event.nativeEvent.layout.height)
+              }
             >
               {renderCustomTabBar()}
             </View>
@@ -586,17 +662,17 @@ const BottomTabs = <Route extends BaseRoute>({
 
 const styles = StyleSheet.create({
   fullWidth: {
-    width: '100%',
-    height: '100%',
+    width: "100%",
+    height: "100%",
     flex: 1,
   },
   drawerMenu: {
-    position: 'absolute',
-    width: '78%',
-    height: '100%',
+    position: "absolute",
+    width: "78%",
+    height: "100%",
   },
   screen: {
-    position: 'absolute',
+    position: "absolute",
   },
 });
 

package/src/BottomTabsNativeComponent.ts

@@ -22,6 +22,14 @@ export type OnNativeLayout = Readonly<{
   height: Double;
 }>;
 
+// Where the system draws the tab bar: 'bottom', or 'leading' / 'trailing' for
+// a vertical bar (the iPhone Duo side strip, iOS 27.1+).
+export type OnTabBarPlacementChange = Readonly<{
+  placement: string;
+}>;
+
+export type OnSideAccessoryPress = Readonly<{}>;
+
 export type BottomTabsItems = ReadonlyArray<{
   key: string;
   title: string;
@@ -65,6 +73,11 @@ export interface BottomTabsNativeProps extends ViewProps {
   ignoreBottomInsets?: boolean;
   androidTabBarStyle?: WithDefault<'default' | 'floating', 'default'>;
   ignoreKeyboardInsets?: WithDefault<boolean, true>;
+  onTabBarPlacementChange?: DirectEventHandler<OnTabBarPlacementChange>;
+  // A round button drawn above a vertical tab bar; iOS only.
+  sideAccessoryIcon?: ImageSource;
+  sideAccessoryLabel?: string;
+  onSideAccessoryPress?: DirectEventHandler<OnSideAccessoryPress>;
 }
 
 export default codegenNativeComponent<BottomTabsNativeProps>('RNBottomTabsView');

package/src/index.tsx

@@ -15,4 +15,4 @@ export { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
 /**
  * Types
  */
-export type { AppleIcon, TabRole } from './types';
+export type { AppleIcon, TabBarPlacement, TabRole } from './types';

package/src/types.ts

@@ -7,6 +7,9 @@ export type AppleIcon = { sfSymbol: SFSymbol };
 
 export type TabRole = 'search';
 
+// 'leading' and 'trailing' mean a vertical tab bar on that edge.
+export type TabBarPlacement = 'bottom' | 'leading' | 'trailing';
+
 export type BaseRoute = {
   key: string;
   title?: string;