@octane-xplat/ui 0.7.2 → 0.9.0

package/src/VirtualList.web.tsrx

@@ -9,12 +9,15 @@ import {
 	type VirtualListEntry,
 	type VirtualListSizeRecord,
 } from './virtual-list-layout'
+
+import { VirtualListCellPool } from './virtual-list-cell-pool'
+
 import { applyEscapeProps } from './escape-props'
 import { layoutChildProps } from './layout-child.web'
 
 type NodeMeta =
 	| { kind: 'viewport' }
-	| { kind: 'row'; rowKey: string }
+	| { kind: 'row'; rowKey: string; cellId: number; generation: number }
 	| { kind: 'header' }
 	| { kind: 'footer' }
 
@@ -29,8 +32,13 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		() => createVirtualListEntries(props.items, props.keyExtractor, props.getItemType),
 		[props.items, props.keyExtractor, props.getItemType],
 	)
+
 	const [windowVersion, setWindowVersion] = useState(0)
 	const sizeIndexRef = useRef(new VirtualListSizeIndex())
+	const cellsRef = useRef(new VirtualListCellPool<T>())
+	const cellCallbacksRef = useRef(new Map<number, (node: Element | null) => void>())
+	const measuredAssignmentsRef = useRef(new Map<number, number>())
+	const disposedRef = useRef(false)
 	const sizeCacheRef = useRef(new Map<string, VirtualListSizeRecord>())
 	const entriesRef = useRef<VirtualListEntry<T>[]>([])
 	const indexByRowKeyRef = useRef(new Map<string, number>())
@@ -42,6 +50,8 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	const footerHeightRef = useRef(0)
 	const observerRef = useRef<ResizeObserver | null>(null)
 	const estimateScheduledRef = useRef(false)
+	const resizeDeliveryRef = useRef(false)
+	const refreshAfterResizeRef = useRef(false)
 	const nodesBySlotRef = useRef(new Map<string, Element>())
 	const metaByNodeRef = useRef(new WeakMap<Element, NodeMeta>())
 	const rangeRef = useRef({ start: -1, end: -1, top: -1, bottom: -1 })
@@ -61,6 +71,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 				entry.rowKey,
 				hasSeparatorRef.current && entry.index < nextEntries.length - 1,
 			)
+
 			activeMeasurements.add(cacheKey)
 		}
 
@@ -74,7 +85,11 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		)
 	}
 
-	if (entries !== entriesRef.current) rebuildLayout(entries, viewportWidthRef.current)
+	if (entries !== entriesRef.current) {
+		const anchor = captureAnchor()
+		rebuildLayout(entries, viewportWidthRef.current)
+		restoreAnchor(anchor)
+	}
 
 	function currentRange() {
 		const listOffset = Math.max(0, scrollOffsetRef.current - headerHeightRef.current)
@@ -87,6 +102,12 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	}
 
 	function refreshWindow() {
+		if (disposedRef.current) return
+		if (resizeDeliveryRef.current) {
+			refreshAfterResizeRef.current = true
+			return
+		}
+
 		const next = currentRange()
 		const previous = rangeRef.current
 		if (
@@ -101,7 +122,8 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	}
 
 	function captureAnchor() {
-		const listOffset = scrollOffsetRef.current - headerHeightRef.current
+		const scrollOffset = scrollRef.current?.scrollTop ?? scrollOffsetRef.current
+		const listOffset = scrollOffset - headerHeightRef.current
 		if (listOffset < 0 || entriesRef.current.length === 0) return null
 
 		const index = sizeIndexRef.current.indexAt(listOffset)
@@ -122,6 +144,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 			0,
 			headerHeightRef.current + sizeIndexRef.current.prefix(index) + anchor.within,
 		)
+
 		if (sameSize(nextOffset, scrollOffsetRef.current)) return
 
 		scrollOffsetRef.current = nextOffset
@@ -133,6 +156,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		estimateScheduledRef.current = true
 		Promise.resolve().then(() => {
 			estimateScheduledRef.current = false
+			if (disposedRef.current) return
 			const anchor = captureAnchor()
 			rebuildLayout(entriesRef.current, viewportWidthRef.current)
 			restoreAnchor(anchor)
@@ -141,7 +165,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	}
 
 	function recordRowSize(rowKey: string, width: number, height: number) {
-		if (!Number.isFinite(height) || height < 0) return
+		if (disposedRef.current || !Number.isFinite(height) || height < 0) return
 		const index = indexByRowKeyRef.current.get(rowKey)
 		if (index === undefined) return
 		const entry = entriesRef.current[index]
@@ -156,6 +180,7 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 			if (anchor && index < anchor.index) restoreAnchor(anchor)
 			refreshWindow()
 		}
+
 		scheduleEstimateRebuild()
 	}
 
@@ -166,12 +191,14 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 			metaByNodeRef.current.delete(previous)
 			nodesBySlotRef.current.delete(slot)
 		}
