feat(iOS, SplitView): Add an option for changing number of columns dynamically

src/components/gamma/split-view/SplitViewHost.tsx

@@ -6,6 +6,7 @@ import type {
   SplitViewHostProps,
   SplitViewSplitBehavior,
 } from './SplitViewHost.types';
+import SplitViewScreen from './SplitViewScreen';
 
 // According to the UIKit documentation: https://developer.apple.com/documentation/uikit/uisplitviewcontroller/displaymode-swift.enum
 // Only specific pairs for displayMode - splitBehavior are valid and others may lead to unexpected results.
@@ -59,8 +60,26 @@ function SplitViewHost(props: SplitViewHostProps) {
     }
   }, [preferredDisplayMode, preferredSplitBehavior]);
 
+  const children = React.Children.toArray(props.children);
+
+  const columns = children.filter(
+    // @ts-ignore - type is valid attribute for child
+    child => child.type === SplitViewScreen.Column,
+  );
+
+  const inspectors = children.filter(
+    // @ts-ignore - type is valid attribute for child
+    child => child.type === SplitViewScreen.Inspector,
+  );
+
   return (
-    <SplitViewHostNativeComponent {...props} style={styles.container}>
+    <SplitViewHostNativeComponent
+      // UISplitViewController requires the number of columns to be specified at initialization and it cannot be changed dynamically later.
+      // By using a specific key in this form, we can detect changes in the number of React children.
+      // This enables us to fully recreate the SplitView when necessary, ensuring the correct column configuration is always applied.
+      key={`columns-${columns.length}-inspectors-${inspectors.length}`}
+      {...props}
+      style={styles.container}>
       {props.children}
     </SplitViewHostNativeComponent>
   );