美文网首页
How to build your chat UI

How to build your chat UI

作者: Aceyclee | 来源:发表于2017-12-02 14:46 被阅读0次

    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.

    相关文章

      网友评论

          本文标题:How to build your chat UI

          本文链接:https://www.haomeiwen.com/subject/wxhwbxtx.html