[🐛] EmptyStateIndicator from Channel not hidden when new message is sent

[josh-]

Issue

When passing EmptyStateIndicator to the Channel component (and a user is viewing a channel with no messages), sending a new message in the channel will not automatically hide the EmptyStateIndicator and show the MessageList.

Here's how we are rendering the Channel component:

<Channel
  channel={channel}
  disableKeyboardCompatibleView
  initialScrollToFirstUnreadMessage
  autoCompleteTriggerSettings={autoCompleteTriggerSettings}
  markdownRules={markdownRules}
  messageActions={messageActions}
  myMessageTheme={myMessageTheme}
  UrlPreview={UrlPreview}
  EmptyStateIndicator={() => <EmptyState channel={channel} />}
>
  <MessageList onListScroll={dismissKeyboard} />
  <MessageInput />
</Channel>

and here's how we are rendering out EmptyState with a predefined message example that a user can send in the channel:

const EmptyState = ({ channel }: Readonly<{ channel: ChannelType }>) => {
  const { mutate: sendMessage } = useMutation({
    mutationFn: (text: string) => channel.sendMessage({ text }),
  });

  return (
    <VStack>
      <Text>{'No messages. Example messages you can send:'}</Text>
      <Button
        onPress={() => {
          sendMessage('What is the weather today?');
        }}
      >
        {'What is the weather today?'}
      </Button>
    </VStack>
  );
};

However I've tested with sending a message from a different user account and this issue is also present there - I can see the typing indicator and then when the message is sent the EmptyStateIndicator is still shown.

Steps to reproduce

Steps to reproduce the behavior:

1. Setup a Channel component with an EmptyStateIndicator
2. View a channel with no messages
3. Send a new message in the channel with channel.sendMessage or by sending a new message from another user
4. Observe that the EmptyStateIndicator is not hidden

Expected behavior

The EmptyStateIndicator is automatically hidden and the MessageList is shown.

Project Related Information

Customization

Click To Expand

# N/A

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:

"stream-chat-expo": "^5.25.0",

react-native info output:

System:
  OS: macOS 14.3.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 58.64 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.2
    path: ~/.nvm/versions/node/v18.18.2/bin/node
  Yarn:
    version: 4.1.1
    path: ~/.nvm/versions/node/v18.18.2/bin/yarn
  npm:
    version: 9.8.1
    path: ~/.nvm/versions/node/v18.18.2/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    API Levels:
      - "33"
    System Images:
      - android-33 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10227.8.2321.11479570
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.2
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • 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.25.0
• Device/Emulator info:
  • I am using a physical device
  • OS version: iOS 174
  • Device/Emulator: iPhone 13 Pro

Additional context

Screenshots

Click To Expand

Here's an example video:

stream.bug.mp4

and logs to indicate that a new message is sent when pressing the button:

 LOG  Sentry Logger [log]: [TouchEvents] Touch event within element: View
 LOG  Sentry Logger [log]: [TouchEvents] Touch event within element: Text
 INFO  stream-chat: client: post - Request - https://chat.stream-io-api.com/channels/messaging/7d2ebf07-dfcf-4efb-8171-d288c29fb866/message
 INFO  stream-chat: connection:onmessage() - onmessage callback
 INFO  stream-chat: client:_handleClientEvent - Received event of type { message.new }
 INFO  stream-chat: channel:_handleChannelEvent - Received event of type { message.new } on messaging:7d2ebf07-dfcf-4efb-8171-d288c29fb866
 INFO  stream-chat: client:post - Response - url: https://chat.stream-io-api.com/channels/messaging/7d2ebf07-dfcf-4efb-8171-d288c29fb866/message > status 201
 INFO  stream-chat: connection:onmessage() - onmessage callback
 INFO  stream-chat: client:_handleClientEvent - Received event of type { health.check }

when manually navigating back and then into the message screen the new message is then visible:

---

[radko93]

I think I can reproduce this issue. My current workaround is to rerender Channel unfortunately.

[matous94]

I have the same problem

[khushal87]

A PR is up to solve the problem @matous94 @josh- @radko93. Thanks for pointing the issue.

[josh-]

Thank you @khushal87!

[stream-ci-bot]

🎉 This issue has been resolved in version 5.30.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