Search code examples
javascriptfirebaselistviewnativescript

ListView refreshes only on scroll up and down

I wrote a chat App but the Problem is that if another User writes Me the Message doesnt load immediatly.

Only if i scroll up and then down.

If i write a Message it gets updated immediatly.

I use Firebase and Nativescript.

TS:

import { DatePipe } from "@angular/common";
import { Component, ElementRef, Input, OnInit, ViewChild } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { FormatListNumbered } from "@material-ui/icons";
import { RouterExtensions } from "@nativescript/angular";
import {  EventData, ListView, TextField } from "@nativescript/core";
import { ScrollView } from "@nativescript/core/ui/scroll-view"
import { connectableObservableDescriptor } from "rxjs/internal/observable/ConnectableObservable";
import { ChatService, DataChat } from "../shared/chat.service";
import { FormControl } from '@angular/forms';

import { UserService, DataUser } from "../shared/user.service";
import { firestore } from "@nativescript/firebase";
import { AsyncAction } from "rxjs/internal/scheduler/AsyncAction";
import { Screen } from "@nativescript/core"

@Component({
    selector: "ItemDetail",
    styleUrls: ['item-detail.component.css'],
    templateUrl: "./item-detail.component.html",
    providers: [DatePipe]
})
export class ItemDetailComponent implements OnInit {
messages: any[] = [];

constructor() { }

ngOnInit(): void {}

loadChat(){
      this._chatService.getChat(this.id).then((chat: any) => { 
            var chatData = chat.data()
           
            chatData["user"].forEach(user => {
                if(user != this.me){
                    this._userService.getUserObject(user).then((userObject:any) => {
                        this.user = userObject;
                    });
                }
            })
          
            try{
                chatData["messages"].forEach((msgs:any) => {
                    this.messages.push(msgs);
                }) 
                
            }catch{
                console.log("noch keine nachrichten verfasst");
            }

            this.unsubscribe = this._chatService.ChatCollection
            .doc(chat.id)
            .onSnapshot(doc => {
                try{
                    var lastElement = doc.data().messages[doc.data().messages.length-1];
                    lastElement.time = this.datePipe.transform(lastElement.time, 'h:mm a');
                    
                    if(this.messages[this.messages.length-1].msg == lastElement.msg){
                       
                    }else{
                        this.messages.push(lastElement);
                    }
                }catch{
                    console.log("noch keine nachrichten verfasst item-detail component")
                }
                
            }); 
            this.formatTime();
        })
    }
     sendMessage(){
        if(this.text == undefined){
            console.log("Sie haben keine Nachricht eingetippt");
        }else{
            this._chatService.addMessage(this.id, this.text, this.me);
            let counter = 0;
            setTimeout(() => {
                this.messages.forEach(elemt => {
                    counter ++;
                })
                this.listView.scrollToIndex(this.counter);
                this.clearText();
            }, 300)  
            setTimeout(() => {
                this.messages.forEach(elemt => {
                    counter ++;
                })
                this.listView.scrollToIndex(this.counter);
                this.clearText();
            }, 600)
        }
    }

So the code appends every new Message that gets added to "messages: any[] = [];"

HTML:

<ActionBar>
    <NavigationButton (tap)="onBackTap()" android.systemIcon="ic_menu_back"></NavigationButton>
    <Label [text]="user.name"></Label>
</ActionBar>

<ListView (loaded)="listViewLoaded($event)" class="chat-body" [items]="messages" separatorColor="transparent" style="height: 80%;margin-top: -200px" >
            <ng-template let-message="item" let-odd="odd" let-even="even">
                <GridLayout rows ="auto, *">
                    <Label style="padding-right:150px" *ngIf="message.sender == me" horizontalAlignment="right" class="chat-message-me" [text]="message.msg" textWrap="true"></Label>
                    <Label *ngIf="message.sender == me" horizontalAlignment="right" class="chat-timestamp" verticalAlignment="bottom" [text]="message.time"></Label>
                
