fix(core): insert iOS child views relative to their sibling, not by raw index - #11406

npm i https://pkg.pr.new/@nativescript/core@11406

npm i https://pkg.pr.new/@nativescript/vite@11406

npm i https://pkg.pr.new/@nativescript/webpack@11406

// Drop this file into any NativeScript app (plain TypeScript, no framework needed)
// and call `runInsertOrderRepro(page)` from the page's `loaded` handler:
//
//   <Page loaded="onLoaded"> ... </Page>
//   export function onLoaded(args) { runInsertOrderRepro(args.object); }
//
//   Currently:
//   [nativescript] child order:  a, x, b, c
//   [uikit]  subviews (gradient): x, a, b, c     <- wrong, x went below a
//   [uikit]  subviews (plain):    a, x, b, c     <- the same insert with no extra sublayer
//
// With the fix (insertSubview:belowSubview:), the gradient case prints a, x, b, c too.

import { GridLayout, Label, Page } from '@nativescript/core';

export function runInsertOrderRepro(page: Page): void {
	page.addCss('.repro-gradient { background: linear-gradient(to bottom, #ffffff, #f4f4f5); }');

	const grid = new GridLayout();
	grid.className = 'repro-gradient';
	grid.height = 120;
	const label = (text: string) => {
		const l = new Label();
		l.text = text;
		l.height = 20;
		return l;
	};
	grid.addChild(label('a'));
	grid.addChild(label('b'));
	grid.addChild(label('c'));
	page.content = grid;

	setTimeout(() => {
		grid.insertChild(label('x'), 1);

		const children: string[] = [];
		grid.eachChildView((child) => {
			children.push((child as Label).text);
			return true;
		});
		console.log('[nativescript] child order: ', children.join(', '));
		console.log('[uikit] subviews (gradient):  ', subviewTexts(grid.ios as UIView));

		// Pure UIKit, no NativeScript involved: an extra sublayer ahead of the
		// children shifts insertSubview:atIndex: by one.
		const plain = UIView.alloc().initWithFrame(CGRectMake(0, 0, 100, 100));
		const decorated = UIView.alloc().initWithFrame(CGRectMake(0, 0, 100, 100));
		decorated.layer.insertSublayerAtIndex(CAGradientLayer.new(), 0);
		for (const parent of [plain, decorated]) {
			for (const tag of [1, 2, 3]) parent.addSubview(taggedView(tag));
			parent.insertSubviewAtIndex(taggedView(9), 1);
		}
		console.log('[uikit] insertSubview:atIndex:1, plain parent:    ', subviewTags(plain));
		console.log('[uikit] insertSubview:atIndex:1, extra sublayer:  ', subviewTags(decorated));
	}, 100);
}

function taggedView(tag: number): UIView {
	const view = UIView.alloc().initWithFrame(CGRectMake(0, 0, 10, 10));
	view.tag = tag;
	return view;
}

function subviewTexts(view: UIView): string {
	const out: string[] = [];
	for (let i = 0; i < view.subviews.count; i++) {
		out.push((view.subviews.objectAtIndex(i) as UILabel).text);
	}
	return out.join(', ');
}

function subviewTags(view: UIView): string {
	const out: number[] = [];
	for (let i = 0; i < view.subviews.count; i++) {
		out.push(view.subviews.objectAtIndex(i).tag);
	}
	return out.join(', ');
}