feat(iOS, Tabs): add bottomAccessory support

[kligarski]

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:
  • https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
  • https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
  • https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
  • https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
• Ensured that CI passes

[t0maboro]

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

[t0maboro]

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

[t0maboro]

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

[kligarski]

Decided to remove flex as it is not needed. We want to enforce position: absolute because that's how we're synchronizing the native position of the bottom accessory with Yoga/JS.

5f83151

[t0maboro]

ok, but still I think that user-defined styles should be put last

[aledebla03]

Is there any ETA? Looks fantastic 🔥

[kligarski]

I'm glad you like it. Recently I had to switch my focus to investigate some higher priority issues related to iOS 26 support. Once I finish, I'll come back to bottom accessory.

[kkafar]

Thank you for very nice PR description. It's really helpful during review process. Keep it up!

Here I address the problems mentioned in PR description. I'll do a follow-up review regarding the code.

---

The "text" behaviour you describe is fine. Having it at the beginning / end is not that much of a difference. Text animations are expensive, probably one of the reasons this is done this way in UIKit + the accessory view *does not seem like a place for pages of text.

---

The "borders problem" is the same we have with sync updates in split view. @t0maboro already created ticket for this. We should start conversation with react-native team how we should approach this problem.

---

The "images" problem is interesting. It would be worth to investigate it a bit, initially in direction: who is responsible for image frame change. Is that Yoga or platform framework? Who interpolates it?

---

The "Mounting/unmounting views during transition" problem

Yeah, it looks ugly. But it should not be like that. At least since 0.82. There are mechanisms in RN to emit sync events to JS now. Take a look here for usage examples. We should try that out. We can schedule a call here. Using this we should be able to trigger sync react render & have it hopefully nicely animated.

[kkafar]

This PR looks really good overall. Great job. Few comments here and there.