androidreact-nativereact-navigationreact-native-gifted-chat

React Native gifted chat crashing on both emulator and device only on Android, works fine in iOS


I'm trying to get the Gifted Chat working on Android but everything I've tried isn't working. The documentation is here.. It says that there are some Android-related issues near the end of the documentation, but they are all recommendations, not requirements. (In any case, I've tried all of them).

My AndroidManifest has the following:

<activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

I've upgraded to the latest version, and I'm using the code example which is below that they provided to try to isolate what could be going wrong (not my own code which could have additional dependencies/unrelated bugs)

import React, { useState, useCallback, useEffect } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'

export function Example() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    setMessages([
      {
        _id: 1,
        text: 'Hello developer',
        createdAt: new Date(),
        user: {
          _id: 2,
          name: 'React Native',
          avatar: 'https://placeimg.com/140/140/any',
        },
      },
    ])
  }, [])

  const onSend = useCallback((messages = []) => {
    setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
  }, [])

  return (
    <GiftedChat
      messages={messages}
      onSend={messages => onSend(messages)}
      user={{
        _id: 1,
      }}
    />
  )
}

There aren't any error messages I'm seeing, the app simply crashes every time I navigate to the screen with the Gifted chat. As was said in the question title, it only happens on Android (both emulator and device) and it's working perfectly fine on iOS.

Wondering if someone else has run across the same problem and has a quick fix.

Thanks.


Solution

  • The solution may be that you did not include renderAvatar in your code. Looking on the GitHub repository, I found an issue where GiftedChat was not working on android if that was not provided. Below is an example to demonstrate what I mean:

    <GiftedChat
      messages={messages}
      onSend={(messages) => onSend(messages)}
      user={{
          _id: 1,
      }}
    
      renderAvatar={renderAvatar} (if I remove this line it will crash after 2,3 seconds)
    />
    ``