fix(ios): make horizontal bars configurable for Duo sheets

android/src/main/java/com/swmansion/rnscreens/legacy/ScreenViewManager.kt

@@ -328,6 +328,11 @@ open class ScreenViewManager :
         value: Boolean,
     ) = Unit
 
+    override fun setSheetPrefersHorizontalBars(
+        view: Screen?,
+        value: Boolean,
+    ) = Unit
+
     // END mark: iOS-only
 
     override fun setAndroidResetScreenShadowStateOnOrientationChangeEnabled(

android/src/main/java/com/swmansion/rnscreens/react/modals/formsheet/host/FormSheetHostViewManager.kt

@@ -91,6 +91,11 @@ class FormSheetHostViewManager :
         view.prefersGrabberVisible = value
     }
 
+    override fun setPrefersHorizontalBars(
+        view: FormSheetHost,
+        value: Boolean,
+    ) = Unit // iOS-only bar placement preference.
+
     override fun setPreferredCornerRadius(
         view: FormSheetHost,
         value: Float,

ios/legacy/RNSScreen.h

@@ -117,6 +117,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) NSArray<NSNumber *> *sheetAllowedDetents;
 @property (nonatomic) NSNumber *sheetLargestUndimmedDetent;
 @property (nonatomic) BOOL sheetGrabberVisible;
+@property (nonatomic) BOOL sheetPrefersHorizontalBars;
 @property (nonatomic) CGFloat sheetCornerRadius;
 @property (nonatomic) NSInteger sheetInitialDetent;
 @property (nonatomic) BOOL sheetExpandsWhenScrolledToEdge;

ios/legacy/RNSScreen.mm

@@ -100,6 +100,7 @@ - (void)initCommonProps
   _shouldUpdateScrollEdgeEffects = NO;
 #if !TARGET_OS_TV
   _sheetExpandsWhenScrolledToEdge = YES;
+  _sheetPrefersHorizontalBars = NO;
 #endif // !TARGET_OS_TV
   _sheetsScrollView = nil;
   _sheetsScrollViewTag = 0;
@@ -1313,6 +1314,14 @@ - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::
   }
 
   [self setSheetGrabberVisible:newScreenProps.sheetGrabberVisible];
+  if (_sheetPrefersHorizontalBars != newScreenProps.sheetPrefersHorizontalBars) {
+    _sheetPrefersHorizontalBars = newScreenProps.sheetPrefersHorizontalBars;
+#if RNS_IPHONE_OS_VERSION_AVAILABLE(27_1) && !TARGET_OS_VISION
+    if (@available(iOS 27.1, *)) {
+      [_controller setNeedsUpdateOfVerticalBarConfiguration];
+    }
+#endif
+  }
   [self setSheetCornerRadius:newScreenProps.sheetCornerRadius];
   [self setSheetExpandsWhenScrolledToEdge:newScreenProps.sheetExpandsWhenScrolledToEdge];
 
