Skip to content

feat(Split): add RTL support#3958

Open
sgaczol wants to merge 5 commits intomainfrom
@sgaczol/split-rtl
Open

feat(Split): add RTL support#3958
sgaczol wants to merge 5 commits intomainfrom
@sgaczol/split-rtl

Conversation

@sgaczol
Copy link
Copy Markdown
Collaborator

@sgaczol sgaczol commented Apr 30, 2026

Description

This PR introduces RTL support to SplitHost.

The approach differs on iOS versions prior to iOS 17 and newer ones.

On < iOS 17 versions, we use setOverrideTraitCollection(_: forChild:) on the parent view controller to propagate the layout direction, accordingly to https://github.com/software-mansion/react-native-screens-labs/blob/main-issue-tracker/rfcs/0996-rtl-and-dark-mode.md

There is a specific edge case on those iOS versions: if the layout direction is changed while a column is currently open/visible, the UI becomes inconsistent. The sidebar remains on its original side, while the display mode button moves to the new side. The layout only synchronizes correctly after the column is closed and reopened. I checked this issue and it's a native bug: https://github.com/software-mansion/react-native-screens-labs/issues/1237

On ≥ iOS 17 versions, we use traitOverrides API on the view controller.

Closes https://github.com/issues/assigned?issue=software-mansion%7Creact-native-screens-labs%7C1027

Changes

  • add direction prop to SplitHost
  • handle layoutDirection on iOS side
  • add test-split-direction.tsx

After - visual documentation

< iOS 17 ≥ iOS 17
iOS.Below.17.RTL.mov
iOS17.RTL.mov

inherit option also works properly for locations with RTL direction as a default:

default.RTL.location.mov

Test plan

Run test-split-direction.

Checklist

  • Included code example that can be used to test this change.
  • For visual changes, included screenshots / GIFs / recordings documenting the change.
  • For API changes, updated relevant public types.
  • Ensured that CI passes

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Adds RTL/LTR layout direction control to the experimental SplitHost API, with iOS-version-specific native implementations to ensure correct trait propagation across the split view controller hierarchy.

Changes:

  • Introduces a new direction prop on SplitHost and wires it to the native layoutDirection trait override.
  • Implements iOS handling using traitOverrides.layoutDirection on iOS 17+ and parent setOverrideTraitCollection propagation below iOS 17 (with a pending-update path until the controller is parented).
  • Adds a new single-feature test scenario for exercising direction changes.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/fabric/gamma/split/SplitHostNativeComponent.ts Adds layoutDirection native prop (codegen) and layout direction enum.
src/components/gamma/split/index.ts Re-exports new SplitHostDirection type.
src/components/gamma/split/SplitHost.types.ts Adds SplitHostDirection type and documents new direction prop.
src/components/gamma/split/SplitHost.tsx Passes JS direction through to native layoutDirection.
ios/gamma/split/RNSSplitHostController.swift Adds below-iOS17 layout direction update signaling and pending application once parented.
ios/gamma/split/RNSSplitHostComponentView.mm Tracks prop changes and applies layout direction via iOS17 trait overrides or below-iOS17 update path.
ios/gamma/split/RNSSplitHostComponentView.h Exposes layoutDirection for Swift-side applicator access.
ios/gamma/split/RNSSplitAppearanceUpdateFlags.swift Adds an appearance update flag for below-iOS17 direction updates.
ios/gamma/split/RNSSplitAppearanceApplicator.swift Applies below-iOS17 trait override update via parent controller.
ios/conversion/RNSConversions.h Declares conversion helper for SplitHost layout direction enum.
ios/conversion/RNSConversions-SplitView.mm Implements conversion to UITraitEnvironmentLayoutDirection.
apps/src/tests/single-feature-tests/split/test-split-direction.tsx Adds a manual scenario to toggle direction at runtime.
apps/src/tests/single-feature-tests/split/index.ts Registers the new split direction scenario.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 101 to 105
// This enables us to fully recreate the Split when necessary, ensuring the correct column configuration is always applied.
key={`columns-${columns.length}-inspectors-${inspectors.length}`}
{...props}
layoutDirection={direction}
style={styles.container}>
Comment thread apps/src/tests/single-feature-tests/split/test-split-direction.tsx Outdated
sgaczol and others added 2 commits April 30, 2026 15:29
Co-authored-by: Copilot Autofix powered by AI <[email protected]>
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