Seems to be impossible to disable animations

[cjohn001]

I am trying to use a collection view for a chat app. I need to change the layout of the view when the keyboard opens/closes. What I try to achive is to keep the message list static and scroll it to bottom during animation of the keyboard. However, seems like uicollectionview has a default animation set which is triggered when i call rootview.layoutIfNeeded. Seems like text bubbles animate in from left to right on each update of the layout

I think i found a workaround by not resizing the collection view but rather setting contentOffset. However, very ugly as this massively limits use of the CollectionView. Seems like I canot get control over the animations during resize events. If their is a clean way to do it would be great to get some info about how to do it. I tried to overwrite the functions as described here without success

https://www.objc.io/issues/12-animations/collectionview-animations/

"@nativescript-community/ui-collectionview": "6.0.5",

						UIView.animateWithDurationDelayOptionsAnimationsCompletion(
							duration,
							0,
							options,
							() => {
								const insets = vc.additionalSafeAreaInsets;
								// Preserve any other edges; only change bottom
								vc.additionalSafeAreaInsets = new UIEdgeInsets({
									top: insets.top,
									left: insets.left,
									bottom: inset,
									right: insets.right,
								});
								rootView.layoutIfNeeded();
							},
							null
						);
		

export function createLayout(collectionView: CollectionView) {
	return UICollectionViewFlowLayout.alloc().init();
}

<GridLayout rows="*,auto" columns="*" class="container" iosOverflowSafeArea="true">
	<CollectionView #idCollectionView row="0" col="0" layoutStyle="chatview" class="list" [items]="_chat()?._messages"
		iosEstimatedRowHeight="100" [itemTemplateSelector]="templateSelector" [itemIdGenerator]="itemIdGenerator" rowHeight="auto"
		iosAllowsSelection="false">
		<ng-template let-item="item" cvTemplateKey="text-template">
			<GridLayout width="100%" [columns]="item.sender === 'user' ? '*,auto' : 'auto,*'">
				<StackLayout [col]="item.sender === 'user' ? 1 : 0" [width]="bubbleMaxWidth()" horizontalAlignment="stretch">
					<Label [text]="item.text" class="bubble" [class.user]="item.sender === 'user'" textWrap="true" width="auto"
						[horizontalAlignment]="item.sender === 'user' ? 'right' : 'left'">
					</Label>
				</StackLayout>
			</GridLayout>
		</ng-template>
	</CollectionView>

	<GridLayout #idComposerBar row="1" columns="*, 80" class="input-bar bottom-tool-bar">
		<TextView col="0" #idComposerTextField class="composer-text-view" [text]="_inputText()" (textChange)="onComposerTextChanged($event)"
			(focus)="onComposerFocus()" [hint]="_isLoading() ? '': 'Message' " (loaded)="onComposerTextViewLoaded($event)">
		</TextView>
		<Button col="1" class="send-btn" text="Send" (tap)="onSend()" [hidden]="_isLoading()" width="80"></Button>
		<ActivityIndicator col="1" class="composer-loading" [busy]="_isLoading()" [hidden]="!_isLoading()" width="80">
		</ActivityIndicator>
	</GridLayout>
</GridLayout>

Bildschirmaufnahme.2025-09-14.um.00.15.50.mov

[farfromrefug]

@cjohn001 can you try to add autoReloadItemOnLayout=true on the collectionview ?