So far, ChannelList works fine, but you will notice that it's not real-time. If you reload your app, you should see a few channels populated in the channels list, as shown in the screenshot below: But it's just a way to avoid extra calls to untUnread(), which essentially loops through messages. It's not necessary since you can quickly get an unread count of the channel in renderChannelRow using channel.unreadCount() to decide if it's read or unread. This way, I can tell the renderChannelRow function if the current channel to render is unread or not.
If you would like to see the final state of the app in action quickly, please clone the following expo example of the slack clone and run it on the emulator or a phone:Īs you can note here, I have supplied isUnread: true to unread section data. Here are a few links to help you if you get stuck along the way: Note If you want to send a message to the app, to check if the real-time feature is working or not, use this CodePen.
If you feel lost during the tutorial, the following resources will be helpful: Instead, this tutorial will serve as a go-to guide to help you understand how you can build real-life chat using UI components provided by Stream's Chat and Messaging API and SDKs. Note: The objective of this tutorial is not intended to help you build a production-ready clone of the Slack application (because it already exists). In this part of our tutorial, we will cover Slack’s following UI/UX features: The Slack application comes with plenty of features. In this tutorial, we will build a clone of Slack, a messaging platform for workplaces. Building a chat application used to be a massive chunk of work, but with the power of react-native and Stream Chat, it's possible to create a messaging app within minutes. And with every new release, it gets better and better in terms of development speed and performance. React Native has a significant footprint in the mobile development world.
0 kommentar(er)
