nativescript-community / nativescript-community/ui-collectionview
Seems to be impossible to disable animations
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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