feat(iOS): implement bottom accessory view #446

johankasperi · 2025-10-14T10:19:10Z

PR Description

Adds support for https://developer.apple.com/documentation/uikit/uitabbarcontroller/bottomaccessory by implementing this prop:

renderBottomAccessory={(props: { placement: "none" | "inline" | "expanded" }) => React.ReactElement}

How to test?

Use the new example in the example app named "Bottom Accessory View".

Screenshots

bottom-accessory-view.mov

changeset-bot · 2025-10-14T10:19:14Z

🦋 Changeset detected

Latest commit: d02504c

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

johankasperi · 2025-10-17T08:04:50Z

@okwasniewski any chance you could take a look on this? Thank you!

Copilot

Pull Request Overview

Adds iOS bottom accessory view support by exposing a renderBottomAccessoryView prop and wiring it to a new native component and SwiftUI integration.

Introduces renderBottomAccessoryView prop to render a bottom accessory view on iOS.
Adds a new native component (BottomAccessoryView) and iOS component view (RCTBottomAccessoryComponentView) with SwiftUI modifier to attach as TabView bottom accessory.
Updates docs and example app to demonstrate usage.

Reviewed Changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/react-native-bottom-tabs/src/TabView.tsx	Exposes renderBottomAccessoryView prop and conditionally renders BottomAccessoryView on iOS.
packages/react-native-bottom-tabs/src/BottomAccessoryViewNativeComponent.ts	Declares the native component interface via codegen.
packages/react-native-bottom-tabs/src/BottomAccessoryView.tsx	Wraps the native component, tracks layout and placement, and renders user content.
packages/react-native-bottom-tabs/package.json	Registers BottomAccessoryView iOS component provider.
packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift	Integrates SwiftUI tabViewBottomAccessory and emits placement changes.
packages/react-native-bottom-tabs/ios/RCTBottomAccessoryComponentView.mm	Implements the Fabric view and event emission for layout and placement.
packages/react-native-bottom-tabs/ios/RCTBottomAccessoryComponentView.h	Declares the Fabric view interface.
docs/docs/docs/guides/usage-with-react-navigation.mdx	Documents the new renderBottomAccessoryView prop.
docs/docs/docs/guides/standalone-usage.md	Documents the new renderBottomAccessoryView prop.
apps/example/src/Examples/BottomAccessoryView.tsx	Example demonstrating bottom accessory usage.
apps/example/src/App.tsx	Adds the new example to the example app menu.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-18T10:36:34Z

packages/react-native-bottom-tabs/src/TabView.tsx

+  /**
+   * A function that returns a React element to display as bottom accessory view.
+   * iOS 26+ only.
+   *
+   * @platform ios
+   */
+  renderBottomAccessoryView?: BottomAccessoryViewProps['renderBottomAccessoryView'];


The docstring states 'iOS 26+ only', which doesn't exist. Update to the actual minimum supported version (e.g., 'iOS 18+ only') to match platform availability.

packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift

docs/docs/docs/guides/usage-with-react-navigation.mdx

docs/docs/docs/guides/standalone-usage.md

okwasniewski

Thank you for contributing this! This is awesome 🚀

I've tested it and it works great, just few small comments

docs/docs/docs/guides/usage-with-react-navigation.mdx

packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift

okwasniewski · 2025-10-18T10:42:29Z

packages/react-native-bottom-tabs/src/TabView.tsx

          );
        })}