+
 		if (!node) {
 			if (previous) {
 				observerRef.current?.unobserve(previous)
 				metaByNodeRef.current.delete(previous)
 				nodesBySlotRef.current.delete(slot)
 			}
+
 			return
 		}
 
@@ -180,6 +207,24 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		observerRef.current?.observe(node)
 	}
 
+	function cellCallback(id: number) {
+		let callback = cellCallbacksRef.current.get(id)
+		if (!callback) {
+			callback = (node: Element | null) => {
+				const cell = cellsRef.current.get(id)
+				bindObservedNode('cell:' + id, node, {
+					kind: 'row', rowKey: cell?.entry?.rowKey ?? '', cellId: id, generation: cell?.generation ?? 0,
+				})
+
+				if (!node) cellCallbacksRef.current.delete(id)
+			}
+
+			cellCallbacksRef.current.set(id, callback)
+		}
+
+		return callback
+	}
+
 	handlersRef.current = (meta, entry) => {
 		if (meta.kind === 'viewport') {
 			const width = scrollRef.current?.clientWidth ?? entry.contentRect.width
@@ -192,13 +237,18 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 				rebuildLayout(entriesRef.current, width)
 				restoreAnchor(anchor)
 			}
+
 			refreshWindow()
 			return
 		}
 
 		const height = entry.contentRect.height
 		if (meta.kind === 'row') {
-			recordRowSize(meta.rowKey, entry.contentRect.width, height)
+			if (!cellsRef.current.isCurrent(meta.cellId, meta.rowKey, meta.generation)) return
+			// A reused node may have an older ResizeObserver record. Read its
+			// current box after assignment rather than caching the former row.
+			const bounds = entry.target.getBoundingClientRect()
+			recordRowSize(meta.rowKey, bounds.width, bounds.height)
 			return
 		}
 
@@ -213,20 +263,50 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		}
 	}
 
