RadListView is adding another empty line/item after each added item on iOS

[fbele]

Please, provide the details below:

Tell us about the problem

RadListView is adding another empty line/item after each added item on iOS

Which platform(s) does your issue occur on?

iOS 16.4 using NS Preview

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI plugin version: nativescript-ui-listview: ^15.2.3
• CLI: 8.5.3
• Cross-platform modules: ^8.5.0

Please tell us how to recreate the issue in as much detail as possible.

I am just starting an application with ns preview and scanning the code with my iPhone. I am building an application using Svelte Native. I am trying to make a simple list of goals/to-dos.

In the image above you can see the marked empty space that is added after each added item to the list and I cannot figure it out why. The grey area is actually the background of the app.

What I have noticed is that the added gap (the empty area) is always as the same height as the actual added element. For example, if I reduce the padding so the item is narrower, so the empty space gets narrower.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

<script lang="ts">
  import { Template } from "svelte-native/components";
  import { ListViewViewType } from "nativescript-ui-listview";
  import { fade } from "svelte-native/transitions";

  let newGoal: string = "";
  let newGoalInput: any;
  let courseGoals: string[] = [];

  const handleAddNewGoal = () => {
    if (!newGoal) {
      return;
    }

    courseGoals = [...courseGoals, newGoal];
    newGoal = "";
    newGoalInput.nativeView.dismissSoftInput();
    console.log(courseGoals.length);
  };

  const onSwipeCellStarted = (args: any) => {
    const swipeLimits = args.data.swipeLimits;
    const deleteButtonWidth = args.object.getViewById("delete-view").getMeasuredWidth();
    swipeLimits.left = 0;
    swipeLimits.right = deleteButtonWidth;
    swipeLimits.threshold = deleteButtonWidth / 2;
  };

  const handleGoalDelete = (args: any) => {
    let goal = args.view.bindingContext;
    console.log(goal);
    if (courseGoals.indexOf(goal) < 0) return;
    try {
      // deleteItem(item);
      courseGoals = courseGoals.filter((i) => i != goal);
    } catch (error) {
      console.log(error);
      /* alert({
                message: "An error occurred while removing the item from your list.",
                okButtonText: "OK"
            }); */
    }
  };
</script>

<page>
  <actionBar title="Goals" />
  <gridLayout rows="auto, *" backgroundColor="#3c495e">
    <gridLayout row={0} columns="*,auto" class="add-bar">
        <textField
            col={0}
            hint="Type new task..."
            bind:text={newGoal}
            bind:this={newGoalInput} />
        <button col={1} text="Add New Goal" on:tap={handleAddNewGoal} />
    </gridLayout>
    <radListView
        items={courseGoals}
        row={1}
        on:itemSwipeProgressStarted={onSwipeCellStarted}
        swipeActions={true}
        transition:fade={{ duration: 1000 }}>
        <Template type="{ListViewViewType.HeaderView}" > 
            <label class="header">This is a Header</label>
        </Template>

        <Template type={ListViewViewType.ItemView} let:item>
            <label class="p-20" text={item} />
        </Template>

        <Template type={ListViewViewType.ItemSwipeView}>
            <gridLayout columns="*,auto">
                <stackLayout
                    id="delete-view"
                    col={1}
                    on:tap={handleGoalDelete}
                    class="delete-view">
                    <image src="~/assets/delete.png" />
                </stackLayout>
            </gridLayout>
        </Template>

        <Template type="{ListViewViewType.FooterView}" > 
            <label class="footer">This is a Footer</label>
        </Template>
    </radListView>
  </gridLayout>
</page>

<style>
  .add-bar {
    background-color: #cb1d00;
    padding: 5;
  }

  .add-bar Image {
    height: 15;
    vertical-align: center;
    margin-left: 10;
    margin-right: 10;
  }

  .add-bar TextField {
    padding: 10;
    color: white;
    placeholder-color: #efefef;
    border-color: white;
  }

  .delete-view {
    background-color: #cb1d00;
    padding: 14;
  }

  Label {
    color: black;
    background-color: #efefef;
    border-bottom-width: 1;
    border-bottom-color: gray;
  }
</style>