feat(iOS, Tabs): add bottomAccessory support #3288

kligarski · 2025-10-07T12:01:11Z

Description

Adds support for botttomAccessory in Bottom Tabs starting from iOS 26.

Synchronization with ShadowTree

When bottom accessory transitions between regular and inline environments (when tab bar is minimized), we need to update the position and size of the bottom accessory. Our approach is different for RN < 0.82 and RN >= 0.82.

Legacy architecture & New architecture prior to `[email protected]`

In versions prior to RN 0.82, we need use DisplayLink and presentation layer frames to get intermediate frames during the transition. This approach however has a major drawback - we are always at least one frame behind the current state as we're observing what is currently presented. When the difference in size/origin between frames is significant, you can see the content "jumping". In the case of bottom accessory, this is especially visible when using non-translucent background and transitioning from inline to regular environment (pay attention to the right edge of the accessory).

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-10-13.at.08.31.39.mov

Introduction of synchronous state updates in RN 0.82 (more details below) does not improve the situation when using this approach as we are still going to be at least one frame behind the animation.

`[email protected]` and higher

Thanks to introduction of synchronous state updates in RN 0.82, we can rely fully on native mechanisms for handling the transition. Bottom accessory only receives the final frame of the transition and thanks to synchronous state updates, we can immediately recalculate the layout in the Shadow Tree and update the Host Tree. This allows Core Animation framework to make the transition smooth. Details of how we think this works are available here.

Unfortunately, when using react-native, the situation is a little bit more complicated.

Text

Text component behaves differently to the native platform. During the transition, it immediately adapts to the final frame size and then it is stretched. In bare UIKit app, the text adapt to new frame size at the end of the transition.

`react-native`	`UIKit`
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-10-13.at.10.16.33.mov	Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-10-13.at.10.22.22.mov

This requires more investigation and potentially changes in react-native.

Borders

CoreAnimation does not support non-uniform borders so react-native handles them in a custom way that does not seem to be compatible with the transition mechanism.

non-uniform borders	uniform borders + CA enabled
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-10-13.at.10.28.39.mov	Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-10-13.at.10.32.17.mov

This requires more investigation and potentially changes in react-native.

Images

Similar problem (in a way it looks, not the exact mechanism of the bug) happens when using images e.g. with width: 100%.

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-10-13.at.11.08.09.mov

This requires more investigation and potentially changes in react-native.

Mounting/unmounting views during transition

While state updates are performed synchronously, any changes to React Element Tree in reaction to environment change are handled asynchronously. We think that this is why the transition handled by CoreAnimation breaks when trying to mount/unmount components on environment change.

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-10-13.at.08.16.12.mov

Here, we try to remove the note icon. Unfortunately, the rest of the layout does not adapt. You can also observe the text stretching as mentioned 2 sections above.

Changes

add BottomTabsAccessory JS component and use it in BottomTabs,
add BottomTabsAccessoryComponentView, BottomTabsAccessoryEventEmitter, BottomTabsAccessoryComponentViewManager,
add BottomAccessoryHelper to synchronize state between Host and ShadowTree,
adapt BottomTabsHost to accept 2 types of children (Screen and Accessory),
add test screen.

Test code and steps to reproduce

Run Test3288.

Checklist

Included code example that can be used to test this change
Updated TS types
Updated documentation:
Ensured that CI passes

t0maboro

I haven't finished yet, flushing the 1st part

t0maboro · 2025-10-13T09:52:34Z

common/cpp/react/renderer/components/rnscreens/RNSBottomTabsAccessoryComponentDescriptor.h