+	useEffect(() => {
+		disposedRef.current = false
+		return () => {
+			disposedRef.current = true
+			cellsRef.current.clear()
+			cellCallbacksRef.current.clear()
+			measuredAssignmentsRef.current.clear()
+			nodesBySlotRef.current.clear()
+			metaByNodeRef.current = new WeakMap()
+		}
+	}, [])
+
 	useEffect(() => {
 		if (typeof ResizeObserver === 'undefined') return
 
+		// Apply measurements and anchor corrections while the previous layout is
+		// still current, but commit the resulting render after ResizeObserver.
+		let frame: number | null = null
 		const observer = new ResizeObserver((records) => {
-			for (const record of records) {
-				const meta = metaByNodeRef.current.get(record.target)
-				if (meta) handlersRef.current(meta, record)
+			resizeDeliveryRef.current = true
+			try {
+				for (const record of records) {
+					const meta = metaByNodeRef.current.get(record.target)
+					if (meta) handlersRef.current(meta, record)
+				}
+			} finally {
+				resizeDeliveryRef.current = false
 			}
+
+			if (!refreshAfterResizeRef.current || frame !== null) return
+			refreshAfterResizeRef.current = false
+			frame = requestAnimationFrame(() => {
+				frame = null
+				refreshWindow()
+			})
 		})
+
 		observerRef.current = observer
 		for (const node of nodesBySlotRef.current.values()) observer.observe(node)
 
 		return () => {
 			observer.disconnect()
+			if (frame !== null) cancelAnimationFrame(frame)
+			refreshAfterResizeRef.current = false
 			observerRef.current = null
 		}
 	}, [])
@@ -240,7 +320,33 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 	const range = currentRange()
 	rangeRef.current = range
 	void windowVersion
-	const visibleEntries = entries.slice(range.start, range.end)
+	const cells = cellsRef.current.update(entries.slice(range.start, range.end)).map((cell) => ({
+		...cell, top: cell.entry ? sizeIndexRef.current.prefix(cell.entry.index) : 0,
+	}))
+
+	const contentHeight = sizeIndexRef.current.total
+	for (const cell of cells) {
+		const node = nodesBySlotRef.current.get('cell:' + cell.id)
+		if (node) metaByNodeRef.current.set(node, {
+			kind: 'row', rowKey: cell.entry?.rowKey ?? '', cellId: cell.id, generation: cell.generation,
+		})
+	}
+
+	useEffect(() => {
+		for (const cell of cells) {
+			if (!cell.entry || measuredAssignmentsRef.current.get(cell.id) === cell.generation) continue
+			const node = nodesBySlotRef.current.get('cell:' + cell.id)
+			if (!node || !cellsRef.current.isCurrent(cell.id, cell.entry.rowKey, cell.generation)) continue
+			const bounds = node.getBoundingClientRect()
+			measuredAssignmentsRef.current.set(cell.id, cell.generation)
+			recordRowSize(cell.entry.rowKey, bounds.width, bounds.height)
+		}
+
+		for (const id of measuredAssignmentsRef.current.keys()) {
+			if (!nodesBySlotRef.current.has('cell:' + id)) measuredAssignmentsRef.current.delete(id)
+		}
+	}, [cells])
+
 	const style = {
 		...props.style,
 		minHeight: props.style?.minHeight ?? 0,
@@ -280,26 +386,26 @@ export function VirtualList<T = any>(props: VirtualListProps<T>) @{
 		{entries.length === 0 ? (
 			props.renderEmpty ? <div className="vx-virtual-list-empty">{props.renderEmpty()}</div> : null
 		) : (
-			<>
-				<div className="vx-virtual-list-spacer" style={{ height: range.top }} aria-hidden="true" />
-				@for (const entry of visibleEntries; key entry.rowKey) {
+			<div className="vx-virtual-list-body" style={{ position: 'relative', height: contentHeight }}>
+				@for (const cell of cells; key cell.id) {
 					<div
-						className="vx-virtual-list-row"
-						data-vx-row="true"
-						ref={(node: any) => bindObservedNode(
-							'row:' + virtualListMeasurementKey(entry.rowKey, hasSeparator && entry.index < entries.length - 1),
-							node,
-							{ kind: 'row', rowKey: entry.rowKey },
-						)}
+						className={cell.entry ? 'vx-virtual-list-cell vx-virtual-list-row' : 'vx-virtual-list-cell'}
+						data-vx-row={cell.entry ? 'true' : undefined}
+						hidden={!cell.entry}
+						style={{ position: 'absolute', top: cell.top, left: 0, width: '100%' }}
+						ref={cellCallback(cell.id)}
 					>
-						<div className="vx-virtual-list-item">{props.renderItem(entry.item, entry.index)}</div>
-						{hasSeparator && entry.index < entries.length - 1 ? (
-							<div className="vx-virtual-list-separator">{props.renderSeparator?.()}</div>
-						) : null}
+						@for (const entry of cell.rows; key entry.rowKey) {
+							<>
+								<div className="vx-virtual-list-item">{props.renderItem(entry.item, entry.index)}</div>
+								{hasSeparator && entry.index < entries.length - 1 ? (
+									<div className="vx-virtual-list-separator">{props.renderSeparator?.()}</div>
+								) : null}
+							</>
+						}
 					</div>
 				}
-				<div className="vx-virtual-list-spacer" style={{ height: range.bottom }} aria-hidden="true" />
-			</>
+			</div>
 		)}
 		{props.renderFooter ? (
 			<div

package/src/WebView.tsrx

@@ -16,6 +16,7 @@ function reportContentLayout(view: any, props: WebViewProps) {
 	} else if (isAndroid) {
 		height = Number(view?.android?.getContentHeight?.() ?? 0) * Number(view?.android?.getScale?.() ?? 1)
 	}
+
 	if (!Number.isFinite(width) || !Number.isFinite(height) || height <= 0) return
 	props.onLayoutContent?.({ width, height })
 	if (props.matchContents) {
@@ -24,6 +25,22 @@ function reportContentLayout(view: any, props: WebViewProps) {
 	}
 }
 
+function applyNativeScrollEnabled(view: any, enabled: boolean | undefined) {
+	if (isIOS) {
+		const scrollView = view?.ios?.scrollView
+		if (scrollView) scrollView.scrollEnabled = enabled !== false
+	} else if (isAndroid) {
+		const nativeView = view?.android
+		if (!nativeView?.setOnTouchListener) return
+		nativeView.setOnTouchListener(enabled === false
+			? new android.view.View.OnTouchListener({
+					onTouch: (_view: any, event: any) =>
+						event.getActionMasked() === android.view.MotionEvent.ACTION_MOVE,
+				})
+			: null)
+	}
+}
+
 /** Embedded web document — NS <webview> (WKWebView / android.webkit.WebView).
  *  `html` flows through the `src` property: values that aren't http/file
  *  URLs take its `_loadData` path. NS reports failures as `loadFinished`
@@ -39,16 +56,7 @@ export function WebView(props: WebViewProps) @{
 	useEffect(() => {
 		const v = el.current;
 		if (!v) return;
-		if (isIOS) {
-			v.ios.scrollView.scrollEnabled = props.scrollEnabled !== false;
-		} else if (isAndroid) {
-			v.android.setOnTouchListener(props.scrollEnabled === false
-				? new android.view.View.OnTouchListener({
-						onTouch: (_view: any, event: any) =>
-							event.getActionMasked() === android.view.MotionEvent.ACTION_MOVE,
-					})
-				: null);
-		}
+		applyNativeScrollEnabled(v, props.scrollEnabled)
 		if (props.matchContents && loaded.current) reportContentLayout(v, props);
 	}, [props.scrollEnabled, props.matchContents]);
 
@@ -70,7 +78,9 @@ export function WebView(props: WebViewProps) @{
 		className={cx('vx-webview', props.className)}
 		style={props.style}
 		src={props.html !== undefined ? props.html : props.src}
+		onLoaded={() => applyNativeScrollEnabled(el.current, props.scrollEnabled)}
 		onLoadFinished={(e: any) => {
+			applyNativeScrollEnabled(e.object ?? el.current, props.scrollEnabled)
 			if (e.error) props.onError?.({ url: e.url, error: e.error });
 			else {
 				loaded.current = true;

package/src/WebView.web.tsrx

@@ -33,6 +33,7 @@ export function WebView(props: WebViewProps) @{
 		},
 		native: el,
 	});
+
 	useEffect(() => {
 		const el = frame.current;
 		if (!el) return;
@@ -48,6 +49,7 @@ export function WebView(props: WebViewProps) @{
 					width: Math.max(body.scrollWidth, root.scrollWidth),
 					height: Math.max(body.scrollHeight, root.scrollHeight),
 				};
+
 				if (size.width <= 0 || size.height <= 0) return;
 				if (props.matchContents) el.style.height = `${size.height}px`;
 				props.onLayoutContent?.(size);
@@ -62,6 +64,7 @@ export function WebView(props: WebViewProps) @{
 				// Cross-origin documents cannot be inspected by the embedding page.
 			}
 		};
+
 		el.addEventListener('load', measure);
 		measure();
 		return () => {

package/src/android/BottomNavigationView.android.tsrx

@@ -47,6 +47,7 @@ function applyIcon(item: TabViewItem, name: string): void {
 		item.iconSource = name;
 		return;
 	}
+
 	const glyph = getIcon(name);
 	if (!glyph) {
 		warnIconOnce(name, `tab icon '${name}' isn't registered — call registerIcons() at boot.`);

package/src/android/MaterialDialog.android.tsrx

@@ -31,6 +31,7 @@ export function MaterialDialog(props: ModalProps) @{
 				console.warn('[Modal] open dropped — no live presenter (currentPage mid-navigation or no active frame).');
 				return;
 			}
+
 			const host = new GridLayout();
 			const unbindTheme = applyThemeClasses(host, 'vx-modal-host');
 			const root = createNativeScriptRoot(host);

package/src/anim.macos.tsrx

@@ -10,6 +10,7 @@ export function useAnimation(initial = 0, property = 'opacity'): AnimatedValue {
 		value = next
 		if (view) {view[property] = next}
 	}
+
 	return {
 		get value() { return value },
 		bind(el: any) { view = el; write(value) },

package/src/apply-native-modifiers.native.ts

@@ -2,7 +2,10 @@ import type { NativeModifier } from './props'
 
 /** Apply serializable modifiers to a NativeScript host view in array order. */
 export function applyNativeModifiers(view: any, modifiers?: readonly NativeModifier[]): void {
-	if (!view || !modifiers?.length) return
+	if (!view || !modifiers?.length) {
+		return
+	}
+
 	for (const entry of modifiers) {
 		if (entry.type === 'style') {
 			Object.assign(view.style, entry.values)

package/src/child-array.ts

@@ -1,16 +1,21 @@
 /** Normalize a JSX children value to a flat array — children may be a
  *  single node, an array, or nested arrays from `.map` calls. */
 export function toChildArray(children: any): any[] {
-	const out: any[] = [];
+	const out: any[] = []
 	const walk = (node: any) => {
-		if (node == null || node === false) { return; }
+		if (node == null || node === false) {
+			return
+		}
+
 		if (Array.isArray(node)) {
-			for (const child of node) { walk(child); }
+			for (const child of node) {
+				walk(child)
+			}
 		} else {
-			out.push(node);
+			out.push(node)
 		}
-	};
+	}
 
-	walk(children);
-	return out;
+	walk(children)
+	return out
 }

package/src/colorScheme.macos.ts

@@ -19,6 +19,7 @@ export function subscribeSystemScheme(callback: () => void): () => void {
 		appearanceListener = () => listeners.forEach((listener) => listener())
 		host()?.onAppearanceChange?.(appearanceListener)
 	}
+
 	return () => listeners.delete(callback)
 }
 

package/src/controls.macos.tsrx

@@ -24,6 +24,7 @@ export function Button(props: ButtonProps) @{
 export function Checkbox(props: CheckboxProps) @{
 	const checked = props.checked ?? false
 	const colors = controlColors(useThemeScheme() === 'dark')
+
 	<flexboxlayout
 		id={props.id}
 		flexDirection="row"
@@ -49,7 +50,7 @@ export function Checkbox(props: CheckboxProps) @{
 				...(checked ? { backgroundColor: colors.primary } : {}),
 			}}
 		>
-			{checked ? <Text className="vx-checkbox-check" style={{ fontFamily: 'system-ui', fontSize: 14, lineHeight: 20, color: colors.onPrimary }}>✓</Text> : null}
+			{checked ? <Text className="vx-checkbox-check" style={{ fontFamily: 'system-ui', fontSize: 14, lineHeight: '20px', color: colors.onPrimary }}>✓</Text> : null}
 		</flexboxlayout>
 		{props.label != null ? <Text className="vx-checkbox-label">{props.label}</Text> : null}
 	</flexboxlayout>
@@ -58,6 +59,7 @@ export function Checkbox(props: CheckboxProps) @{
 export function Switch(props: SwitchProps) @{
 	const checked = props.checked ?? false
 	const colors = controlColors(useThemeScheme() === 'dark')
+
 	<flexboxlayout
 		id={props.id}
 		flexDirection="row"
@@ -108,6 +110,7 @@ export function Slider(props: SliderProps) @{
 			setDragValue(null)
 		}
 	})
+
 	const adjustValue = (direction: number) => {
 		if (props.disabled) {return}
 		const next = Math.min(max, Math.max(min, value + direction * ((max - min) / 100)))

package/src/data-driver.mobile.test.ts

@@ -0,0 +1,120 @@
+import { expect, it, vi } from 'vitest'
+import { createUniversalRoot, flushUniversalSync } from 'octane/universal/native'
+import { Retained } from '../tests/data-lifecycle.fixture.mobile.tsrx'
+
+// Only the NativeScript host objects are substituted. The installed driver,
+// compiler output, scheduler, events, and visibility commands are real.
+vi.mock('@nativescript/core', () => {
+	class View {
+		visibility = 'visible'
+		parent: View | null = null
+		text = ''
+		listeners = new Map<string, Set<(data: unknown) => void>>()
+		on(type: string, fn: (data: unknown) => void) {
+			if (!this.listeners.has(type)) {
+				this.listeners.set(type, new Set())
+			}
+
+			this.listeners.get(type)!.add(fn)
+		}
+		off(type: string, fn: (data: unknown) => void) {
+			this.listeners.get(type)?.delete(fn)
+		}
+		notify(data: { eventName: string }) {
+			for (const fn of this.listeners.get(data.eventName) ?? []) {
+				fn(data)
+			}
+		}
+	}
+
+	class LayoutBase extends View {
+		children: View[] = []
+		addChild(view: View) {
+			this.children.push(view)
+			view.parent = this
+		}
+		insertChild(view: View, index: number) {
+			this.children.splice(index, 0, view)
+			view.parent = this
+		}
+		removeChild(view: View) {
+			this.children.splice(this.children.indexOf(view), 1)
+			view.parent = null
+		}
+		getChildrenCount() {
+			return this.children.length
+		}
+		getChildIndex(view: View) {
+			return this.children.indexOf(view)
+		}
+	}
+
+	class ContentView extends View {
+		content: View | null = null
+	}
+
+	class TextBase extends View {}
+	const named = Object.fromEntries(
+		'AbsoluteLayout ActionBar ActionItem ActivityIndicator Button LiquidGlass DatePicker DockLayout FlexboxLayout FormattedString Frame GridLayout HtmlView Image Label ListPicker ListView NavigationButton Page Placeholder Progress ProxyViewContainer RootLayout ScrollView SearchBar SegmentedBar SegmentedBarItem Slider Span StackLayout Switch TabView TabViewItem TextField TextView TimePicker ViewBase WebView WrapLayout'
+			.split(' ')
+			.map((name) => [name, class extends View {}]),
+	)
+
+	return {
+		...named,
+		View,
+		LayoutBase,
+		ContentView,
+		TextBase,
+		Button: TextBase,
+		Label: TextBase,
+		unsetValue: Symbol('unset'),
+	}
+})
+
+it('NativeScript driver permits retained suspense and delivers native taps and uncaught errors', async () => {
+	// A direct driver import bypasses the object-driver alias for the renderer
+	// entry. This is the installed package that the mobile app actually uses.
+	const { nativeScriptDriver, createNativeScriptContainer, releaseNativeScriptContainer } =
+		await import('../node_modules/@nativescript-community/octane/dist/driver.js')
+
+	const { LayoutBase } = await import('@nativescript/core')
+	expect(nativeScriptDriver.capabilities.visibility).toBe(true)
+	const host = new LayoutBase()
+	const container = createNativeScriptContainer(host)
+	const uncaught = vi.fn()
+	const warning = vi.spyOn(console, 'warn').mockImplementation(() => {})
+	const root = createUniversalRoot(container, nativeScriptDriver, { onUncaughtError: uncaught })
+	container.root = root
+	let resolve!: (value: string) => void
+	const pending = new Promise<string>((done) => {
+		resolve = done
+	})
+
+	const error = new Error('native handler failure')
+	const fail = vi.fn(() => {
+		throw error
+	})
+
+	try {
+		root.render(Retained, { pending, fail })
+		const body = (host as any).children[0]
+		body.notify({ eventName: 'tap' })
+		flushUniversalSync(() => {})
+		expect((host as any).children[0]).toBe(body)
+		expect(body.visibility).toBe('collapse')
+		expect((host as any).children[1].text).toBe('pending')
+		resolve('resolved')
+		await vi.waitFor(() => expect(body.text).toBe('resolved'))
+		expect(body.visibility).toBe('visible')
+
+		;(host as any).children[1].notify({ eventName: 'tap' })
+		expect(fail).toHaveBeenCalledOnce()
+		expect(uncaught).toHaveBeenCalledWith(error)
+		expect(warning).not.toHaveBeenCalled()
+	} finally {
+		root.unmount()
+		releaseNativeScriptContainer(container)
+		warning.mockRestore()
+	}
+})