I'm working on a react-native chat with laravel backend (I'm using Laravel Websockets/Pusher).

In the backend I my messages model has a isRead boolean field, I'm having problems finding a way to correctly mark chat messages as read, for example when a user navigates to chat screen I fire axios to get messages and check if there are unread messages, then I mark them as read if needed.

But how can I mark as read messages that were sent when the receiving user was looking at the chat screen? Is there a client event for that, how can I deal with this?

My chat screen is a simple Flatlist.

<FlatList ref={flatListRef} 
              vertical={true} onScroll={handleScroll} onEndReachedThreshold={0.5} onEndReached={markChatMessagesAsRead} showsVerticalScrollIndicator={false} style={{ flex:1,padding:15}} data={messages} keyExtractor={item => item.id.toString()}
            renderItem={({ message, index }) => 
              <View  style={{width:'100%',flexDirection:'row', ...index == messages.length-1 ? {marginBottom:100} : {marginBottom:5}}}>
    <Text>{ message.body}</Text>
                   <Text>{ message.isRead }</Text>
              </View>}
            />