React Native Chat Tutorial #4 – Implement a Chat Screen


We're Hiring!

Help Sendbird build the world's no. 1 messaging platform


Note from Sendbird: The information in this blog is outdated. To find the most up-to-date information and sample app, please visit Sendbird Docs and GitHub repository for JavaScript.

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

You may get to know this structure in detail by reading Sendbird.d.ts in Sendbird JavaScript SDK.

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, UserMessageUserMessage 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.

You can check out more features in Sendbird SDK official guideline and SendBird.d.ts in JavaScript SDK sample repo. And Sendbird JavaScript repo provides more examples to follow. Thank you.

Categories: Engineering

Tags: Engineering, React Native