React Native Chat Tutorial #3 – Menu Screen

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.

• 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.

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

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

• 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.

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.

• 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.

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.

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.

• 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.

New actions and reducers are added like this.

After you add new actions and reducers to actions/index.js and reducers/index.js, you can see the following screen.

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.