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:
Since the Disconnect menu returns to the Login screen, we will modify Login.js in the following way.
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.
This tutorial implements all screens with exactly the same flow. Following this pattern makes it easy to build any screen.
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.
You should create a new function in actions and reducers return states based on commands like below.
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.
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.
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.