feat(iOS, SplitView): Add support for preferredSplitBehavior prop (#241)

## Description

Adding a basic setup for props for `SplitViewHost` and a support for the
prop that's telling how columns will appear relatively to each other.

The possible values for this prop are:

- `tile` - the columns appears side-by-side
- `overlay` - the sidebars are partially covering main column
- `displace` - the main column is moved partially offscreen, instead of
overlapping it

## Changes

- Added prop definition to the native component on the JS side
- Added basic logic for props updates in `SplitViewHostComponentView` 
- Added necessary enums and conversions

## Test code and steps to reproduce

New prop was added to the `SplitViewBaseApp`

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

Closes: #224

---------

Co-authored-by: kmichalikk <[email protected]>

Author: 2 people

apps/src/tests/TestSplitView/SplitViewBaseApp.tsx

@@ -23,7 +23,7 @@ const SplitViewBaseApp = () => {
   const [buttonState4, setButtonState4] = React.useState('Initial');
 
   return (
-    <SplitViewHost>
+    <SplitViewHost splitBehavior='tile' primaryEdge='leading'>
       <SplitViewScreen>
         <View style={[styles.container, { backgroundColor: Colors.RedDark100 }]}>
           <TestButton setButtonState={setButtonState} />

ios/RNSEnums.h

@@ -73,6 +73,20 @@ typedef NS_ENUM(NSInteger, RNSSearchBarPlacement) {
   RNSSearchBarPlacementStacked,
 };
 
+#pragma mark - SplitView
+
+typedef NS_ENUM(NSInteger, RNSSplitViewSplitBehavior) {
+  RNSSplitViewSplitBehaviorAutomatic,
+  RNSSplitViewSplitBehaviorDisplace,
+  RNSSplitViewSplitBehaviorOverlay,
+  RNSSplitViewSplitBehaviorTile,
+};
+
+typedef NS_ENUM(NSInteger, RNSSplitViewPrimaryEdge) {
+  RNSSplitViewPrimaryEdgeLeading,
+  RNSSplitViewPrimaryEdgeTrailing
+};
+
 // Redefinition of UIBlurEffectStyle. We need to represent additional case of `None`.
 typedef NS_ENUM(NSInteger, RNSBlurEffectStyle) {
   /// No blur effect should be visible

ios/conversion/RNSConversions-SplitView.mm

@@ -0,0 +1,69 @@
+#import "RNSConversions.h"
+
+namespace rnscreens::conversion {
+
+#pragma mark RN Codegen enum to internal enum conversions
+
+RNSSplitViewSplitBehavior RNSSplitViewSplitBehaviorFromHostProp(
+    facebook::react::RNSSplitViewHostSplitBehavior splitBehavior)
+{
+  using enum facebook::react::RNSSplitViewHostSplitBehavior;
+  
+  switch (splitBehavior) {
+    case Displace:
+      return RNSSplitViewSplitBehaviorDisplace;
+    case Overlay:
+      return RNSSplitViewSplitBehaviorOverlay;
+    case Tile:
+      return RNSSplitViewSplitBehaviorTile;
+    case Automatic:
+    default:
+      return RNSSplitViewSplitBehaviorAutomatic;
+  }
+}
+
+RNSSplitViewPrimaryEdge RNSSplitViewPrimaryEdgeFromHostProp(
+    facebook::react::RNSSplitViewHostPrimaryEdge primaryEdge)
+{
+  using enum facebook::react::RNSSplitViewHostPrimaryEdge;
+  
+  switch (primaryEdge) {
+    case Trailing:
+      return RNSSplitViewPrimaryEdgeTrailing;
+    case Leading:
+    default:
+      return RNSSplitViewPrimaryEdgeLeading;
+  }
+}
+
+#pragma mark Internal enum to UISplitViewController enum conversions
+
+UISplitViewControllerSplitBehavior RNSSplitBehaviorToUISplitViewControllerSplitBehavior(
+    RNSSplitViewSplitBehavior behavior)
+{
+  switch (behavior) {
+    case RNSSplitViewSplitBehaviorDisplace:
+      return UISplitViewControllerSplitBehaviorDisplace;
+    case RNSSplitViewSplitBehaviorOverlay:
+      return UISplitViewControllerSplitBehaviorOverlay;
+    case RNSSplitViewSplitBehaviorTile:
+      return UISplitViewControllerSplitBehaviorTile;
+    case RNSSplitViewSplitBehaviorAutomatic:
+    default:
+      return UISplitViewControllerSplitBehaviorAutomatic;
+  }
+}
+
+UISplitViewControllerPrimaryEdge RNSPrimaryEdgeToUISplitViewControllerPrimaryEdge(
+    RNSSplitViewPrimaryEdge primaryEdge)
+{
+  switch (primaryEdge) {
+    case RNSSplitViewPrimaryEdgeTrailing:
+      return UISplitViewControllerPrimaryEdgeTrailing;
+    case RNSSplitViewPrimaryEdgeLeading:
+    default:
+      return UISplitViewControllerPrimaryEdgeLeading;
+  }
+}
+
+}; // namespace rnscreens::conversion

ios/conversion/RNSConversions.h

@@ -30,6 +30,21 @@ UIOffset RNSBottomTabsScreenTabBarItemTitlePositionAdjustmentStruct(
     react::RNSBottomTabsScreenTabBarItemTitlePositionAdjustmentStruct
         titlePositionAdjustment);
 
+#pragma mark SplitView
+
+RNSSplitViewSplitBehavior RNSSplitViewSplitBehaviorFromHostProp(
+    react::RNSSplitViewHostSplitBehavior);
+
+RNSSplitViewPrimaryEdge RNSSplitViewPrimaryEdgeFromHostProp(
+    react::RNSSplitViewHostPrimaryEdge);
+
+UISplitViewControllerSplitBehavior
+RNSSplitBehaviorToUISplitViewControllerSplitBehavior(
+    RNSSplitViewSplitBehavior behavior);
+
+UISplitViewControllerPrimaryEdge
+RNSPrimaryEdgeToUISplitViewControllerPrimaryEdge(
+    RNSSplitViewPrimaryEdge primaryEdge);
 }; // namespace rnscreens::conversion
 
 #endif

ios/gamma/split-view/RNSSplitViewHostComponentView.h

@@ -1,3 +1,4 @@
+#import "RNSEnums.h"
 #import "RNSReactBaseView.h"
 
 NS_ASSUME_NONNULL_BEGIN
@@ -13,4 +14,13 @@ NS_ASSUME_NONNULL_BEGIN
 
 @end
 
+#pragma mark - Props
+
+@interface RNSSplitViewHostComponentView ()
+
+@property (nonatomic, readonly) RNSSplitViewSplitBehavior splitBehavior;
+@property (nonatomic, readonly) RNSSplitViewPrimaryEdge primaryEdge;
+
+@end
+
 NS_ASSUME_NONNULL_END

ios/gamma/split-view/RNSSplitViewHostComponentView.mm

@@ -4,6 +4,7 @@
 #import <React/UIView+React.h>
 #import <react/renderer/components/rnscreens/ComponentDescriptors.h>
 
+#import "RNSConversions.h"
 #import "RNSDefines.h"
 #import "RNSSplitViewScreenComponentView.h"
 #import "Swift-Bridging.h"
@@ -30,6 +31,7 @@ - (instancetype)initWithFrame:(CGRect)frame
 
 - (void)initState
 {
+  [self resetProps];
   //    TODO: For now I'm hardcoding style in init, but style cannot be updated outside controller's constructor, thus
   //    we'll need to delay the initialization unitl Screen components will be mounted
   _controller =
@@ -39,6 +41,15 @@ - (void)initState
   _reactSubviews = [NSMutableArray new];
 }
 
+- (void)resetProps
+{
+  static const auto defaultProps = std::make_shared<const react::RNSSplitViewHostProps>();
+  _props = defaultProps;
+
+  _splitBehavior = RNSSplitViewSplitBehaviorAutomatic;
+  _primaryEdge = RNSSplitViewPrimaryEdgeLeading;
+}
+
 - (void)didMoveToWindow
 {
   RCTAssert(_controller != nil, @"[RNScreens] Controller must not be nil while attaching to window");
@@ -122,6 +133,27 @@ + (BOOL)shouldBeRecycled
   return NO;
 }
 
+- (void)updateProps:(const facebook::react::Props::Shared &)props
+           oldProps:(const facebook::react::Props::Shared &)oldProps
+{
+  const auto &oldComponentProps = *std::static_pointer_cast<const react::RNSSplitViewHostProps>(_props);
+  const auto &newComponentProps = *std::static_pointer_cast<const react::RNSSplitViewHostProps>(props);
+
+  if (oldComponentProps.splitBehavior != newComponentProps.splitBehavior) {
+    _splitBehavior = rnscreens::conversion::RNSSplitViewSplitBehaviorFromHostProp(newComponentProps.splitBehavior);
+    _controller.preferredSplitBehavior =
+        rnscreens::conversion::RNSSplitBehaviorToUISplitViewControllerSplitBehavior(_splitBehavior);
+  }
+
+  if (oldComponentProps.primaryEdge != newComponentProps.primaryEdge) {
+    _primaryEdge = rnscreens::conversion::RNSSplitViewPrimaryEdgeFromHostProp(newComponentProps.primaryEdge);
+    _controller.primaryEdge =
+        rnscreens::conversion::RNSPrimaryEdgeToUISplitViewControllerPrimaryEdge(_primaryEdge);
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
 #pragma mark - RCTMountingTransactionObserving
 
 - (void)mountingTransactionWillMount:(const facebook::react::MountingTransaction &)transaction

ios/gamma/split-view/RNSSplitViewHostController.swift

@@ -47,11 +47,6 @@ public class RNSSplitViewHostController: UISplitViewController, ReactMountingTra
 
     viewControllers = currentViewControllers
 
-    //      TODO: to be removed - only for testing purposes for inspector column
-    //    if #available(iOS 26.0, *) {
-    //      setViewController(currentViewControllers.last, for: .inspector)
-    //    }
-
     for controller in currentViewControllers {
       controller.viewFrameOriginChangeObserver = self
     }

src/components/gamma/SplitViewHost.tsx

@@ -2,19 +2,27 @@ import React from 'react';
 import { StyleSheet } from 'react-native';
 import type { ViewProps } from 'react-native';
 import SplitViewHostNativeComponent from '../../fabric/gamma/SplitViewHostNativeComponent';
-import type { NativeProps } from '../../fabric/gamma/SplitViewHostNativeComponent';
+import type {
+  NativeProps,
+  SplitViewSplitBehavior,
+} from '../../fabric/gamma/SplitViewHostNativeComponent';
 
 export type SplitViewNativeProps = NativeProps & {
-  // Overrides
+  // SplitView appearance
+
+  splitBehavior?: SplitViewSplitBehavior;
 };
 
 type SplitViewHostProps = {
   children?: ViewProps['children'];
 } & SplitViewNativeProps;
 
-function ScreenStackHost({ children }: SplitViewHostProps) {
+function SplitViewHost({ children, splitBehavior, primaryEdge }: SplitViewHostProps) {
   return (
-    <SplitViewHostNativeComponent style={styles.container}>
+    <SplitViewHostNativeComponent
+      style={styles.container}
+      splitBehavior={splitBehavior}
+      primaryEdge={primaryEdge}>
       {children}
     </SplitViewHostNativeComponent>
   );
@@ -26,4 +34,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ScreenStackHost;
+export default SplitViewHost;

src/fabric/gamma/SplitViewHostNativeComponent.ts

@@ -2,7 +2,20 @@
 
 import type { ViewProps } from 'react-native';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
 
-export interface NativeProps extends ViewProps {}
+export type SplitViewSplitBehavior =
+  | 'automatic'
+  | 'displace'
+  | 'overlay'
+  | 'tile';
+
+export type SplitViewPrimaryEdge = 'leading' | 'trailing';
+
+export interface NativeProps extends ViewProps {
+  // Appearance
+  splitBehavior?: WithDefault<SplitViewSplitBehavior, 'automatic'>;
+  primaryEdge?: WithDefault<SplitViewPrimaryEdge, 'leading'>;
+}
 
 export default codegenNativeComponent<NativeProps>('RNSSplitViewHost', {});