Typing in chat freezes the app on Android

[gregssdev]

Describe the bug
On Android when you type some message, a long message it will freeze the app at a random interval of time

Dev environment info (please complete/provide the following information):

• Package version (stream-chat-react-native): 5.0.0
• react-native: 0.66.3
• Device/Emulator: Android (Any)

To Reproduce
Steps to reproduce the behavior:

1. Go to Message Input
2. Type something random around 100-200 words
3. If the app didn't freeze, clear a few words and start typing again for a while
4. App will freeze

Expected behavior
App should run smoothly

[billnbell]

Is there a limit in SQLite or in Android ?

[vishalnarkhede]

limit for?

[vishalnarkhede]

@billnbell what props are you passing the Channel component? Could you show me some code?

[billnbell]

I am not having any issues @gregssdev is

[vishalnarkhede]

@billnbell what props are you passing the Channel component? Could you show me some code?

@gregssdev for you

[gregssdev]

I used these props

        AutoCompleteSuggestionItem
        AutoCompleteSuggestionHeader
        channel
        disableKeyboardCompatibleView
        DateHeader
        deletedMessagesVisibiltyType
        doMarkReadRequest
        forceAlignMessages
        giphyEnabled
        hasFilePicker
        InlineUnreadIndicator
        InputButtons
        mentionAllAppUsersEnabled
        mentionAllAppUsersQuery
        MessageFooter
        MessageSimple
        MessageStatus
        MessageSystem
        ReactionList
        Reply
        SendButton
        ScrollToBottomButton
        SendMessageDisallowedIndicator
        supportedReactions
        TypingIndicator

[vishalnarkhede]

It's hard to point out without looking at the implementation of these props. But I can give few tips:

• Avoid using ChannelContext on message level custom components e.g, MessageSimple, MessageStatus etc
• Avoid passing inline functions as custom component or inline objects/arrays as props
• You might need to do some profiling using Flipper to check if there is any particular component causing overhead for the app

[1987cr]

Maybe related to this facebook/react-native#35350?

[vishalnarkhede]

hmm interesting....

[hannojg]

Does it happen for you guys on any android version? For us this issue only happens on android 13 (aka. API 33)

[atsss]

Any updates on it? We're also struggling with freezing chat only on Android.

[santhoshvai]

@atsss @gregssdev I guess both of you are running android 13 (aka. API 33) ?

[atsss]

Yes. It's happening on android 13.

[Eigilak]

Same. We only experience this on 33 aka Pixel devices!
We are on 0.70.5

[vanGalilea]

Hey guys, this is a known RN/Android issue, and we're still awaiting it.

[mi-fa]

Hi! Are there any updates on resolving this issue?

[nathancoleman]

Is there any sort of workaround for this? Chat is basically unusable for our impacted users on Android.

[billnbell]

What version are you using ?

[billnbell]

What I meant by limit is: 200 words being stored in SQLite might hit a 64K limit. Also there might be a limit in the REST call back to Getstream. Did you try this on IOS? Does it do the same thing?

Also, can you set an input limit to like like 2K or something?

[billnbell]

Can someone submit a repo that is small so we can see it? Something like an app.tsx, and Chat ?

[gpahal]

We are facing the same issue. We have a simple chat screen using stream. Something like this:

<StreamChannel
  {...props}
  initialValue={messages[channelId]}
  onChangeText={debounce((value) => {
    updateCache(channelId, value)
  }, 300)}
>
  <MessageList
    {...listProps}
  />
  <MessageInput />
  <MessageActions {...actionProps} />
</StreamChannel>

After interacting a bit with the message input the screen completely freezes. This is fixed by adding inverted={false} to the MessageList

<StreamChannel
  {...props}
  initialValue={messages[channelId]}
  onChangeText={debounce((value) => {
    updateCache(channelId, value)
  }, 300)}
>
  <MessageList
    inverted={false}
    {...listProps}
  />
  <MessageInput />
  <MessageActions {...actionProps} />
</StreamChannel>

[vanGalilea]

Can someone submit a repo that is small so we can see it? Something like an app.tsx, and Chat ?

The fastest way to achieve that is with the following command to create a new RN project with Stream chat in it:

npx react-native init StreamChatApp --template react-native-stream-chat-template

More information about how to run the template after initialization can be found here

[atsss]

Do you have any plans to fix the problem like that temporarily? Because our android customer is having difficulties with typing and it's so critical for chatting.

facebook/react-native#35350 (comment)

[vanGalilea]

This is not a proper solution, but you can think about the following fix until RN introduces an official fix
You can patch React Native and create your inverted flat list containing the right styling. More info in this PR.
After creating your new and improved FlatList, you can pass it to Channel under the prop FlatList.

One BIG drawback is that bi-directional lazy loading will not work anymore.

We keep on monitoring this issue here and, will think along when a proper solution will be introduced.

[nathancoleman]

@vanGalilea is there any workaround that can happen in the stream-chat-react-native library so that we're not having to patch React Native and create custom components? We're paying a large amount of money for Stream every month, and our Android users are having a bad experience due to this bug. I realize the root issue is outside of this project; however, that doesn't change the fact that we're paying for a broken product right now.

[nathancoleman]

So excited to consume that workaround @santhoshvai, thanks!

[santhoshvai]

Hey everyone, We have released a workaround in 5.11.0-beta.2. Can anyone please upgrade to that version and try it out. If confirmed, we will release it to stable. This workaround seemed to work in our pixel 7 device, but we would like confirmation from users before releasing it.

[santhoshvai]

@nathancoleman 😊 Please try the workaround and report if it works please. We have also contacted other customers to try it out and we intend to ship this to stable asap.

[nathancoleman]

@santhoshvai I've confirmed that I can no longer reproduce the issue on my Pixel 4a with the beta release installed 💯