From 5118272227222c837f576ca8b6b3638b68805827 Mon Sep 17 00:00:00 2001
From: Alex Hunt <hello@alexhunt.dev>
Date: Tue, 20 Oct 2026 17:59:11 +0100
Subject: [PATCH] docs: Add getVerticalBarEdgeIOS and useVerticalBarEdgeIOS for
 iPhone Duo

Document the vertical bar APIs proposed in react/react-native#59237, which report the edge where iPhone Duo places the status bar.

**Changes**

- Add `StatusBar.getVerticalBarEdgeIOS()` and the `StatusBarVerticalBarEdgeIOS` type to the StatusBar reference.
- Add a `useVerticalBarEdgeIOS` hook page, listed under Hooks.
- Note on `hidden` and `setHidden()` that they have no effect on iPhone Duo.

NOTE: Merge after react/react-native#59237 lands.
---
 docs/statusbar.md             | 31 +++++++++++++++++++++++++++--
 docs/useverticalbaredgeios.md | 37 +++++++++++++++++++++++++++++++++++
 website/sidebars.ts           |  6 +++++-
 3 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 docs/useverticalbaredgeios.md

diff --git a/docs/statusbar.md b/docs/statusbar.md
index b0fead82c11..8828d8ad10b 100644
--- a/docs/statusbar.md
+++ b/docs/statusbar.md
@@ -273,7 +273,7 @@ On Android, this will only have an impact on API versions 23 and above.
 
 ### `hidden`
 
-If the status bar is hidden.
+If the status bar is hidden. Has no effect on iPhone Duo, where the status bar is in a vertical bar.
 
 | Type    | Required | Default |
 | ------- | -------- | ------- |
@@ -291,6 +291,16 @@ The transition effect when showing and hiding the status bar using the `hidden`
 
 ## Methods
 
+### `getVerticalBarEdgeIOS()` <div className="label ios">iOS</div>
+
+```tsx
+static getVerticalBarEdgeIOS(): StatusBarVerticalBarEdgeIOS | null;
+```
+
+Get the edge where the system places the vertical bar that holds the status bar beside the content, such as the side rail on iPhone Duo. Returns `null` when the system places no vertical bar, such as on other devices, in orientations that keep the status bar at the top, or before iOS 27.1. To update when the edge changes, use the [`useVerticalBarEdgeIOS`](useverticalbaredgeios) hook.
+
+---
+
 ### `popStackEntry()`
 
 ```tsx
@@ -366,7 +376,7 @@ Set the status bar style.
 static setHidden(hidden: boolean, animation?: StatusBarAnimation);
 ```
 
-Show or hide the status bar.
+Show or hide the status bar. Has no effect on iPhone Duo, where the status bar is in a vertical bar.
 
 **Parameters:**
 
@@ -413,3 +423,20 @@ Status bar style type.
 | `'auto'`          | string | Automatically picks `light-content` or `dark-content` based on the current color scheme. Updates whenever the color scheme changes. |
 | `'light-content'` | string | White texts and icons                                                                                                               |
 | `'dark-content'`  | string | Dark texts and icons (requires API>=23 on Android)                                                                                  |
+
+---
+
+### StatusBarVerticalBarEdgeIOS
+
+The edge where the system places the vertical bar that holds the status bar, such as the side rail on iPhone Duo.
+
+| Type |
+| ---- |
+| enum |
+
+**Constants:**
+
+| Value        | Type   | Description                               |
+| ------------ | ------ | ----------------------------------------- |
+| `'leading'`  | string | The vertical bar is on the leading edge.  |
+| `'trailing'` | string | The vertical bar is on the trailing edge. |
diff --git a/docs/useverticalbaredgeios.md b/docs/useverticalbaredgeios.md
new file mode 100644
index 00000000000..12901dc6b7e
--- /dev/null
+++ b/docs/useverticalbaredgeios.md
@@ -0,0 +1,37 @@
+---
+id: useverticalbaredgeios
+title: useVerticalBarEdgeIOS
+---
+
+```tsx
+import {useVerticalBarEdgeIOS} from 'react-native';
+```
+
+The `useVerticalBarEdgeIOS` React hook returns the edge where iOS places the vertical bar that holds the status bar beside your content, such as the side rail on iPhone Duo, and updates when it changes, for example when the device rotates or unfolds. Use it to keep custom headers and controls clear of the vertical bar.
+
+### Return values
+
+- `'leading'`: The vertical bar is on the leading edge.
+- `'trailing'`: The vertical bar is on the trailing edge.
+- `null`: The system places no vertical bar, such as on other devices, in orientations that keep the status bar at the top, before iOS 27.1, or on other platforms.
+
+To read the edge once without subscribing, use [`StatusBar.getVerticalBarEdgeIOS()`](statusbar#getverticalbaredgeios).
+
+---
+
+## Example
+
+```tsx
+import {Text, View, useVerticalBarEdgeIOS} from 'react-native';
+
+const App = () => {
+  const verticalBarEdge = useVerticalBarEdgeIOS();
+  return (
+    <View>
+      <Text>Vertical bar edge: {verticalBarEdge ?? 'none'}</Text>
+    </View>
+  );
+};
+
+export default App;
+```
diff --git a/website/sidebars.ts b/website/sidebars.ts
index 6f2abf7d498..084e4b214a3 100644
--- a/website/sidebars.ts
+++ b/website/sidebars.ts
@@ -274,7 +274,11 @@ export default {
         type: 'category',
         label: 'Hooks',
         collapsed: false,
-        items: ['usecolorscheme', 'usewindowdimensions'],
+        items: [
+          'usecolorscheme',
+          'useverticalbaredgeios',
+          'usewindowdimensions',
+        ],
       },
       {
         type: 'category',