[🐛] Channel switching breaks if reusing an existing view

[oddanderson]

Issue

If you have a view with the following structure:

<Channel channel={channelObj}>
<MessageList />
<MessageInput />
</Channel>

If this View is persisted when changing channels, and the channelObj changes to a new channel, the MessageList does not automatically update in most circumstances.

The exception to this is if you start using MessageInput to send messages. Once you "send a message," switching channels works as expected. However, if you load up a channel on a fresh boot without ever sending a message, the UI will not appropriately update until you send a message.

Steps to reproduce

Steps to reproduce the behavior:

1. Create a persistent View with Channel, MessageList, and MessageInput
2. Select a new channel in a popup modal, such that the View in question is not destroyed
3. Observe that messages shown in the View are still showing the old channel
4. Send a message, observe that the View will immediately update to show the correct channels in the new channel

Expected behavior

I expect to be able to see the messages in a newly selected channel in a View without destroying it and without needing to send a message.

Project Related Information

Customization

Click To Expand

      try {
        const channels = await chatClient.queryChannels(
          { type: "community", id: { $eq: newChannel.id } },
          [],
          {
            watch: true,
            state: true,
          },
        );
        const channel = channels[0];
        setChannel(channel);
      } catch (error) {
        console.error(error);
      }
      
<Chat client={chatClient} style={streamTheme}>
            {channel && (
              <Channel
                keyboardVerticalOffset={0}
                channel={channel}
                MessageSimple={CommunityMessage}
                hideStickyDateHeader={true}
                hideDateSeparators={true}
                hasCommands={false}
                hasFilePicker={false}
              >
                <MessageList
                  additionalFlatListProps={{
                    refreshControl: (
                      <RefreshControl
                        refreshing={refreshing}
                        onRefresh={reload}
                      />
                    ),
                  }}
                  inverted={false}
                  onListScroll={onScroll}
                  HeaderComponent={CustomHeader}
                  ScrollToBottomButton={empty}
                />
                <MessageInput />
              </Channel>
            )}
          </Chat>

Offline support

• [ ] I have enabled offline support.
• [ ] The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

# N/A

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • [] iOS
  • [ ] Android
  • [X] iOS but have not tested behavior on Android
  • [ ] Android but have not tested behavior on iOS
  • [ ] Both
• stream-chat-react-native version you're using that has this issue:
  • 5.33.1
• Device/Emulator info:
  • [ ] I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

Additional context

Screenshots

Click To Expand

---