Introduces a new SplitView component, enabling advanced multi-column layouts (primary, secondary, supplementary, inspector) for applications, with full support for iOS split view layouts.

Overview

SplitView is a container coordinating up to four column roles backed by native UISplitViewController columns:

Each role is provided by a child Frame (or any controller-backed view). Frames push their own Pages independently while remaining embedded inside the SplitView layout.

Instantiation

You can use declarative markup as an example:

<SplitView displayMode="twoBesideSecondary" splitBehavior="tile"
           preferredPrimaryColumnWidthFraction="0.25"
           preferredSupplementaryColumnWidthFraction="0.33"
           preferredInspectorColumnWidthFraction="0.20">
  <Frame splitRole="primary"    defaultPage="..." />
  <Frame splitRole="secondary"  defaultPage="..." />
  <Frame splitRole="supplementary" defaultPage="..." />
  <Frame splitRole="inspector"  defaultPage="..." />
</SplitView>

Programmatic creation:

import { SplitView } from '@nativescript/core';
const sv = new SplitView();
// add child Frames with set splitRole property before adding to SplitView

Static Members

• SplitView.getInstance(): SplitViewBase | null – Returns the last created SplitView instance (singleton convenience), or null if none.
• SplitView.SplitStyle (from common) – Determines double vs triple column style. iOS mapping selects UISplitViewControllerStyle.DoubleColumn or TripleColumn.

Properties (from common + iOS behavior)

• displayMode: string – Maps to UISplitViewController.preferredDisplayMode.
  • Accepted values: automatic, secondaryOnly, oneBesideSecondary, oneOverSecondary, twoBesideSecondary, twoOverSecondary, twoDisplaceSecondary.
• splitBehavior: string – iOS 14+ only. Maps to preferredSplitBehavior.
  • Values: automatic, tile, overlay, displace.
• preferredPrimaryColumnWidthFraction: number – Fractional width (0–1) for primary column.
• preferredSupplementaryColumnWidthFraction: number – Fraction for supplementary column (applies in triple style).
• preferredInspectorColumnWidthFraction: number – Fraction for inspector column (SDK / OS version gated; only applied when available).
• inspectorShowing: boolean (readonly state) – Internal flag tracking visibility of inspector column.

Role Assignment

Children declare a role using splitRole="primary|secondary|supplementary|inspector". If omitted, order of addition is used as fallback.

Methods

• showPrimary() / hidePrimary() – Show/hide primary column.
• showSecondary() / hideSecondary() – Show/hide secondary column.
• showSupplementary() – Shows supplementary column (no explicit hide; hiding handled by displayMode changes).
• showInspector() / hideInspector() – Toggle inspector column if supported (feature detection via preferredInspectorColumnWidthFraction property presence on native controller).
• onSecondaryViewCollapsed(secondaryVC, primaryVC) – Hook invoked when system collapses secondary onto primary (e.g., trait/environment changes). Override for custom behavior.
• onRoleChanged(view, oldRole, newRole) – Internal: invoked when a child view's role property changes; rebinds controllers.

Events

• inspectorChange – Fired when inspector column visibility changes.
  • Payload: { showing: boolean } under data property on the event args.
  • Usage:

    splitView.on('inspectorChange', (args) => {
      console.log('Inspector visible?', args.data.showing);
    });

Version / Platform Considerations

• splitBehavior requires iOS 14+.
• Inspector column support requires iOS 17+

Minimal Usage Example

<SplitView displayMode="twoBesideSecondary" splitBehavior="tile"
           preferredPrimaryColumnWidthFraction="0.25"
           preferredSupplementaryColumnWidthFraction="0.33"
           preferredInspectorColumnWidthFraction="0.20">
  <Frame splitRole="primary" defaultPage="pages/master" />
  <Frame splitRole="secondary" defaultPage="pages/detail" />
  <Frame splitRole="supplementary" defaultPage="pages/context" />
  <Frame splitRole="inspector" defaultPage="pages/inspector" />
</SplitView>

Programmatic Event Hook

splitView.on('inspectorChange', ({ data }) => {
  if (data.showing) {
    console.log('Inspector opened');
  } else {
    console.log('Inspector closed');
  }
});