RadListView. Item animation doesn’t work when item is removed with swipe action

[valera1401]

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow?

No

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital letter.

RadListView. Item animation doesn’t work when item is removed with swipe action.

You can check app/examples/listview/reorder/ page of this project https://github.com/NativeScript/nativescript-marketplace-demo as an example.

Which platform(s) does your issue occur on?

Android

[tsonevn]

Hi @valera1401, I tested this case while using swipe-actions example and I set up the delete animation to Scale and indeed this is a real issue and the animation will not be applied while using swipe action functionality and item animations. For example:

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:lv="nativescript-pro-ui/listview" xmlns="http://www.nativescript.org/tns.xsd">
    <GridLayout orientation="vertical" rows="auto, *">
        <!-- >> listview-swipe-actions-set-enabled-xml -->
        <lv:RadListView 
            id="listView" 
            items="{{ dataItems }}" 
            row="1" 
            selectionBehavior="None" 
            itemSwipeProgressEnded="onSwipeCellFinished"
            itemSwipeProgressStarted="onSwipeCellStarted" 
            itemSwipeProgressChanged="onSwipeCellProgressChanged"
            itemSwiping="onItemSwiping" 
            swipeActions="true">
           <lv:RadListView.listViewLayout>
                  <lv:ListViewLinearLayout scrollDirection="Vertical" itemInsertAnimation="Scale" itemDeleteAnimation="Scale"/>
          </lv:RadListView.listViewLayout>
        <!-- << listview-swipe-actions-set-enabled-xml -->
            <lv:RadListView.itemTemplate>
                <StackLayout orientation="vertical" style="background-color: white;" paddingLeft="5">
                    <Label fontSize="20" text="{{ name }}" marginBottom="8"/>
                    <Label fontSize="14" text="{{ title }}" style="font-weight: bold;"/>
                    <Label fontSize="12" text="{{ text }}"/>
                </StackLayout>
            </lv:RadListView.itemTemplate>
            <!-- >> listview-swipe-actions-template-xml -->
            <lv:RadListView.itemSwipeTemplate>
                <GridLayout columns="auto, *, auto" backgroundColor="White">
                    <StackLayout id="mark-view" col="0" style="background-color: blue;" tap="onLeftSwipeClick" paddingLeft="16" paddingRight="16" orientation="horizontal">
                        <Label text="mark" style="text-size: 20" verticalAlignment="center" horizontalAlignment="center"/>
                    </StackLayout>
                    <StackLayout id="delete-view" col="2" style="background-color: red;" tap="onRightSwipeClick"  paddingLeft="16" paddingRight="16" orientation="horizontal">
                        <Label text="delete" style="text-size: 20" verticalAlignment="center" horizontalAlignment="center" />
                    </StackLayout>
                </GridLayout>
            </lv:RadListView.itemSwipeTemplate>
            <!-- << listview-swipe-actions-template-xml -->
        </lv:RadListView>
    </GridLayout>
</navigation:ExamplePage>

For further info please keep track on the issue.

[dali-gharbi]

Hi, @valera1401 @tsonevn in my case the animation work fine, when i delete using swipe action you must add a timeout after calling this event

notifySwipeToExecuteFinished

            this.listViewComponent.listView.notifySwipeToExecuteFinished();
            setTimeout(() => {
              this.actionStore.actionItems.splice(indexOfItem, 1);
              this.actionStore.totalCount--;
            }, 500);

[valera1401]

Hi @dali-gharbi Thank you for your response. On your suggestion, the row returns to the start position and only after that the row is deleted with the animation. It does not look beautiful.