+  void adopt(ShadowNode &shadowNode) const override {
+    react_native_assert(
+        dynamic_cast<RNSBottomTabsAccessoryShadowNode *>(&shadowNode));
+    auto &bottomTabsAccessoryShadowNode =


nit: might be considered as const

t0maboro · 2025-10-13T09:56:06Z

common/cpp/react/renderer/components/rnscreens/RNSBottomTabsAccessoryShadowNode.cpp

+
+namespace facebook::react {
+
+using namespace yoga;


nit: I prefer using yoga:: instead of via using namespace - yoga classes and other definitions have pretty common names, so it may lead to some conflicts

btw it's not used

t0maboro · 2025-10-13T09:57:13Z

common/cpp/react/renderer/components/rnscreens/RNSBottomTabsAccessoryShadowNode.cpp

@@ -0,0 +1,18 @@
+#include "RNSBottomTabsAccessoryShadowNode.h"
+
+#include <yoga/Yoga.h>


t0maboro · 2025-10-13T10:02:09Z

common/cpp/react/renderer/components/rnscreens/RNSBottomTabsAccessoryState.h

+  const Size frameSize{};
+  const Point offset{};


seems like transitive dependencies, can we import these classes explicitly?

t0maboro · 2025-10-13T10:11:42Z

ios/bottom-tabs/RNSBottomTabsAccessoryComponentView.mm

+- (void)didMoveToWindow
+{
+  if (self.window != nil) {
+    [_helper registerForAccessoryFrameChanges];


Do we need some cleanup counterpart for this method?

t0maboro · 2025-10-13T10:13:49Z

ios/bottom-tabs/RNSBottomTabsAccessoryComponentView.h

+/**
+ * If not null, the bottom tabs host view that this accessory component view belongs to.
+ */
+@property (nonatomic, weak, nullable) RNSBottomTabsHostComponentView *reactSuperview;


maybe reactSuperview -> bottomTabsHostView ?

t0maboro · 2025-10-13T10:15:53Z

ios/bottom-tabs/RNSBottomTabsAccessoryComponentView.mm

+  if (@available(iOS 26, *)) {
+    _helper = [[RNSBottomAccessoryHelper alloc] initWithBottomAccessoryView:self];
+  }
+  _reactEventEmitter = [RNSBottomTabsAccessoryEventEmitter new];


why is this under the compile-time check, but not under runtime check?

t0maboro · 2025-10-13T10:16:59Z

ios/bottom-tabs/RNSBottomTabsAccessoryComponentView.mm

+- (void)invalidateController
+{
+#if RNS_IPHONE_OS_VERSION_AVAILABLE(26_0) && !TARGET_OS_TV && !TARGET_OS_VISION
+  [_helper invalidate];


should we check if helper is not nil?

t0maboro

okay, leaving some more comments, but overall the code is looking very clear and most of them are nitpicks

t0maboro · 2025-10-13T12:04:57Z

ios/bottom-tabs/RNSBottomTabsAccessoryEventEmitter.mm

+    switch (environment) {
+      case UITabAccessoryEnvironmentRegular:
+        payloadEnvironment = react::RNSBottomTabsAccessoryEventEmitter::OnEnvironmentChangeEnvironment::Regular;
+        break;
+      case UITabAccessoryEnvironmentInline:
+        payloadEnvironment = react::RNSBottomTabsAccessoryEventEmitter::OnEnvironmentChangeEnvironment::Inline;
+        break;
+      default:
+        return NO;
+    }


I'm wondering whether this conversion can be extracted

t0maboro · 2025-10-13T12:06:21Z

ios/bottom-tabs/RNSBottomTabsAccessoryEventEmitter.mm

+{
+  if (self = [super init]) {
+#if RCT_NEW_ARCH_ENABLED
+    _reactEventEmitter = nullptr;


it will be nullptr by default, we don't need to initialize it explicitly

t0maboro · 2025-10-13T12:07:19Z

ios/bottom-tabs/RNSBottomTabsAccessoryEventEmitter.mm

+    NSString *environmentString;
+    switch (environment) {
+      case UITabAccessoryEnvironmentRegular:
+        environmentString = @"regular";


I'd consider defining these strings as static variables

t0maboro · 2025-10-13T12:09:09Z

ios/bottom-tabs/RNSBottomTabsHostComponentView.mm

+  RNSBottomTabsAccessoryComponentView *bottomAccessory = nil;
+  for (UIView *childView in _reactSubviews) {
+    if ([childView isKindOfClass:[RNSBottomTabsScreenComponentView class]]) {
+      RNSBottomTabsScreenComponentView *childScreen = static_cast<RNSBottomTabsScreenComponentView *>(childView);


nit: by obj-c convention, should we use static_cast or c-style cast here?

t0maboro · 2025-10-13T12:11:13Z

ios/bottom-tabs/RNSBottomTabsHostComponentView.mm

 - (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)index
 {
+  [super insertReactSubview:subview atIndex:index];
+  BOOL isValidBottomAccessory = [subview isKindOfClass:[RNSBottomTabsAccessoryComponentView class]];


isValidBottomAccessory -> isBottomAccessory ?

t0maboro · 2025-10-13T12:12:03Z

ios/bottom-tabs/RNSBottomTabsHostComponentView.mm

+  [super removeReactSubview:subview];
+  BOOL isValidBottomAccessory = [subview isKindOfClass:[RNSBottomTabsAccessoryComponentView class]];
+  BOOL isTabsScreen = [subview isKindOfClass:[RNSBottomTabsScreenComponentView class]];


this is repeated across some functions, I'd consider extracting it

t0maboro · 2025-10-13T12:16:57Z

src/components/bottom-tabs/BottomTabsAccessory.tsx

+    <BottomTabsAccessoryNativeComponent
+      {...props}
+      collapsable={false}
+      style={[props.style, styles.container]}>


shouldn't this be reversed? container might override some user-defined styles

t0maboro · 2025-10-13T12:18:11Z

src/components/bottom-tabs/BottomTabsAccessory.tsx

+      {...props}
+      collapsable={false}
+      style={[props.style, styles.container]}>
+      {props.children}


shorter version <BottomTabsAccessoryNativeComponent ... /> should work well

kligarski added 18 commits September 30, 2025 16:34

add skeleton

d8eaeae

WIP

226954c

controlers

28ac025

helper and wrapper, invalidating display link

a71d92b

refactor

6a9c2a1

refactor 2

5ea44e8

invalidating skeleton

775ae70

don't update if tab controllers did not change

a4a84e6

use correct type in RCTInvalidating's invalidate

7e608c4

add environment change events

4df66d2

ios 26 availability, typo

1f8b2da

refactor JS API

35aae34

use KVO for native bottom accessory view's frame

537adad

Paper implementation

7eb5f64

add test screen

bea9501

revert changes to TestBottomTabs

9bead07

remove custom wrapper

33bfde5

fix inserting and removing react subviews in host component

4ba4a5c

Ubax mentioned this pull request Oct 10, 2025

[sdk-55][expo-router] add support for bottom tab accessory in native tabs expo/expo#39114

Closed

3 tasks

kligarski added 6 commits October 13, 2025 07:54

restore App.tsx

cac1c98

Merge branch 'main' into @kligarski/bottom-accessory

bdaada7

in-code docs refinement

aadf116

add iOS version guards

1c34da9

fix guards

31c3bef

fix build on Paper

a58c723

kligarski marked this pull request as ready for review October 13, 2025 09:10

kligarski requested review from kkafar, kmichalikk and t0maboro October 13, 2025 09:11

t0maboro reviewed Oct 13, 2025

View reviewed changes

		@@ -0,0 +1,18 @@
		#include "RNSBottomTabsAccessoryShadowNode.h"

		#include <yoga/Yoga.h>

Uh oh!

feat(iOS, Tabs): add bottomAccessory support #3288

Are you sure you want to change the base?

feat(iOS, Tabs): add bottomAccessory support #3288

Uh oh!

Conversation

kligarski commented Oct 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Synchronization with ShadowTree

Legacy architecture & New architecture prior to [email protected]

[email protected] and higher

Text

Borders

Images

Mounting/unmounting views during transition

Changes

Test code and steps to reproduce

Checklist

Uh oh!

t0maboro left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t0maboro left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t0maboro Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kligarski commented Oct 7, 2025 •

edited

Loading

Legacy architecture & New architecture prior to `[email protected]`

`[email protected]` and higher

t0maboro Oct 13, 2025 •

edited

Loading