                    <Label  style="padding-left:170px" *ngIf="message.sender != me" horizontalAlignment="left" class="chat-message-you" [text]="message.msg" textWrap="true"></Label>
                    <Label *ngIf="message.sender != me" horizontalAlignment="left" verticalAlignment="bottom" class="chat-timestamp" [text]="message.time"></Label>
                </GridLayout>
            </ng-template>
        
        </ListView>
    <StackLayout  class="nt-form chat-wrapper"  >
    <StackLayout loaded="test" id="chat-form" orientation="horizontal" class="nt-input input-field form">
  
   <TextField  
   #TextField
    (textChange)="onTextChange($event)" 
    [text]="inputText"
    width="800px"  
    class="-rounded-lg input" 
    hint="Nachricht" 
    style="background-color: #ffffff;"
></TextField>
        <button width="120px" class="-rounded-lg fa far fas fab" (tap)="sendMessage();" style="margin-left: 15px;" text="&#xf1d8;"></button>
    </StackLayout>
</StackLayout>

And the HTML adds it to the View. This works for every Message i send like so:

enter image description here

enter image description here

But if the other person writes this happens:

(Message send: "I'm the other guy")

enter image description here

But if i scroll up and down it is there. Not if i only scroll down.

enter image description here

Also if i immediatly scroll down after i send the message from "the other guy", this error occurs:

System.err: An uncaught Exception occurred on "main" thread.
System.err: The content of the adapter has changed but ListView did not receive a notification. Make sure the content of your adapter is not modified from a background thread, but only from the UI thread. Make sure your adapter calls notifyDataSetChanged() when its content changes. [in ListView(4, class android.widget.ListView) with Adapter(class com.tns.gen.android.widget.BaseAdapter_vendor_126974_28_ListViewAdapter)]
System.err:
System.err: StackTrace:
System.err: java.lang.IllegalStateException: The content of the adapter has changed but ListView did not receive a notification. Make sure the content of 
your adapter is not modified from a background thread, but only from the UI thread. Make sure your adapter calls notifyDataSetChanged() when its content changes. [in ListView(4, class android.widget.ListView) with Adapter(class com.tns.gen.android.widget.BaseAdapter_vendor_126974_28_ListViewAdapter)]       
System.err:     at android.widget.ListView.layoutChildren(ListView.java:1717)
System.err:     at android.widget.AbsListView$CheckForTap.run(AbsListView.java:3490)
System.err:     at android.os.Handler.handleCallback(Handler.java:938)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:99)
System.err:     at android.os.Looper.loop(Looper.java:223)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7656)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)

As I understood it, it is a problem with the refreshing from the UI.

ChatService getChat:

getChat(RoomId){
        return new Promise((resolve, reject)=>{
            this.ChatCollection.doc(RoomId)
            .get()
            .then(msg => {
                resolve(msg);
            })
            .catch(err=>{
                console.log(err);
                reject(err);
            })
        })
    }
Solution

  • The problem when the UI doesn't get updated when a value change is coming from a library is because it runs outside of Angular's zone, which explains you having to scroll to trigger a UI update.

    A fix for that is to wrap wherever you are making the call to update the array your ListView inside an ngZone to make sure its running within Angular's zone.

    import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

 this.unsubscribe = this._chatService.ChatCollection
            .doc(chat.id)
            .onSnapshot(doc => {
                // NEW
                this.ngZone.run(() => {
                  try{
                    var lastElement = doc.data().messages[doc.data().messages.length-1];
                    lastElement.time = this.datePipe.transform(lastElement.time, 'h:mm a');
                    
                    if(this.messages[this.messages.length-1].msg == lastElement.msg){
                       
                    }else{
                        this.messages.push(lastElement);
                    }
                  } catch{
                    console.log("noch keine nachrichten verfasst item-detail component")
                  }
                });
            });