Subscribe to Email updates

Please use a valid email address.

Privacy Policy.
React Native Chat Tutorial #4 - Implement a Chat Screen

React Native Chat Tutorial #4 - Implement a Chat Screen

Apr 16, 2018

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.

...waiting for Gist...

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:

...waiting for Gist...
  • 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.

...waiting for Gist...

Here is an input text box for sending a message.

...waiting for Gist...

See the code below to construct a chat screen using the Message component and MessageInput component.

...waiting for Gist...

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.

...waiting for Gist...

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.

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.

We're Hiring!
Help SendBird build the world's no. 1 messaging platform
We're Hiring!
Help SendBird build the world's no. 1 messaging platform
Related articles
Migrating chat made easy with Sync Server
Introduction Part of the challenge of migrating from one chat provider to another is not having a live migration solution ready. Building a live migration solution can be cost
Solutions Engineer
Don't try this at home: Why software engineers shouldn't build chat in-house
Before I helped co-found SendBird as the Chief Technology Officer, I built chat as a feature for two products. Both were consumer apps for families that required a real-time s
Chief Technology Officer
Extreme Optimization of AsyncStorage in React Native
 AsyncStorage is a unique built-in feature for storing data in React Native and a good way to store simple key-value data. To make the SendBird SDK less dependent on other pac
Software Engineer - Applications
© SendBird 2019. All rights reserved.
Follow us