Subscribe to Email updates

Please use a valid email address.

Privacy Policy.
React Native Chat Tutorial #3 - Menu Screen

React Native Chat Tutorial #3 - Menu Screen

Jan 03, 2018

This tutorial implements a main menu for your React Native chat application with 4 sub-menus, each with their own screens.

The tutorial is organized according to the 4 sub-menus:

  • Disconnect: Disconnect and return to Login screen
  • Profile: View or edit user profile
  • OpenChannel: Show Open Channel List
  • GroupChannel: Show Group Channel List

You can always start your messaging app by signing up to our Dashboard.

1. Disconnect Menu

1.1. Disconnect

Since the Disconnect menu returns to the Login screen, we will modify Login.js in the following way.

...waiting for Gist...

  • In line 4: Import NavigationActions to reset StackNavigator
  • In line 24-32: Reset StackNavigator by using the reset function

As discussed in the previous article, re-write the Menu screen's  action, reducer, screen like the following.

...waiting for Gist...

To use the SendBird SDK's disconnect function, we've added a new function to sendbirdActions/user.js and menuActions.js.

...waiting for Gist...

Based on the commands coming from menuActions.js, the new code passes states to Menu screen.

...waiting for Gist...
  • In line 21-34: When Disconnect is done, reset StackNavigator and move to Login screen
  • In line 48-50: When Disconnect button is clicked, it calls sendbirdLogout function in menuActions.js

1.2. Flow

  1. When the user clicks the Disconnect button, call sendbirdLogout in Actions 
  2. sendbirdLogout function in Actions calls sbDisconnect function in sendbirdActions and returns the result
  3. Reducer returns the state based on the previous result
  4. Screen detects the state change and jumps to Login Screen

This tutorial implements all screens with exactly the same flow. Following this pattern makes it easy to build any screen.


2. Profile Menu

2.1. Creating save button

This section shows you how to create a screen where a user can view or edit the current user profile. To accomplish this, we'll use the SendBird SDK's updateCurrentUserInfo function. The screen will look like the following.RN3-image-02.png

To create a save button on the right-hand side of the screen header, we need to set headerRight in navigationOption. If you directly define actions, then it displays errors claiming that the function is not defined.

To fix this issue, we need to modify navigator's param and set the value when we create Profile screen.

...waiting for Gist...
  • In line 18-27: Adding a save button
  • In line 40: setParams links the target function of the save button

2.2. Edit Profile

You should create a new function in actions and reducers return states based on commands like below.

...waiting for Gist...
When we add sbUpdateProfile function, which updates proflie information to  user.js, we also update the existing sbConnect function. As you create new actions, screens, and reducers,  add each one to App.js, reducers/index.js and actions/index.js.

3. OpenChannel Menu

3.1. OpenChannel

SendBird has two types of Channels: (1) OpenChannel is public chat available to everyone; (2) GroupChannel is private chat, including 1-on-1 messaging, that requires an invitation to join.

OpenChannel fits especially well to live streaming chat, where a lot of users chat together without strict control over access. GroupChannel is suitable for 1-on-1 messaging or small group conversation.

You can find more details in SendBird's Official Documentation.

3.2.  OpenChannel List

To get a list of OpenChannels from SendBird, you can use the createOpenChannelListQuery method in the SendBird SDK.  We've added a new function using this method to sendbirdActions/openChannel.js.

...waiting for Gist...

OpenChannelListQuery object saves a pointer indicating the current position of query status. Whenever you call the next function, it returns the next page. If you want to return to the first page, then call createOpenChannelListQuery to get a new OpenChannelListQuery object.

...waiting for Gist...
  • In line 27-38: Updates the screen UI when the state changes
  • line 59-65: When a user pulls the scroll, it returns the first page again. To prevent repeated calls, we check the refresh value

To move to the OpenChannel screen from the menu,  create a new click event in Menu.js and make App.js recognize OpenChannel.

...waiting for Gist...

New actions and reducers are added like this.

...waiting for Gist...

After you add new actions and reducers to actions/index.js and reducers/index.js, you can see the following screen.RN3-image-03.png

The OpenChannelListQuery object also supports  search by name or url as well as setting the size of each page.  SendBird.d.ts reveals a full list of features and fuctions that the SendBird JavaScript SDK provides.

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