[🐛] Bug Report Title - Message List Disappears After Refresh

[Vijay-Magadum]

Hello there,
I've built a chat app using React Native Expo and Stream Chat SDK v5. I use MessageList to show messages on the Chat Screen and have customized MessageContent with props in the Channel component. My problem is that sometimes, after refreshing the chat screen, all messages vanish, and I need to switch screens back and forth to see them again. Can you help fix this, or is it resolved in v6?

[akruczek]

I'm facing similar issue after upgrading React Native from v72 to v76 and migrating stream-chat from v5 to v6.
When I send a message sometimes all messages disappear (only the last one stay visible).
Any insights?

[isekovanic]

Hello @Vijay-Magadum ,

This should not be happening, no. It is not reproducible on any of our sample apps either.

Please have a look at the github issue template and follow that so that we can get a better understanding of what's going on. Either a minimum reproducible sample or more insights on your setup would be needed. Please update your issue description.

@akruczek same here, which version of the SDK are you using exactly ? What's your setup roughly ?

[akruczek]

@isekovanic
react-native: 0.76.7
stream-chat-react-native: 6.6.6

Here is a simple recording showing my issue, not sure if it's related, but sounds similar.
In this example I don't use any custom components, only Channel, MessageList, MessageInput, without any custom logic.

example.mp4

[isekovanic]

I see ! Thank you, that is indeed helpful @akruczek ; I'll try to reproduce it later tonight and let you know. Just for brevity, can you please tell me if you're using offline support or not ?

And if the same thing happens whenever you have more messages within the message list (for example more than 25, which is the default pagination window) ?

[Vijay-Magadum]

hey @isekovanic , From my side please see the below video for reference and I have enabled offline support as well.

Screen.Recording.2025-03-06.at.8.24.38.PM.mov

[isekovanic]

Hi @Vijay-Magadum , can you please have a look at my comment and provide the information requested in the issue template ? I have no context at all like this, since I do not know which RN version you're using, or which version of the SDK or anything of the sort.

Please fill out all of the data required before I have a look at the issue.

[akruczek]

I see ! Thank you, that is indeed helpful @akruczek ; I'll try to reproduce it later tonight and let you know. Just for brevity, can you please tell me if you're using offline support or not ?

And if the same thing happens whenever you have more messages within the message list (for example more than 25, which is the default pagination window) ?

Thank you @isekovanic!
No, I'm not using offline support.
Also, I see the same behavior for 25+ (and much more) messages.

[isekovanic]

I see @akruczek ; can I see everything the entire implementation of this screen ? To me it seems like loadMore is being invoked and something gets messed up in the process. If you're using stream-chat, which version is it ?

[Vijay-Magadum]

Hi @Vijay-Magadum , can you please have a look at my comment and provide the information requested in the issue template ? I have no context at all like this, since I do not know which RN version you're using, or which version of the SDK or anything of the sort.

Please fill out all of the data required before I have a look at the issue.

hey @isekovanic ,
sorry for that actually I am using :

react-native-expo : "~51.0.39"
stream-chat-expo: "^5.41.2"

Also my Chat screen implementation is like below:

<View style={{ flex: 1 }}>
      <StatusBar barStyle="dark-content" />
      <Appbar.Header style={styles.appBar}>
        {/* Back Button with Count */}
        <View style={styles.backButtonContainer}>
          <Appbar.BackAction
            onPress={handleBackAction}
            color={Colours.faintBlack}
          />
          <View style={styles.unreadCountContainer}>
            <Text style={styles.unreadCountText}>
              {unreadChannelCount > 0 ? unreadChannelCount : ""}
            </Text>
          </View>
        </View>

        {/* Profile and Channel Information */}
        <Pressable style={styles.avatarContainer} onPress={handleHeaderPress}>
          <ChannelAvatar channel={channel} />
          <View style={styles.appBarContent}>
            <Text
              style={styles.appBarTitle}
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              {displayName}
            </Text>
            {channelType === channelTypes.TEAM ? (
              <Text
                style={styles.memberNames}
                numberOfLines={1}
                ellipsizeMode="tail"
              >
                {getMemberInfo(channelMembers, user.id)}
              </Text>
            ) : (
              <Text
                style={
                  lastActiveTime === t("IS_ONLINE_TEXT")
                    ? styles.isOnline
                    : styles.lastSeenText
                }
              >
                {lastActiveTime}
              </Text>
            )}
          </View>
        </Pressable>

        {/* Call Button */}
        {/* <Pressable onPress={handleCallPress} style={styles.callButton}>
        <SVGIcons.chatCallIcon />
      </Pressable> */}
      </Appbar.Header>

      <ImageBackground style={{ flex: 1 }} source={IMAGE_URI}>
        <View style={{ flex: 1, paddingLeft: 8, paddingRight: 16 }}>
          <MessageList
            setFlatListRef={(ref) => messageListRef}
            EmptyStateIndicator={() => null}
            targetedMessage={targetedMessage}
          />
        </View>

        <MessageInput
          audioRecordingEnabled={true}
          Input={CustomMessageInput}
          asyncMessagesMultiSendEnabled={false}
        />
      </ImageBackground>
    </View>

Also please mention if you need anything from my side

[isekovanic]

Thank you @Vijay-Magadum , so at first glance it doesn't appear as anything suspicious is going on in here.

However, could you please upgrade to the latest V5 version ? That would be v5.45.0. We've introduced a bunch of fixes related to scrolling to bottom (which vaguely resembles what you're trying to do on a larger scale) and these issues might be resolved. There shouldn't be any breaking changes for this so you can bump it to that version.

Also, in case you're using stream-chat please make sure that it's compatible with v5.45.0, so you're looking for v8.46.0 (if you're not using stream-chat then feel free to disregard that part).

[Vijay-Magadum]

@isekovanic Thanks, I will update and see if that fixes my issue.

[isekovanic]

Thanks @Vijay-Magadum , do let me know if it is indeed resolved; if not, we'll debug further.

[isekovanic]

Hi @akruczek , so I gave this a shot yesterday evening and could not get it to happen at all.

Would it be possible to either share your approximate implementation (even if there are no customizations, there might be a hint somewhere in there) or even better providing a minimum reproducible sample of the issue ?

It'll help us pinpoint it much easier that way.

[isekovanic]

Hi @Vijay-Magadum and @akruczek , any update from your side here ?

[Vijay-Magadum]

hey @isekovanic , after updating to v5.45.0 I am not able to reproduce that issue, so I guess from my side it is fixed. If it appears again, then I will ping you here.