Observable Array: Strange behavior inside a badge, text/numbers disappearing


I am facing an issue while using an ObservableArray binding to a Listview.

At a first glance, it works. But after touch (drag) the screen, the numbers inside the badges are randomly disappearing.

I just made a screen capture to show the problem: https://youtu.be/lhMLmIidoAg

  • Example: at 5th line (84 - C) you can see the number inside the badge: 89
  • So, a little scroll down touching the screen
  • Another scroll up
  • The badge is empty now. The number disppeared

So, while using the screen scrolling in a simple listview, the badge numbers toggle disappearing/appearing randomly.

What can I do?


Would you mind sharing some code or creating a playground will be the best option to debug.


Well, I am using the following structure:

<ListView items="{{ listaMenu }}" itemTap="abrirModulo">
       <GridLayout class="" columns="*, auto" rows="*">
           <StackLayout col="0" orientation="vertical" class="">
               <Label id="description" text="{{ descr }}" textWrap="true" />
               <Label id="name" text="{{ nome }}" />
           <Label col="1" id="badge" text="{{snv}}" />

After some testing, I get rid from issue giving to Label[id=name] the property textWrap=true:

           <Label col="1" id="badge" text="{{snv}}" textWrap="true" />

Maybe it’s a layout problem on grid layout…
But for now it’s solved!



Follow up with final solution: changed from GridLayout to FlexboxLayout.

    font-size: 18px;
    color: black;
    font-weight: bold;
    background-color: #f7bd00;
    border-radius: 50%;
    margin:25px 10px;
/* ------------------------------ */
    <FlexboxLayout flexDirection="row" color="white">
        <StackLayout class="fonte20" flexGrow="1"> <!-- Pay attention to use of flexgrow -->
            <Label id="name" text="{{ nome }}"/>
            <Label id="description" text="{{ descr }}" class="cinza"/>
        <Label id="name" text="{{snv}}" class="badgeAmarelo"/>