search

GetStream / stream-chat-react-native

💬 React-Native Chat SDK ➜ Stream Chat. Includes a tutorial on building your own chat app experience using React-Native, React-Navigation and Stream
https://getstream.io/chat/sdk/react-native/
Other
960 stars 321 forks source link

[🐛] Channel switching breaks if reusing an existing view #2670

Open oddanderson opened 2 weeks ago

oddanderson commented 2 weeks ago

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

```typescript jsx 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); } {channel && ( ), }} inverted={false} onListScroll={onScroll} HeaderComponent={CustomHeader} ScrollToBottomButton={empty} /> )} ```

Offline support

Environment

Click To Expand

#### `package.json`: ```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