Conversation
Contributor
There was a problem hiding this comment.
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
directionprop onSplitHostand wires it to the nativelayoutDirectiontrait override. - Implements iOS handling using
traitOverrides.layoutDirectionon iOS 17+ and parentsetOverrideTraitCollectionpropagation 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}> |
Co-authored-by: Copilot Autofix powered by AI <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR introduces
RTLsupport toSplitHost.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.mdThere 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
traitOverridesAPI on the view controller.Closes https://github.com/issues/assigned?issue=software-mansion%7Creact-native-screens-labs%7C1027
Changes
directionprop toSplitHostlayoutDirectionon iOS sidetest-split-direction.tsxAfter - visual documentation
iOS.Below.17.RTL.mov
iOS17.RTL.mov
inheritoption also works properly for locations withRTLdirection as a default:default.RTL.location.mov
Test plan
Run
test-split-direction.Checklist