+        {Platform.OS === 'ios' &&
+        parseFloat(Platform.Version) >= 26 &&


Do we need this version check? I guess it might not be enough anyways as an app can run on iOS 26 compiled with old Xcode or with a flag that's opting out of new design.

We should probably render it anyways and handle it on the native side

I thought it would be better not to render the view on the JS side at all on <iOS26 and Android because it wont be visible at all on those platforms?

packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift

okwasniewski · 2025-10-18T10:46:44Z

packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift

+      var placementValue = "none"
+      if (tabViewBottomAccessoryPlacement == .inline) {
+        placementValue = "inline"
+      } else if (tabViewBottomAccessoryPlacement == .expanded) {


Suggested change

} else if (tabViewBottomAccessoryPlacement == .expanded) {

} else if tabViewBottomAccessoryPlacement == .expanded {

okwasniewski · 2025-10-18T10:47:53Z

packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift

+    let selectorString = "emitOnPlacementChanged:"
+    let selector = NSSelectorFromString(selectorString)


I think this could be solved by a shared protocol between RCTBottomAccessoryView and NewTabView this way we would have type safety

Sure! I will do that asap

The commit above introduced a bug making it impossible to press pressable items in the accessory view. So I need to look into that. Do you know what could have caused this?

It is adding the BottomAccessoryProvider as contentView to RCTBottomAccessoryComponentView that causes this

Solved it in 8dfd717

johankasperi · 2025-10-20T08:25:51Z

Thank you for contributing this! This is awesome 🚀

I've tested it and it works great, just few small comments

Glad you liked it and thanks for the review! Responded to some of your comments and will commit fixes to the others asap

johankasperi · 2025-10-20T16:58:47Z

@okwasniewski I think I've made all the changes you requested or responded to your comments. Would be awesome if you could have a look and review it again. Thank you!

okwasniewski · 2025-10-23T13:25:58Z

@johankasperi Thanks for applying my review comments. My biggest concern now is the asynchronous nature of how we emit size events. For views that get sized once I think it's fine to do it but this one gets frequently resized. I think we would need to use shadow nodes for this and update the state using the newly introduced flag (https://github.com/facebook/react-native/blob/b8463053d4cac0c36d6bd54359280be827250aed/packages/react-native/ReactCommon/react/renderer/core/EventQueue.h#L32-L37).

Maybe we can land it as unstable (or just don't mention it in docs) for now and improve it before making it a public API.

johankasperi · 2025-10-23T13:29:36Z

@johankasperi Thanks for applying my review comments. My biggest concern now is the asynchronous nature of how we emit size events. For views that get sized once I think it's fine to do it but this one gets frequently resized. I think we would need to use shadow nodes for this and update the state using the newly introduced flag (https://github.com/facebook/react-native/blob/b8463053d4cac0c36d6bd54359280be827250aed/packages/react-native/ReactCommon/react/renderer/core/EventQueue.h#L32-L37).

Maybe we can land it as unstable (or just don't mention it in docs) for now and improve it before making it a public API.

Ok! I see what you mean but unfortunately I'm not that familiar with this flag or building shadow nodes, could you assist me with that? Feel free to commit to this PR or as you say we could improve it in future PRs

okwasniewski · 2025-10-24T07:34:42Z

docs/docs/docs/guides/standalone-usage.md


 - Type: `ColorValue`

+#### `renderBottomAccessoryView` <Badge text="iOS" type="info" />


Let's add <Badge text="experimental" type="danger"/> here

okwasniewski · 2025-10-24T07:35:01Z

docs/docs/docs/guides/usage-with-react-navigation.mdx

  );
 }
 ```
+#### `renderBottomAccessoryView` <Badge text="iOS" type="info" />


Same here let's add here

okwasniewski · 2025-10-24T07:37:46Z

packages/react-native-bottom-tabs/ios/RCTBottomAccessoryComponentView.mm

+    eventEmitter->onNativeLayout(BottomAccessoryViewEventEmitter::OnNativeLayout {
+      .height = frame.size.height,
+      .width = frame.size.width
+    });


Let's add a TODO here, TODO: Rewrite this to emit synchronous layout events using shadow nodes

okwasniewski · 2025-10-24T07:37:55Z

packages/react-native-bottom-tabs/ios/RCTBottomAccessoryComponentView.mm

+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  [super updateProps:props oldProps:oldProps];
+}


This is not necessary.

okwasniewski · 2025-10-24T07:38:43Z

Alright, let's land it as experimental - I'll work on the shadow node part

johankasperi · 2025-10-24T08:32:02Z

Alright, let's land it as experimental - I'll work on the shadow node part

Thanks for the review! I've made the changes requested. And thank you for looking into refactor to a shadow node

okwasniewski

Thanks for working on it! 🙏

johankasperi · 2025-10-24T13:08:21Z

Thanks for working on it! 🙏

Thank you for the review and support!

johankasperi added 11 commits October 13, 2025 15:19

create RCTBottomAccessoryComponentView

98bdead

create BottomAccessoryRepresentableView

4fecda5

emitOnPlacementChanged

22d4208

remove some comments

e56a051

create BottomAccessoryView and proper prop types

70a51df

create example

9478d1b

add dimensions

20ade50

hide header in example

cde474b

add docs

787aaeb

cleanup example

abb4666

lint

7cbed96

okwasniewski requested a review from Copilot October 18, 2025 10:33

Copilot AI reviewed Oct 18, 2025

View reviewed changes

okwasniewski requested changes Oct 18, 2025

View reviewed changes

johankasperi added 2 commits October 20, 2025 17:01

swiftlint

9d44ef6

syntax change

078939b

This comment was marked as outdated.

Sign in to view

johankasperi added 2 commits October 20, 2025 17:35

add a wrapper view in BottomAccessoryRepresentableView

28af2bc

refactor to a BottomAccessoryProvider

e6d79df

johankasperi requested a review from okwasniewski October 20, 2025 16:58

johankasperi added 4 commits October 20, 2025 18:59

swiftlint

764153c

Merge branch 'main' into tab-accessory-view

cb6e515

make BottomAccessoryProvider to a NSObject and have it as prop

8dfd717

props observedobject in ConditionalBottomAccessoryModifier

6107658

This comment was marked as outdated.

Sign in to view

always render bottomaccessoryview

11aabc6

okwasniewski reviewed Oct 24, 2025

View reviewed changes

chore: add changes

40b59bc

This comment was marked as outdated.

Sign in to view

Merge branch 'main' into tab-accessory-view

0e9d7a3

This comment was marked as outdated.

Sign in to view

chore: changes after latest review

d02504c

okwasniewski approved these changes Oct 24, 2025

View reviewed changes

okwasniewski merged commit e419b58 into callstackincubator:main Oct 24, 2025
6 checks passed

	} else if (tabViewBottomAccessoryPlacement == .expanded) {
	} else if tabViewBottomAccessoryPlacement == .expanded {

		let selectorString = "emitOnPlacementChanged:"
		let selector = NSSelectorFromString(selectorString)


		- Type: `ColorValue`

		#### `renderBottomAccessoryView` <Badge text="iOS" type="info" />

Uh oh!

feat(iOS): implement bottom accessory view #446

feat(iOS): implement bottom accessory view #446

Uh oh!

Conversation

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

Uh oh!

PR Description

How to test?

Screenshots

Uh oh!

changeset-bot bot commented Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

okwasniewski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

johankasperi Oct 20, 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!

Uh oh!

Uh oh!

Uh oh!

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!

johankasperi commented Oct 20, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

johankasperi commented Oct 20, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

okwasniewski commented Oct 23, 2025

Uh oh!

johankasperi commented Oct 23, 2025

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!

johankasperi commented Oct 14, 2025 •

edited

Loading

changeset-bot bot commented Oct 14, 2025 •

edited

Loading

johankasperi commented Oct 17, 2025 •

edited

Loading

johankasperi Oct 20, 2025 •

edited

Loading

johankasperi commented Oct 24, 2025 •

edited

Loading