How to build your chat UI

If you are using React Native to develop an IM app, you might use some open source libraries like react-native-gifted-chat. It is a superior library, using flexibly can meet the most of developers' IM project requirements.

I'm using the library for my project, too. Not bad in general. But I have found some problems that forced me to find an alternative.

The reason is that my app only has single chat feature in the early days. The number of the messages will not be over 100 in the majority of conversations. However, while my app adds group chat feature, my user start to complain that the phone is getting hot. My intuition tells me that the list containing too many messages caused this problem (React Native always has a problem in processing long list). I tested when I send 300 to 400 messages in a conversation, including text and image messages, and my phone got stuck obviously, some images and custom messages cannot render in time, and my phone started to get hot, too. I try to solve this problem and optimize for a while, but the result is not satisfying.

I searched for solution for a long time until I found someone recommend aurora-imui-react-native in Facebook group.

The library is also a chatting UI library, which inspired my interest. I tried to use this library to test hundreds of messages in a list, and finding the phone still able to run smoothly, and didn't get hot, too. The following is my specific comparison of the two libraries.

Performance Testing

I started to analyze two libraries for memory and energy consumption.

Memory

Testing text message:

Send 100, 200, 300 and 400 text messages respectively, and monitor the memory consumption.

Gifted-chat:

react-native-gifted-chat

Here is aurora-imui:

The two libraries' memory using are in 100MB, and no stuck situation or render timeout, good job.

Testing image messages:

Send 100, 200, 300, 400 and 500 image messages at a time, monitor the memory consumption.

Here is gifted-chat's:

react-native-gifted-chat

Aurora-imui:

aurora-imui-react-native

It's obvious that with the increasing of the number of images, the consumption of memory is growing fast, up to 557MB. However, after sending 500 images, the memory consumption of aurora-imui is stable to 33MB or so.

Energy

Sending 300 images by using gift-chat, you can feel the phone is getting hot obviously, and cannot render in time.

Gifted-chat:

react-native-gifted-chat

Aurora-imui:

aurora-imui-react-native

Disadvantage

Aurora-imui-react-native also has some disadvantages. For example, the custom capability is not enough, because this library is based on native code, so you cannot adjust style arbitrarily in JS side.

Conclusion

How to choose which one to use

If you prefer:

• Excellent performance
• Process large number of messages (Group chat)
• High demand for media messages (Image, emoji, video)

I suggest aurora-imui-react-native.

However, if you prefer:

• Flexible using, higher custom requirements
• No need to process massive messages
• Only need text message

then you should try react-native-gifted-chat.