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
1. Disconnect Menu
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
- When the user clicks the Disconnect button, call sendbirdLogout in Actions
- sendbirdLogout function in Actions calls sbDisconnect function in sendbirdActions and returns the result
- Reducer returns the state based on the previous result
- 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
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.