@@ -1450,6 +1459,23 @@ @implementation RNSScreen {
 
 #pragma mark - Common
 
+#if RNS_IPHONE_OS_VERSION_AVAILABLE(27_1) && !TARGET_OS_TV && !TARGET_OS_VISION
+- (UIVerticalBarBehavior)preferredVerticalBarBehavior API_AVAILABLE(ios(27.1))
+{
+  if (!self.screenView.sheetPrefersHorizontalBars) {
+    return [super preferredVerticalBarBehavior];
+  }
+  switch (self.screenView.stackPresentation) {
+    case RNSScreenStackPresentationModal:
+    case RNSScreenStackPresentationPageSheet:
+    case RNSScreenStackPresentationFormSheet:
+      return UIVerticalBarBehaviorDisabled;
+    default:
+      return [super preferredVerticalBarBehavior];
+  }
+}
+#endif
+
 - (instancetype)initWithView:(UIView *)view
 {
   if (self = [super init]) {

ios/modals/form-sheet/RNSFormSheetContentController.mm

@@ -5,6 +5,7 @@
 #import "RNSFormSheetUpdateCoordinator.h"
 #import "RNSFormSheetUpdateFlags.h"
 #import "RNSPresentationSourceProvider.h"
+#import "RNSDefines.h"
 
 #import <React/RCTAssert.h>
 #import <React/RCTLog.h>
@@ -43,6 +44,16 @@ - (RNSFormSheetContentView *)contentView
   return static_cast<RNSFormSheetContentView *>(self.view);
 }
 
+#if RNS_IPHONE_OS_VERSION_AVAILABLE(27_1) && !TARGET_OS_TV && !TARGET_OS_VISION
+- (UIVerticalBarBehavior)preferredVerticalBarBehavior API_AVAILABLE(ios(27.1))
+{
+  if (self.appearanceProvider.prefersHorizontalBars) {
+    return UIVerticalBarBehaviorDisabled;
+  }
+  return [super preferredVerticalBarBehavior];
+}
+#endif
+
 #pragma mark - UIKit callbacks
 
 - (void)loadView

ios/modals/form-sheet/RNSFormSheetHostComponentView.h

@@ -22,6 +22,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 @property (nonatomic, readonly) BOOL isOpen;
 @property (nonatomic, readonly) BOOL prefersGrabberVisible;
+@property (nonatomic, readonly) BOOL prefersHorizontalBars;
 @property (nonatomic, readonly) CGFloat preferredCornerRadius;
 @property (nonatomic, readonly) NSInteger largestUndimmedDetentIndex;
 @property (nonatomic, readonly) NSInteger initialDetentIndex;

ios/modals/form-sheet/RNSFormSheetHostComponentView.mm

@@ -1,4 +1,5 @@
 #import "RNSFormSheetHostComponentView.h"
+#import "RNSDefines.h"
 #import "RNSFormSheetContentController.h"
 #import "RNSFormSheetContentView.h"
 #import "RNSFormSheetContentWrapperComponentView.h"
@@ -36,6 +37,7 @@ @implementation RNSFormSheetHostComponentView {
   BOOL _isOpen;
   std::vector<double> _detents;
   BOOL _prefersGrabberVisible;
+  BOOL _prefersHorizontalBars;
   CGFloat _preferredCornerRadius;
   NSInteger _largestUndimmedDetentIndex;
   NSInteger _initialDetentIndex;
@@ -71,6 +73,7 @@ - (void)resetProps
   _isOpen = NO;
   _detents = {};
   _prefersGrabberVisible = NO;
+  _prefersHorizontalBars = NO;
   _preferredCornerRadius = -1.0;
   _largestUndimmedDetentIndex = kRNSFormSheetAlwaysDimmed;
   _initialDetentIndex = 0;
@@ -274,6 +277,15 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
     [_controller setNeedsAppearanceUpdate];
   }
 
+  if (oldComponentProps.prefersHorizontalBars != newComponentProps.prefersHorizontalBars) {
+    _prefersHorizontalBars = newComponentProps.prefersHorizontalBars;
+#if RNS_IPHONE_OS_VERSION_AVAILABLE(27_1) && !TARGET_OS_TV && !TARGET_OS_VISION
+    if (@available(iOS 27.1, *)) {
+      [_controller setNeedsUpdateOfVerticalBarConfiguration];
+    }
+#endif
+  }
+
   if (oldComponentProps.preferredCornerRadius != newComponentProps.preferredCornerRadius) {
     _preferredCornerRadius = newComponentProps.preferredCornerRadius;
     [_controller setNeedsAppearanceUpdate];

ios/modals/form-sheet/RNSFormSheetProviders.h

@@ -18,6 +18,7 @@ NS_ASSUME_NONNULL_BEGIN
 @protocol RNSFormSheetAppearanceProvider <NSObject>
 
 - (BOOL)prefersGrabberVisible;
+- (BOOL)prefersHorizontalBars;
 - (CGFloat)preferredCornerRadius;
 - (NSInteger)largestUndimmedDetentIndex;
 - (nullable UIColor *)nativeContainerBackgroundColor;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "5.0.0-t3.27",
+  "version": "5.0.0-t3.29",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "submodules": "git submodule update --init --recursive && (cd react-navigation && yarn && yarn build && cd ../)",

src/components/modals/form-sheet/FormSheet.types.ts

@@ -63,6 +63,16 @@ export interface FormSheetProps {
    */
   prefersGrabberVisible?: boolean | undefined;
 
+  /**
+   * Requests horizontal bars instead of the vertical bar on iPhone Duo.
+   * Leave unset to let UIKit place native controls in the vertical bar.
+   *
+   * @default false
+   * @platform ios
+   * @supported iOS 27.1 or higher
+   */
+  prefersHorizontalBars?: boolean | undefined;
+
   /**
    * @summary The corner radius that the sheet will attempt to present with.
    *

src/fabric/legacy/ModalScreenNativeComponent.ts

@@ -92,6 +92,7 @@ export interface NativeProps extends ViewProps {
   sheetAllowedDetents?: number[] | undefined;
   sheetLargestUndimmedDetent?: CT.WithDefault<CT.Int32, -1>;
   sheetGrabberVisible?: CT.WithDefault<boolean, false>;
+  sheetPrefersHorizontalBars?: CT.WithDefault<boolean, false>;
   sheetCornerRadius?: CT.WithDefault<CT.Float, -1.0>;
   sheetExpandsWhenScrolledToEdge?: CT.WithDefault<boolean, false>;
   sheetInitialDetent?: CT.WithDefault<CT.Int32, 0>;

src/fabric/legacy/ScreenNativeComponent.ts

@@ -92,6 +92,7 @@ export interface NativeProps extends ViewProps {
   sheetAllowedDetents?: number[] | undefined;
   sheetLargestUndimmedDetent?: CT.WithDefault<CT.Int32, -1>;
   sheetGrabberVisible?: CT.WithDefault<boolean, false>;
+  sheetPrefersHorizontalBars?: CT.WithDefault<boolean, false>;
   sheetCornerRadius?: CT.WithDefault<CT.Float, -1.0>;
   sheetExpandsWhenScrolledToEdge?: CT.WithDefault<boolean, false>;
   sheetInitialDetent?: CT.WithDefault<CT.Int32, 0>;

src/fabric/modals/form-sheet/FormSheetHostNativeComponent.ts

@@ -20,6 +20,7 @@ interface NativeProps extends ViewProps {
   isOpen?: CT.WithDefault<boolean, false>;
   detents?: CT.Double[] | undefined;
   prefersGrabberVisible?: CT.WithDefault<boolean, false>;
+  prefersHorizontalBars?: CT.WithDefault<boolean, false>;
   preferredCornerRadius?: CT.WithDefault<CT.Float, -1.0>;
   largestUndimmedDetentIndex?: CT.WithDefault<CT.Int32, -1>;
   initialDetentIndex?: CT.WithDefault<CT.Int32, 0>;

src/legacy/types.ts

@@ -454,6 +454,15 @@ export interface ScreenProps extends ViewProps {
    * @platform ios
    */
   sheetGrabberVisible?: boolean | undefined;
+  /**
+   * Requests horizontal bars instead of the vertical bar for modal, page-sheet,
+   * and form-sheet presentations on iPhone Duo. Defaults to `false`, preserving
+   * UIKit's automatic bar placement.
+   *
+   * @platform ios
+   * @supported iOS 27.1 or higher
+   */
+  sheetPrefersHorizontalBars?: boolean | undefined;
   /**
    * The largest sheet detent for which a view underneath won't be dimmed.
    * Works only when `stackPresentation` is set to `formSheet`.