NativeScript · NathanWalker · Nov 7, 2025 · Oct 23, 2025 · Nov 6, 2025 · Nov 6, 2025
diff --git a/apps/toolbox/src/app-root.xml b/apps/toolbox/src/app-root.xml
@@ -1,2 +1,8 @@
 <Frame defaultPage="main-page">
 </Frame>
+
+<!-- Test SplitView 
+    Must be root component of the app to work properly
+-->
+<!-- <Frame defaultPage="split-view/split-view-root">
+</Frame> -->
diff --git a/apps/toolbox/src/main.ts b/apps/toolbox/src/main.ts
@@ -1,3 +1,6 @@
-import { Application } from '@nativescript/core';
+import { Application, SplitView } from '@nativescript/core';
 
-Application.run({ moduleName: 'app-root' });
+// Application.run({ moduleName: 'app-root' });
+
+SplitView.SplitStyle = 'triple';
+Application.run({ moduleName: 'split-view/split-view-root' });
diff --git a/apps/toolbox/src/pages/list-page-model-sticky.ts b/apps/toolbox/src/pages/list-page-model-sticky.ts
@@ -1,4 +1,5 @@
 import { Observable, Dialogs, DialogStrings, View, EventData, SearchEventData } from '@nativescript/core';
+import { getItemCallbacks } from '../split-view/split-view-root';
 type CountryListType = Array<{ title: string; items: Array<{ name: string; code: string; flag: string; isVisible?: boolean }> }>;
 export class ListPageModelSticky extends Observable {
 	countries: CountryListType = [
@@ -1380,11 +1381,14 @@ export class ListPageModelSticky extends Observable {
 	}
 
 	componentsItemTap(args): void {
-		Dialogs.alert({
-			title: 'Want to play?',
-			message: 'Nothing to see here yet. Feel free to add more examples to play around.',
-			okButtonText: DialogStrings.OK,
-		});
+		const letter = this.countries[args.section];
+		console.log('Tapped on category: ' + letter.title);
+		if (letter.items?.length) {
+			const country = letter.items[args.index];
+			console.log('Tapped on country: ' + country.name);
+			// used in splitview demo
+			getItemCallbacks().forEach((callback) => callback(`${country.name} was selected.`));
+		}
 	}
 
 	itemLoading(args: EventData): void {

diff --git a/apps/toolbox/src/pages/list-page-sticky.xml b/apps/toolbox/src/pages/list-page-sticky.xml
@@ -1,9 +1,6 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" actionBarHidden="false" androidOverflowEdge="bottom">
-    <Page.actionBar>
-        <ActionBar>
-            <Label text="Components" class="header"/>
-        </ActionBar>
-    </Page.actionBar>
+    <ActionBar title="Countries">
+    </ActionBar>
 
     <GridLayout backgroundColor="#efefef">
         <ListView class="list-group" items="{{ countries }}" itemTap="{{ componentsItemTap }} " separatorColor="#00000000" itemTemplateSelector="{{ selectItemTemplate }}" stickyHeader="true" sectioned="true" stickyHeaderTopPadding="false" stickyHeaderTemplate="<GridLayout><Label text='{{ title }}' fontSize='18' fontWeight='bold' color='#009bff' padding='8 0 8 12' borderBottomWidth='1' borderBottomColor='#ccc' borderTopWidth='1' borderTopColor='#ccc' backgroundColor='#fff' /></GridLayout>" stickyHeaderHeight="45" itemLoading="{{ itemLoading }}" showSearch="true" searchAutoHide="true" searchChange="{{ onSearchTextChange }}">

diff --git a/apps/toolbox/src/split-view/split-view-primary.ts b/apps/toolbox/src/split-view/split-view-primary.ts
@@ -0,0 +1,23 @@
+import { Observable, EventData, Page, SplitView, ItemEventData } from '@nativescript/core';
+import { getItemCallbacks } from './split-view-root';
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SplitViewPrimaryModel();
+}
+
+export class SplitViewPrimaryModel extends Observable {
+	items: string[] = [];
+
+	constructor() {
+		super();
+		this.items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);
+	}
+
+	onItemTap(args: ItemEventData) {
+		console.log('args.index', args.index);
+		SplitView.getInstance()?.showSecondary();
+		getItemCallbacks().forEach((callback) => callback(this.items[args.index]));
+	}
+}
diff --git a/apps/toolbox/src/split-view/split-view-primary.xml b/apps/toolbox/src/split-view/split-view-primary.xml
@@ -0,0 +1,16 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <ActionBar title="Primary View" class="action-bar" iosLargeTitle="true"></ActionBar>
+
+  <!-- Primary column (master) -->
+  <GridLayout rows="auto,*">
+    <!-- <Label text="Primary" marginBottom="12" marginLeft="8" fontSize="22" fontWeight="bold" /> -->
+    <ListView row="1" items="{{ items }}" itemTap="{{ onItemTap }}" backgroundColor="white">
+      <ListView.itemTemplate>
+        <GridLayout padding="12">
+          <Label text="{{ $value }}" fontSize="18" />
+        </GridLayout>
+      </ListView.itemTemplate>
+    </ListView>
+  </GridLayout>
+
+</Page>
diff --git a/apps/toolbox/src/split-view/split-view-root.ts b/apps/toolbox/src/split-view/split-view-root.ts
@@ -0,0 +1,17 @@
+import { Observable, EventData, Page } from '@nativescript/core';
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SplitViewModel();
+}
+
+export class SplitViewModel extends Observable {}
+
+let itemCallbacks: Array<(item: any) => void> = [];
+export function setItemCallbacks(changeItem: Array<(item: any) => void>) {
+	itemCallbacks.push(...changeItem);
+}
+export function getItemCallbacks() {
+	return itemCallbacks;
+}
diff --git a/apps/toolbox/src/split-view/split-view-root.xml b/apps/toolbox/src/split-view/split-view-root.xml
@@ -0,0 +1,19 @@
+<SplitView xmlns="http://schemas.nativescript.org/tns.xsd" displayMode="twoBesideSecondary" splitBehavior="tile" preferredPrimaryColumnWidthFraction="0.25" preferredSupplementaryColumnWidthFraction="0.33"
+preferredInspectorColumnWidthFraction="0.20">
+  <Frame splitRole="primary" defaultPage="split-view/split-view-primary">
+
+  </Frame>
+
+  <Frame splitRole="secondary" defaultPage="split-view/split-view-secondary">
+
+  </Frame>
+
+  <Frame splitRole="supplementary" defaultPage="split-view/split-view-supplement">
+
+  </Frame>
+
+  <Frame splitRole="inspector" defaultPage="pages/list-page-sticky">
+
+  </Frame>
+
+</SplitView>
diff --git a/apps/toolbox/src/split-view/split-view-secondary.ts b/apps/toolbox/src/split-view/split-view-secondary.ts
@@ -0,0 +1,35 @@
+import { Observable, EventData, Page, SplitView } from '@nativescript/core';
+import { setItemCallbacks } from './split-view-root';
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SplitViewSecondaryModel();
+}
+
+export class SplitViewSecondaryModel extends Observable {
+	selectedItem = `Select an item from Primary.`;
+	showInspectorButton = false;
+
+	constructor() {
+		super();
+		setItemCallbacks([this.changeItem.bind(this)]);
+		SplitView.getInstance().on('inspectorChange', (args: any) => {
+			console.log('inspectorChange', args.data?.showing);
+			this.showInspectorButton = !args.data?.showing;
+			this.notifyPropertyChange('showInspectorButton', this.showInspectorButton);
+		});
+	}
+	toggle() {
+		SplitView.getInstance()?.showPrimary();
+	}
+
+	toggleInspector() {
+		SplitView.getInstance()?.showInspector();
+	}
+
+	changeItem(item: any) {
+		this.selectedItem = item;
+		this.notifyPropertyChange('selectedItem', item);
+	}
+}
diff --git a/apps/toolbox/src/split-view/split-view-secondary.xml b/apps/toolbox/src/split-view/split-view-secondary.xml
@@ -0,0 +1,11 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <ActionBar title="Secondary View" class="action-bar">
+  </ActionBar>
+  <!-- Secondary column (detail) -->
+  <StackLayout class="p-16">
+    <Label text="Secondary" marginBottom="12" fontSize="22" fontWeight="bold" />
+    <Label text="{{ selectedItem }}" textWrap="true" tap="{{toggle}}" />
+    <Label text="Show Inspector" tap="{{toggleInspector}}" class="m-t-10 font-weight-bold" visibility="{{ showInspectorButton ? 'visible' : 'collapsed' }}" />
+  </StackLayout>
+
+</Page>
diff --git a/apps/toolbox/src/split-view/split-view-supplement.ts b/apps/toolbox/src/split-view/split-view-supplement.ts
@@ -0,0 +1,24 @@
+import { Observable, EventData, Page, SplitView } from '@nativescript/core';
+import { setItemCallbacks } from './split-view-root';
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SplitViewSupplementaryModel();
+}
+
+export class SplitViewSupplementaryModel extends Observable {
+	selectedItem = `Supplementary - Select an item.`;
+	constructor() {
+		super();
+		setItemCallbacks([this.changeItem.bind(this)]);
+	}
+	toggle() {
+		SplitView.getInstance()?.showPrimary();
+	}
+
+	changeItem(item: any) {
+		this.selectedItem = item;
+		this.notifyPropertyChange('selectedItem', item);
+	}
+}
diff --git a/apps/toolbox/src/split-view/split-view-supplement.xml b/apps/toolbox/src/split-view/split-view-supplement.xml
@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <ActionBar title="Supplementary View" class="action-bar">
+  </ActionBar>
+  <!-- Supplementary column (detail) -->
+  <StackLayout class="p-16">
+    <Label text="Supplementary" marginBottom="12" fontSize="22" fontWeight="bold" />
+    <Label text="{{ selectedItem }}" textWrap="true" tap="{{toggle}}" />
+  </StackLayout>
+
+</Page>