Skip to content

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

Merged
juliusmarminge merged 2 commits into
pingdotgg:t3/mainfrom
PixPMusic:fix/duo-sheet-bars
Oct 22, 2026
Merged

juliusmarminge merged 2 commits into
pingdotgg:t3/mainfrom
PixPMusic:fix/duo-sheet-bars

Conversation

@PixPMusic

@PixPMusic PixPMusic commented Oct 17, 2026 •

Copy link
Copy Markdown

Description

Plain forms on iPhone Duo can reserve an empty vertical control rail inside the sheet. They need a per-sheet way to request horizontal bars while sheets with native controls retain UIKit's automatic rail placement.

Add prefersHorizontalBars to standalone FormSheet and sheetPrefersHorizontalBars to legacy Screen modal, page-sheet, and form-sheet presentations. Both default to false and defer to UIKit; true returns UIVerticalBarBehaviorDisabled. Notify UIKit when the preference changes and reset it when hosts are reused. The iOS 27.1 SDK/runtime guards exclude tvOS and visionOS. Android accepts the generated props as no-ops.

The version becomes 5.0.0-t3.29 for the companion T3 Code PR, which requests horizontal bars for plain forms and preserves automatic placement for Settings. This branch is based on pingdotgg/react-native-screens:t3/main at 176ff64880ddd0a6122a1f18eda826479c8e73c7.

Before & after - visual documentation

Settings before the per-sheet preference (previous PR revision) and after: same folded Duo, light theme, and sanitized demo connection. The final layout preserves the vertical rail and lets the filter/close buttons move into it.

Previous blanket opt-out Configurable placement
Before: Settings forces its controls into a horizontal header After: Settings controls use the vertical rail

Commit explicitly requesting horizontal bars.

Commit expansion recording. The consumer also uses a full-height expanded detent so the status icons move above the form.

Test plan

  • yarn check-types and scoped Prettier passed. pack:t3 built CommonJS, ESM, and declarations with Node 24 and the pinned Yarn.
  • Generated Android native interfaces successfully; both props default to false and have matching no-op view-manager methods. Android runtime behavior is unchanged.
  • Rebuilt and installed the T3 Code iOS 27.1 dev client. Verified Commit compact/expanded/dismissal and Settings automatic rail placement on the folded 466×678pt Duo.
  • The visual pass exercises legacy navigation sheets. Standalone FormSheet is compiled; iPad and older iOS runtimes were not exercised.

Minimal standalone consumer:

import { useState } from 'react';
import { Button, Text, View } from 'react-native';
import { FormSheet } from 'react-native-screens';

export default function SheetProbe() {
  const [open, setOpen] = useState(false);
  return (
    <View style={{ flex: 1 }}>
      <Button title="Open sheet" onPress={() => setOpen(true)} />
      <FormSheet
        isOpen={open}
        detents={[0.5, 1]}
        prefersGrabberVisible
        prefersHorizontalBars
        onNativeDismiss={() => setOpen(false)}
        nativeContainerStyle={{ backgroundColor: 'white' }}>
        <View style={{ flex: 1, padding: 20 }}>
          <Text>Sheet content uses the available width.</Text>
          <Button title="Done" onPress={() => setOpen(false)} />
        </View>
      </FormSheet>
    </View>
  );
}

Run on the Duo cover display, open, expand, and dismiss. With prefersHorizontalBars, content uses the sheet width and the full detent moves status icons above it. Remove the prop or set it to false before opening to restore UIKit's automatic rail placement.

Model: GPT-6.1 Sol | Harness: Codex in T3 Code

Note

Add prefersHorizontalBars prop for sheets on iPhone Duo

  • Adds new optional props sheetPrefersHorizontalBars (legacy screens) and prefersHorizontalBars (form-sheet) that request horizontal bars for modal, page-sheet, and form-sheet presentations. Defaults to false and works on iOS 27.1 or later.
  • Implements via preferredVerticalBarBehavior overrides in RNSScreen.mm and RNSFormSheetContentController.mm, which disable the vertical bar when the preference is set. Prop updates trigger a UIKit vertical-bar recalculation.
  • Adds no-op Android setters so prop parity is kept across platforms. Updates package version from 5.0.0-t3.27 to 5.0.0-t3.29.
  • Behavioral Change: legacy screens now report disabled vertical bars on iPhone Duo when the new prop is enabled; without it, UIKit automatic behavior is unchanged.

Macroscope summarized f0d4b31.

@coderabbitai

coderabbitai Bot commented Oct 17, 2026 •

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: fe25cfba-0462-42cc-bb76-8fafc82962b3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

@PixPMusic PixPMusic changed the title fix(ios): use horizontal bars in sheets on iPhone Duo fix(ios): make horizontal bars configurable for Duo sheets Oct 17, 2026
@juliusmarminge
juliusmarminge merged commit d669555 into pingdotgg:t3/main Oct 22, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants