Skip to content

feat (iOS): Support UITabBarController.Mode for iPad sidebar feature #3236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

feat (iOS): Support UITabBarController.Mode for iPad sidebar feature #3236

wants to merge 10 commits into from

Conversation

douglowder
Copy link

@douglowder douglowder commented Sep 21, 2025 •
edited
Loading

Description

Add support for UITabBarController.Mode (automatic, normal tab bar, or sidebar on iPad).

See https://developer.apple.com/documentation/uikit/uitabbarcontroller/mode

Changes

  • Upgrade examples to RN 0.81.4
  • Add new bottom tabs prop and iOS support for both Fabric and Paper
  • New type added for bottom tab screen options:
/**
   * @summary Specifies the display mode for the tab bar.
   *
   * Available starting from iOS 18.
   * Not supported on tvOS.
   * 
   * The following values are currently supported:
   *
   * - `automatic` - The system sets the display mode based on the tab’s content
   * - `tabBar` - The system displays the content only as a tab bar
   * - `tabSidebar` - the tab bar is displayed as a sidebar
   *
   * See the official documentation for more details:
   * @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/mode|UITabBarController.Mode}
   *
   * @platform ios
   * @supported iOS 18 or higher
   */
  tabBarControllerMode?: TabBarControllerMode;

Test code and steps to reproduce

Test3115 and the shared BottomTabsContainer have been modified to add support for testing this feature.

Checklist

@douglowder douglowder marked this pull request as ready for review September 22, 2025 09:00
@kkafar kkafar requested review from kligarski and kkafar and removed request for kligarski September 22, 2025 17:24
kligarski
kligarski reviewed Sep 23, 2025
View reviewed changes
Copy link
Contributor

@kligarski kligarski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, I left some minor suggestions.

apps/src/tests/Test3115.tsx
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we want to add TabBarControllerMode to unrelated test screen. Maybe we should create a separate one.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. Would be nice to test it on its own.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm this was the only test screen I found that referenced the bottom tabs in the right way to test this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest we create Test3236 that will be very similar to Test3111 but with controller mode switching logic and simplified tab screen content (without unnecessary counters, etc.). Then we can revert changes to Test3111.

kkafar
kkafar reviewed Sep 23, 2025
View reviewed changes
Copy link
Member

@kkafar kkafar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey! Thank you for the contribution!

Posting initial review here. Native implementation looks fine. We need to get rid of version bumps & lock file updates from this PR.

I haven't tested runtime yet though. Will do shortly & come up with follow up review.

Example/package.json
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes must be reverted.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I reverted the RN version change. Are you ok with the additional scripts for local testing?

FabricExample/ios/Podfile.lock
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes must be reverted.

apps/src/tests/Test3115.tsx
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. Would be nice to test it on its own.

ios/bottom-tabs/RNSBottomTabsHostComponentViewManager.mm
Comment on lines +34 to +37
RCT_REMAP_VIEW_PROPERTY(
tabBarControllerMode,
tabBarControllerModeFromRNSTabBarControllerMode,
RNSTabBarControllerMode);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is necessary. You could most likely get rid of whole RNSTabBarControllerMode enum, simply by adding RCTCovnert implementation for UITabBarControllerMode. This should be possible.

I see now, that we do similar thing above & you followed what's already there. That's fine then. @kligarski would you take a look at what I'm saying later in the week?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, we can probably ignore the prop completely if we are using SDK < 18/26. I added an issue to our internal board: https://github.com/software-mansion/react-native-screens-labs/issues/471 and I'll have a look at it after this PR is merged.

kligarski
kligarski reviewed Sep 24, 2025
View reviewed changes
Copy link
Contributor

@kligarski kligarski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! After creating separate test screen for this PR, I think that we can proceed.

ios/bottom-tabs/RNSBottomTabsHostComponentViewManager.mm
Comment on lines +34 to +37
RCT_REMAP_VIEW_PROPERTY(
tabBarControllerMode,
tabBarControllerModeFromRNSTabBarControllerMode,
RNSTabBarControllerMode);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, we can probably ignore the prop completely if we are using SDK < 18/26. I added an issue to our internal board: https://github.com/software-mansion/react-native-screens-labs/issues/471 and I'll have a look at it after this PR is merged.

apps/src/tests/Test3115.tsx
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest we create Test3236 that will be very similar to Test3111 but with controller mode switching logic and simplified tab screen content (without unnecessary counters, etc.). Then we can revert changes to Test3111.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kkafar kkafar kkafar left review comments

@kligarski kligarski kligarski left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@douglowder @kkafar @kligarski