nativescript-community / nativescript-community/ui-collectionview

Seems to be impossible to disable animations

Open
#90 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
62
Forks
19
Avg merge
2d 15h
Merged PRs (30d)
2

Description

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>

https://github.com/user-attachments/assets/1b2cd586-dc5f-4671-b022-a01d1c3c3fb7

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the keyboard open/close resize with the issue's GridLayout and CollectionView markup, then inspect the createLayout(collectionView) entry point and the UIView.animateWithDurationDelayOptionsAnimationsCompletion call. Determine which resize or layout path triggers the bubble animations, and verify that the completed behavior gives callers control over animations during these updates.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, typescript
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.