![]() ![]() You can find detailed docs about Stream events here. We need to implement event handlers in our useWatchedChannels hook for this purpose. If a message is sent on some channel by another user, it won’t reflect on your ChannelList. 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. Now let's use our ChannelListItem component in the ChannelList component’s SectionList.Īs you can note here, I have supplied isUnread: true to unread section data. It will also check whether or not it contains user mentions. This component will ensure different styles based on whether it's a group channel or one-on-one conversation, or if it's an unread channel. Let's create a proper UI for this item that resembles Slack.Ĭreate a new component in a separate file named src/components/ChannelListItem.js. The renderChannelListItem function currently returns, which displays the ID of the channel. It sorts them into three categories, which are returned as state variables: unreadChannels, readChannels, oneOnOneConversations ![]() This hook queries the channels using the Stream client. If you are not familiar with React hooks, here are some great resources to get started: Later, we will update them in real-time when new messages arrive, or we move messages between groups. Now let’s create a hook in ChannelList.js file, which takes care of querying channels. We will use this function as an onPress handler for the ChannelListItem. We have also added a prop function named changeChannel, which takes care of opening the channel screen and passing the provided channel ID to it. Let's start by creating a Stream Chat client in App.js and passing it as a prop to the ChannelList component. As I mentioned earlier in the tutorial, we are going to use Stream’s chat infrastructure. Now let's populate the SectionList with some channels. Next, prepare the following directory structure in the root directory of the project: You will see a button titled Download family at the top. You can download Lato font files from the slack-clone project repository and icons from here.Īlternatively, you can download the fonts from the Google Fonts website. To do so, create a file named in the project directory and paste the following contents: For visual parity, we need to import the font into our app. Slack uses a Lato font, which is freely available on. Once you have a dev environment setup, create a new react-native application: Please read the Installing Dependencies section of the official react-native docs. 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:īefore getting started, please make sure you have a development environment setup for react-native. 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). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |