@onekeyfe/react-native-bottom-tabs 6.7.0-19 → 6.7.0-21

package/android/src/main/java/com/onekey/bottomtabs/BottomTabsView.kt

@@ -154,7 +154,14 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
   private val floatingRoot = object : FrameLayout(context) {
     override fun drawChild(canvas: Canvas, child: View, drawingTime: Long): Boolean {
       if (child === floatingBar && usesBottomBlur) {
-        drawBlurBackdrop(canvas, width, floatingBar.top, height) { recording ->
+        drawBlurBackdrop(
+          canvas,
+          floatingBar.left,
+          floatingBar.top,
+          floatingBar.right,
+          floatingBar.bottom,
+          floatingBar.height / 2f,
+        ) { recording ->
           super.drawChild(recording, layoutHolder, drawingTime)
         }
       }
@@ -994,18 +1001,31 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
   }
 
   private fun drawBlurBackdrop(
-    canvas: Canvas, width: Int, barTop: Int, bottom: Int, drawScenes: (Canvas) -> Unit,
+    canvas: Canvas,
+    left: Int,
+    top: Int,
+    right: Int,
+    bottom: Int,
+    cornerRadius: Float,
+    drawScenes: (Canvas) -> Unit,
   ) {
     if (!usesBottomBlur || !canvas.isHardwareAccelerated || Build.VERSION.SDK_INT < 31) return
     val blur = bottomBarBlur ?: BottomBarBlurRenderer(resources.displayMetrics.density).also {
       bottomBarBlur = it
     }
-    blur.draw(canvas, width, barTop, bottom, blurSurfaceColor, drawScenes)
+    blur.draw(canvas, left, top, right, bottom, cornerRadius, blurSurfaceColor, drawScenes)
   }
 
   override fun drawChild(canvas: Canvas, child: View, drawingTime: Long): Boolean {
     if (child === bottomNavigation && androidTabBarStyle == AndroidTabBarStyle.DEFAULT) {
-      drawBlurBackdrop(canvas, width, bottomNavigation.top, bottomNavigation.bottom) { recording ->
+      drawBlurBackdrop(
+        canvas,
+        bottomNavigation.left,
+        bottomNavigation.top,
+        bottomNavigation.right,
+        bottomNavigation.bottom,
+        0f,
+      ) { recording ->
         super.drawChild(recording, layoutHolder, drawingTime)
       }
     }

package/android/src/main/java/com/onekey/bottomtabs/BottomTabsViewManager.kt

@@ -5,6 +5,7 @@ import android.view.View
 import android.view.ViewGroup
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
@@ -213,6 +214,8 @@ class BottomTabsViewManager(context: ReactApplicationContext) :
   override fun setSidebarAdaptable(view: BottomTabsView?, value: Boolean) {}
   override fun setScrollEdgeAppearance(view: BottomTabsView?, value: String?) {}
   override fun setMinimizeBehavior(view: BottomTabsView?, value: String?) {}
+  override fun setSideAccessoryIcon(view: BottomTabsView?, value: ReadableMap?) {}
+  override fun setSideAccessoryLabel(view: BottomTabsView?, value: String?) {}
 
   companion object {
     const val NAME = "RNBottomTabsView"

package/docs/SPEC.md

@@ -1,5 +1,125 @@
 # Native Tab View behavioral contract
 
+## Native left drawer
+
+Status: implemented in module source. Package TypeScript, iOS/Android Fabric
+code generation, iOS Objective-C++ Fabric bridge compilation against RN 0.86.2,
+13 React wrapper checks, twelve Android API 36 native tests and four real-Fabric
+iOS review cases passed (shared-header/body arbitration and bar-height switches).
+The static Home example also passed a focused TypeScript check.
+Detailed iOS runtime evidence is recorded separately; physical-device and exact
+reference-video acceptance remain pending.
+
+`renderDrawerContent?: () => React.ReactNode` supplies an optional menu slot.
+`drawerOpen?: boolean` defaults to false and requests its stable open state.
+`onDrawerOpenChange?: (open: boolean) => void` reports a completed user transition;
+controlled consumers MUST mirror it into `drawerOpen`. Prop-driven transitions,
+initial layout and cancellation emit no event. A user transition returning to
+the previous stable state emits only when it overrides an in-flight external
+target, so the consumer can reconcile that target. `drawerSwipeEnabled?: boolean`
+defaults to false; callers MUST enable it only where drawer navigation is appropriate (normally a root
+screen). Existing `hapticFeedbackEnabled` enables one light native haptic after
+a completed user transition changes the stable state. Programmatic updates and
+cancelled gestures do not vibrate.
+
+The drawer is physically left on both iOS and Android, including RTL. Its width
+is 78 percent of the host. The foreground is the full tab container, including
+the native tab bar and an optional custom JS bar. It keeps its full width and
+height while moving right, without scaling, scene reparenting or remounting.
+The native host and two slots remain mounted when the drawer is disabled or its
+content changes. Missing content disables the drawer, resets it closed without
+an event, and passes foreground input through. Web omits the drawer host/menu
+and passes the existing tab content through; it implements no drawer gestures.
+The existing tab view's other Web support is unchanged.
+
+For normalized progress `p` in [0, 1], foreground translation is `.78 * width * p`,
+its left circular corner radius is `64 * p` points/dp and its neutral gray
+dim surface (RGB 28/28/28) has opacity `.7 * p`.
+The menu translates from `-.12 * drawerWidth` to zero; a black menu shade fades
+from .12 to zero. These are initial reference-video tuning values, not a claim
+of pixel-perfect parity. Closed menus are hidden from touch/accessibility;
+while visible, the foreground is blocked by a native dim surface. Tapping that
+surface closes the drawer. iOS accessibility escape and Android Back close an
+open drawer; the dim surface exposes an accessible close action.
+On Android the dim surface MUST retain full foreground bounds even while hidden
+and after React/Fabric ancestors suppress `requestLayout`. Internal containers
+and both slots MUST be measured and laid out on host layout and slot changes,
+without relying on a later ancestor layout pass. Visible dim input MUST prevent
+native foreground controls from receiving the same touch.
+While closed, that retained dim surface MUST also be excluded from React Native
+touch-target lookup, so JS Pressable taps reach the foreground. Visibility alone
+is insufficient for React Native's native target traversal.
+
+The reported native tab-bar height MUST become zero when hidden and restore the
+current height when shown. The context and drawer exclusion use one effective
+height: a rendered custom bar's own measured height takes precedence; otherwise
+`tabBarHidden` forces zero. Native hide measurements MUST NOT overwrite a custom
+bar's height, including across native/custom presentation switches.
+
+With opening swipes enabled, a one-finger rightward gesture may start anywhere
+in the foreground content. At the first confirmed direction, the actual native
+touch target and its ancestor chain determine ownership. A horizontal scroll
+view, list or pager which can consume that physical direction takes priority;
+only when every such ancestor is at its boundary may the drawer open. Vertical
+scroll views do not block horizontal drawer intent. Once selected, the owner is
+locked until up/cancel: reaching a boundary mid-gesture does not hand off.
+Disabled pager input does not claim a gesture based on its retained scroll
+range; an independently enabled horizontal child inside that page still can.
+An ancestor pager which explicitly excludes the touched shared header MUST NOT
+claim that header gesture solely because its horizontal offset is nonzero.
+The header's own nested horizontal content retains its normal boundary priority.
+On iOS this uses the repository's existing `excludedHeaderView` Objective-C
+getter on the native smooth pager and the real touch target's ancestry. It does
+not invoke another scroll view's UIKit recognition lifecycle hook, add a Pager
+API, or infer a header exclusion from a pager's selected page.
+The iOS UIPageViewController boundary uses its public data-source query once per
+decision, skipping its internally centered scroll offset. Android observes
+pending direction even when a nested pager initially disallows interception,
+but stops overriding that request after the child wins. Sliders and editing controls,
+web/graphics surfaces, system back gestures and starts in the bottom tab-bar
+footprint take priority. When open, closing gestures
+remain enabled even if opening swipes are disabled. Only the exposed
+foreground accepts a closing pan; menu scrolling remains the consumer's own.
+Vertical gestures fail before taking ownership. Active touches interrupted by
+a second finger, system cancellation, disabling, detach or a newer prop update
+cannot later emit an event. Cancellation returns to the previous stable state,
+or resumes an external target whose programmatic animation the gesture interrupted.
+No gesture progress crosses the JS bridge.
+
+Both platforms settle on their UI thread with the same critically damped curve:
+`p(t) = target + (a + b*t) * exp(-22*t)`, where `a = p0-target`,
+`b = v0 + 22*a`, and normalized velocity `v0` is clamped to [-8, 8] per second.
+Presentation is clamped to [0, 1], and the transition ends at or before 500 ms.
+Release targets open when `p + v0*.12 >= .5`. A newer animation or touch starts
+from the current displayed progress and cancels the previous completion.
+Resize snaps a pending settlement to its target, emitting its user event once
+if appropriate; an active drag follows the same cancellation rule. Detach cancels
+animations and callbacks; reattachment reapplies the latest external target.
+The host retains at most one display-link/animator, one touch
+sequence, two React child slots, and native dim surfaces. It owns no snapshots,
+workers, persistence, JS animation objects, RNGH or Reanimated dependency.
+
+Implementation boundaries: `src/BottomTabs.tsx` owns slots and settled callbacks;
+`src/BottomTabsDrawerNativeComponent.ts` defines the Fabric boundary;
+`ios/RCTBottomTabsDrawerContainerView.swift` and
+`android/src/main/java/com/onekey/bottomtabs/BottomTabsDrawerView.kt` own native
+input, layout, animation and cleanup. The iOS Fabric component and Android manager only forward children,
+props and the settled event. Required acceptance includes both bar styles,
+custom bars, content/vertical gestures, dim close, rapid reversal, cancellation,
+disable/remove-content, resize, detach, accessibility, RTL and bottom-bar
+gesture ownership, including a real pager, nested horizontal list and vertical
+scrolling in the complete Fabric example. Source checks and emulator checks do not establish physical
+device smoothness or exact reference-video fidelity.
+The Android native suite also exercises generated drawer prop forwarding in RTL,
+physical-left placement, and closing pans while opening swipes are disabled.
+
+The standalone `example/react-native/pages/BottomTabsHomeDrawerExample.tsx`
+reproduces Home’s wallet toolbar, balance/actions/banner shared header and
+Spot/Perps/Earn/NFT/History hierarchy using static data, native CollapsiblePager
+and standard React Native scroll views. It is an equivalent interaction fixture;
+the application’s existing JS collapsible-header implementation and business
+NativeList pages are not migrated or exercised by this fixture.
+
 ## Tab presses and double press
 
 Status: implemented in module source. Runtime verification status is recorded
@@ -52,10 +172,10 @@ bottom gap, or 0 while hidden.
 
 Floating appearance with background blur disabled: the bar surface is `barTintColor` (or the theme background)
 at 95% opacity (lightened slightly for dark colors), with
-a hairline rim and an outline shadow. When background blur is enabled (see below), the bottom strip extends from
-24 dp above the capsule to the bottom of the scene, including the gap beneath
-the capsule. The existing capsule keeps its rim/shadow and uses a 12 percent
-surface fill over the blurred strip; its lens and navigation controls remain
+a hairline rim and an outline shadow. When background blur is enabled (see below), the live blur and translucent
+surface tint are confined and clipped to the capsule bounds; the region above,
+beside, and beneath the capsule remains unblurred. The existing capsule keeps its rim/shadow and uses a 12 percent
+surface fill over the blurred capsule backdrop; its lens and navigation controls remain
 sharp. The selected tab sits on a capsule pill inset 4 dp
 (`activeIndicatorColor` when provided). The Material ripple is disabled; the
 lens provides press feedback.
@@ -91,7 +211,7 @@ coverage. Complete consumer-app and physical-device acceptance remain pending;
 API 31-35 and visual dark-mode acceptance have not been reverified for this port.
 
 `androidBottomBlurEnabled?: boolean` controls the native Android tab bar's live
-background blur, translucent surface tint, and 24 dp fade into the page above it.
+background blur and translucent surface tint behind the bar.
 Omitting it (including `undefined`) MUST enable the effect only on Android 16
 (API 36) and newer. `false` MUST restore the existing appearance and layout for the current
 `androidTabBarStyle`: docked scenes reserve bar height; floating scenes retain
@@ -109,19 +229,22 @@ report zero bar height. Toggling, resizing, theme changes, and system/keyboard
 insets MUST refresh geometry and appearance without remounting scenes.
 
 The module owns the GPU resources on the UI thread. It MUST sample only the
-scene layer, excluding the tab bar and its own output. It MUST use hardware
-RenderNode/RenderEffect rendering of a bottom strip at one-quarter resolution
-in each dimension, with a 20 dp blur radius and 40 dp sampling margin above the
-fade. It MUST NOT capture bitmaps, read pixels back to the CPU, emit scroll
-events to JS, or run a recurring frame callback for this effect. Rendering MUST
-follow the normal view invalidation cycle, using the scene's existing display
-lists. The translucent tint MUST follow `tabBarStyle.backgroundColor` when set,
-otherwise the docked Material surface color or floating theme background,
-with opacity capped at 78 percent.
-
-Only one blur RenderNode and cached paints/shaders MAY be retained per mounted
-tab view. Its offscreen dimensions MUST be bounded by one-quarter of the view
-width and the smaller of the view height or reported bar footprint plus 64 dp (rounded up).
+scene layer directly behind the active tab bar bounds (the docked bar rectangle
+in `default` style or the capsule bounds in `floating` style), excluding the
+tab bar and its own output, and clip the blurred backdrop and tint to those
+bounds (including the capsule corner radius in `floating` style) with no blur
+or fade bleeding above or outside the bar. It MUST use hardware
+RenderNode/RenderEffect rendering of the bar bounds at one-quarter resolution
+in each dimension, with a 20 dp blur radius. It MUST NOT capture bitmaps, read
+pixels back to the CPU, emit scroll events to JS, or run a recurring frame
+callback for this effect. Rendering MUST follow the normal view invalidation
+cycle, using the scene's existing display lists. The translucent tint MUST
+follow `tabBarStyle.backgroundColor` when set, otherwise the docked Material
+surface color or floating theme background, with opacity capped at 78 percent.
+
+Only one blur RenderNode and cached paints/paths MAY be retained per mounted
+tab view. Its offscreen dimensions MUST be bounded by one-quarter of the bar
+width and one-quarter of the bar height (rounded up).
 Disabling, hiding, detaching, and dropping the native view MUST discard the
 display list; no scene snapshots, disk cache, timers, or background workers are
 owned. SurfaceView content is outside the normal View display list and is not
@@ -142,12 +265,46 @@ 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.
+- Android MUST accept `sideAccessoryIcon` and `sideAccessoryLabel`, including
+  null resets, as no-ops through its generated ViewManager interface. It MUST
+  NOT create a side accessory or emit placement/accessory events. Shared Fabric
+  props still require Android setters even when the feature is iOS-only.
+- 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
 the main-runtime native view. The view owns no background-runtime or shared JS
-objects. Retained state is bounded to the current touch sequence, the last
-pressed tab and timestamp, and at most two running animators.
+objects. The tab bar retains the current touch sequence, the last pressed tab
+and timestamp, and at most two running animators. The optional drawer's additional
+single animation and touch ownership are bounded in the Native left drawer section.
 
 ## Conformance and acceptance
 
@@ -166,3 +323,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,16 @@ 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?
+  // Increments per icon load; a completion applies only to the latest one.
+  private var sideAccessoryIconRequest = 0
+  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 +138,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 +161,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 +212,165 @@ 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() {
+    sideAccessoryIconRequest += 1
+    let request = sideAccessoryIconRequest
+    // Drop the previous icon so a slower or failed load never leaves it shown
+    // for the new source.
+    if loadedSideAccessoryIcon != nil {
+      loadedSideAccessoryIcon = nil
+      scheduleSideAccessoryLayout()
+    }
+    let source = sideAccessoryIcon.map { IconSource(dict: $0) }
+    guard let source, let url = URL(string: source.uri) else { 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, request == self.sideAccessoryIconRequest else { return }
+          self.loadedSideAccessoryIcon = image
+            .resizeImageTo(size: self.iconSize)?
+            .withRenderingMode(.alwaysTemplate)
+          self.scheduleSideAccessoryLayout()
+        }
+      })
+  }
+
   // MARK: - Lifecycle
 
   private func handleLayout() {
@@ -197,6 +380,7 @@ class RCTBottomTabsContainerView: UIView {
     setupTabBarControllerIfNeeded()
     tabBarController?.view.frame = bounds
     onNativeLayout?(["width": Double(bounds.width), "height": Double(bounds.height)])
+    scheduleSideAccessoryLayout()
   }
 
   private func setupTabBarControllerIfNeeded() {
@@ -215,6 +399,7 @@ class RCTBottomTabsContainerView: UIView {
     tbc.didMove(toParent: parentVC)
 
     self.tabBarController = tbc
+    registerVerticalBarTraitChanges(tbc)
 
     rebuildViewControllers()
     updateTabBarAppearance()
@@ -225,9 +410,7 @@ class RCTBottomTabsContainerView: UIView {
 
     DispatchQueue.main.async { [weak self] in
       guard let self, let tbc = self.tabBarController else { return }
-      if !tbc.tabBar.isHidden {
-        self.onTabBarMeasured?(["height": Double(tbc.tabBar.frame.size.height)])
-      }
+      self.onTabBarMeasured?(["height": self.tabBarHidden ? 0 : Double(tbc.tabBar.frame.size.height)])
     }
   }
 
@@ -358,6 +541,8 @@ class RCTBottomTabsContainerView: UIView {
     }
 
     updateSelectedTab()
+    // The platter height follows the number of visible tabs.
+    scheduleSideAccessoryLayout()
   }
 
   // MARK: - Selection
@@ -499,9 +684,8 @@ class RCTBottomTabsContainerView: UIView {
     #endif
     tbc.tabBar.isUserInteractionEnabled = !tabBarHidden
 
-    if !tabBarHidden {
-      onTabBarMeasured?(["height": Double(tbc.tabBar.frame.size.height)])
-    }
+    onTabBarMeasured?(["height": tabBarHidden ? 0 : Double(tbc.tabBar.frame.size.height)])
+    scheduleSideAccessoryLayout()
   }
 
   private func updateSidebarAdaptable() {
@@ -573,6 +757,7 @@ class RCTBottomTabsContainerView: UIView {
     self.imageLoader = loader
     loadIconsFromSources()
     loadSelectedIconsFromSources()
+    loadSideAccessoryIcon()
   }
 
   private func loadIconsFromSources() {

package/ios/RCTBottomTabsDrawerComponentView.h

@@ -0,0 +1,8 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+@interface RCTBottomTabsDrawerComponentView : RCTViewComponentView
+@end
+NS_ASSUME_NONNULL_END
+#endif