Skip to content

Add StatusBar.getVerticalBarEdgeIOS and useVerticalBarEdgeIOS for iPhone Duo - #59237

Open
huntie wants to merge 1 commit into
mainfrom
pr59237
Open

huntie wants to merge 1 commit into
mainfrom
pr59237

Conversation

@huntie

@huntie huntie commented Oct 20, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

On iPhone Duo, iOS places the status bar in a vertical bar beside the content instead of along the top. This adds StatusBar.getVerticalBarEdgeIOS() and a useVerticalBarEdgeIOS() hook, backed by iOS 27.1's UITraitCollection.verticalBarEdge. Both return 'leading', 'trailing', or null when the system places no vertical bar.

  • StatusBarManager gains an optional synchronous getVerticalBarEdge that reads the key window's traits on the main queue, and a verticalBarEdgeDidChange event from trait change registration.
  • The native code is guarded by __IPHONE_OS_VERSION_MAX_ALLOWED for older SDKs and by available at runtime.
  • The hook caches the edge and refreshes it on subscribe and on each event, so renders don't each call into native.
  • Document that hidden and StatusBar.setHidden() have no effect on iPhone Duo.

On other platforms, both return null. Expo ships the same API in expo-status-bar (expo/expo#51927), and will defer to this one when available.

Use case

This allows JS code in apps to understand and progressively enhance for iPhone Duo (e.g. custom side rail toolbars), without explicitly doing a device name check.

Changelog:
[iOS][Added] - StatusBar.getVerticalBarEdgeIOS() and useVerticalBarEdgeIOS() (vertical bar on iPhone Duo)

Test Plan

  • yarn jest packages/react-native/Libraries/Components/StatusBar: all tests pass, including a new one for the hook
  • yarn flow-check: 0 errors
  • ESLint on the changed files: passes
  • yarn build-types --validate: API snapshot up to date
  • yarn test-generated-typescript: passes
  • yarn format-check-javascript and yarn format-check-cpp: pass for the changed files
  • RNTester builds for the iOS simulator: xcodebuild -workspace RNTesterPods.xcworkspace -scheme RNTester -sdk iphonesimulator, using Xcode 27.1
  • python -m scripts.cxx-api.parser with Doxygen 1.16.1, matching CI: the four ReactApple snapshots gain getVerticalBarEdge. The ReactAndroid views fail locally with Doxygen's Identifier basic_appender already exists error in fmt's headers, which this change doesn't touch.

On the iPhone Duo simulator (iOS 27.1), RNTester's StatusBar → "StatusBar vertical bar edge" example reads trailing on the folded display. With RNTester still running, I unfolded the Duo and moved RNTester to the left pane in Split View, and the example updated to leading through the change event.

iPhone Duo, folded iPhone Duo, open, left pane

Not run: an iPhone without a vertical bar, where the example should read none.

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Oct 20, 2026
@github-actions

Copy link
Copy Markdown

Warning

JavaScript API change detected

This PR commits an update to ReactNativeApi.d.ts, indicating a change to React Native's public JavaScript API.

  • Please include a clear changelog message.
  • This change will be subject to additional review.

This change was flagged as: POTENTIALLY_BREAKING

@huntie
huntie marked this pull request as ready for review October 20, 2026 17:07
@facebook-github-tools facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Oct 20, 2026

This branch has not been deployed

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

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant