React Native Chat Tutorial #4 - Implement a Chat Screen
1. Chat Screen
This tutorial teaches you to implement a chat screen that appears, when a user selects a channel from the OpenChannel list. As you’ve done in previous tutorials, you’ll create a new screen and put the appropriate work into actions and reducers.
1.1. Screen Transition
Create a new file Chat.js under the /screens folder and add a transition from OpenChannel.js to chat screen.
The function _onListItemPress (line 55) in OpenChannel.js is an event-handler, triggered when a user clicks one of the open channels. This transitions the screen to a chat room.
This tutorial uses the navigate function in React Navigation. It sets the destination screen, and allows you to pass variables and functions in the transition. In this case, OpenChannel.js shifts to Chat.js and passes the current channel URL.
1.2. Chat Screen
1.2.1 The structure of SendBird’s messages
SendBird structures its messages in the following way:
- channelUrl - channel URL
- messageId - message ID
- reqId - message request ID to determine which request corresponds to which response
- message - message content
- customType - a type that SendBird uses to distinguish message type
- data - A message’s custom data (JSON)
- sender - message sender
- createdAt - Time the message was delivered
- updatedAt - Time the message was last updated
1.2.2 Sending and Receiving Messages
Sending and receiving messages is the chat screen’s main function. The Message component is reusable, so you can create and reuse it.
Here is an input text box for sending a message.
See the code below to construct a chat screen using the Message component and MessageInput component.
The Message list is displayed through ListView in React Native. ListView is similar to its use in Android and iOS. In the message list panel, ListView retrieves and attaches the previous messages to the top of scroll. But the ListView component doesn't natively provide a scroll top event.
ListView wraps ScrollView, which means that every ListView works as a ScrollView but also has some added functionality. ScrollView contains the event property, onScroll, which can trigger a call event by the position of the scroll. ListView also offers a onEndReached event handler that this tutorial uses.
In order to trigger the onEndReached event at the top of the scroll, ListView must be upside-down (see at line 197 in Chat.js). Since the message list is reversed due to the reversal of ListView, the Message component must reverse it again to correct it (see at line 41 in Message.js).
The following code provides the actions and reducers for chat screen operation.
SendBird provides onMessageReceived It is an event handler called with parameters, channel and message. Since the sender’s message does not call onMessageReceived, SendBird recommends handling this message with the sendUserMessage callback (see l. 26 in sendbirdActions/chat.js and at l. 99 in actions/chatActions.js).
This tutorial uses a text-based message, UserMessage. UserMessage has a feature that sets a custom type for each message. The SendBird SDK also supports other kinds of messages such as FileMessage and AdminMessage.